/* Furuodden Camping — motion layer (loaded after styles.css on every page).
 *
 * Trimmed port of Furuodden Sauna's motion.css (../../furuodden-sauna/src/assets/css/motion.css):
 * page transitions, scroll progress, scroll reveal, button sheen, card glow.
 * Everything that moves lives here and in assets/js/motion.js, so it can be tuned
 * or dropped without touching the base design. Rules of the house:
 *   - prefers-reduced-motion: reduce → nothing moves
 *   - only transform / opacity / filter animate
 *   - every effect is progressive: without support or JS the page looks like before
 */

/* ───────────────────────────────────────────────────────
   1. PAGE TRANSITIONS (cross-document View Transitions)
   Chrome/Edge 126+, Safari 18.2+. Others just navigate.
   ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.topbar { view-transition-name: topbar; }
footer.site { view-transition-name: footer; }
::view-transition-old(root) { animation: vt-out 0.28s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* ───────────────────────────────────────────────────────
   2. SCROLL PROGRESS — thin coral line under the top bar
   ─────────────────────────────────────────────────────── */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topbar::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: linear-gradient(90deg, var(--rust-soft), var(--rust));
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: scroll-progress linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
    @keyframes scroll-progress { to { transform: scaleX(1); } }
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* ─────────────────────────────────────────────────────
     3. SCROLL REVEAL — motion.js marks elements [data-reveal]
        and adds .is-in when they enter the viewport, then
        removes both once done so the base hover styles rule again.
     ───────────────────────────────────────────────────── */
  html.motion [data-reveal] {
    transition:
      opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
      filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  html.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
  html.motion [data-reveal="title"]:not(.is-in) { transform: translateY(20px); filter: blur(8px); }
  html.motion [data-reveal="card"]:not(.is-in) { transform: translateY(40px) scale(0.97); }
  html.motion [data-reveal="fade"]:not(.is-in) { transform: none; }

  /* ─────────────────────────────────────────────────────
     4. BUTTON SHEEN — a sweep of light on hover
     ───────────────────────────────────────────────────── */
  html .btn.primary,
  html .btn.primary:hover,
  html .topbar-cta,
  html .topbar-cta:hover {
    background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 130% 0;
  }
  html .btn.primary:hover,
  html .topbar-cta:hover {
    background-position: -30% 0;
    transition: background-color 0.2s, background-position 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.15s;
  }

  /* ─────────────────────────────────────────────────────
     5. CARDS — glow follows the pointer (motion.js sets --mx/--my)
     ───────────────────────────────────────────────────── */
  .bo-card, .booking-card { position: relative; isolation: isolate; }
  .bo-card::before, .booking-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), light-dark(rgba(196, 90, 43, 0.12), rgba(232, 140, 107, 0.14)), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
  }
  .bo-card:hover::before, .booking-card:hover::before { opacity: 1; }
}