/* ==========================================================================
   Luna — Ibiza Hikes · animations.css
   --------------------------------------------------------------------------
   Editorial restraint. Almost everything is still. The only motion we keep
   is a soft fade-up for content entry, a sheet slide for the Dip panel, and
   a slow pulse on the roll dice glyph when the user hits the button.
   `prefers-reduced-motion` kills the lot.
   ========================================================================== */

@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sheet-slide-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Utility classes ---------------------------------------------------------- */

.anim-pop {
  animation: pop-in 420ms cubic-bezier(0.25, 0.9, 0.3, 1) both;
}

/* --------------------------------------------------------------------------
   Hero-dice backdrop motion — slow, decorative, tasteful.
   --------------------------------------------------------------------------
   Trail dashes "draw" left to right (10 s draw + 5 s pause, looped). Sun
   arcs across the sky every ~30 s. A tiny hiker walks left to right every
   24 s. Clouds drift lazily on long offset loops. Compass needle rotates
   slowly. All pure CSS — no JS animation loop, no requestAnimationFrame.
   `prefers-reduced-motion: reduce` (below) kills everything.
   -------------------------------------------------------------------------- */

@keyframes hd-trail-draw {
  /* Total length is ~1700 SVG units along the path. Stroke-dasharray of the
     SVG element is `10 10` so dashoffset 1700 ≈ fully cleared. We sweep
     dashoffset from 1700 → 0 over ~10 s, then hold 0 (drawn) for ~5 s, then
     snap back to 1700 to loop. The result reads as a slow line being drawn,
     pausing on the page, and resetting off-screen. */
  0%   { stroke-dashoffset: 1700; }
  60%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1700; }
}

@keyframes hd-cloud-drift {
  /* Drift right, then loop back via translateX(-100%) so the cloud reappears
     from the opposite edge. We translate the parent <ellipse> through its
     own width via the SVG viewBox coordinate space (range ≈ 1500 units). */
  from { transform: translateX(-200px); }
  to   { transform: translateX(1700px); }
}

@keyframes hd-sun-arc {
  /* Sun starts off-screen left, arcs up + across, sets off-screen right.
     We use a translate per-frame on the wrapping <g>; translateY pulls it
     up at the apex (smaller cy = higher) and back down. */
  0%   { transform: translate(-100px, 240px); }
  20%  { transform: translate(280px, 130px); }
  50%  { transform: translate(720px, 90px); }
  80%  { transform: translate(1160px, 130px); }
  100% { transform: translate(1540px, 240px); }
}

@keyframes hd-hiker-walk {
  0%   { transform: translateX(-80px); }
  100% { transform: translateX(1540px); }
}

@keyframes hd-hiker-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@keyframes hd-compass-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hook each animation up. We respect `transform-box: fill-box` so SVG
   elements rotate around their own centre. */

.hero-dice__bg-svg .hd-trail {
  /* Long pause (15 s total) before the draw repeats. */
  animation: hd-trail-draw 15s linear infinite;
}

.hero-dice__bg-svg .hd-cloud {
  animation: hd-cloud-drift linear infinite;
  transform-box: view-box;
}
.hero-dice__bg-svg .hd-cloud--a { animation-duration: 70s; animation-delay: 0s; }
.hero-dice__bg-svg .hd-cloud--b { animation-duration: 95s; animation-delay: -30s; }
.hero-dice__bg-svg .hd-cloud--c { animation-duration: 110s; animation-delay: -60s; }

.hero-dice__bg-svg .hd-sun-wrap {
  animation: hd-sun-arc 60s linear infinite;
  transform-box: view-box;
}

.hero-dice__bg-svg .hd-hiker {
  animation: hd-hiker-walk 24s linear infinite;
  transform-box: view-box;
}
.hero-dice__bg-svg .hd-hiker > g {
  animation: hd-hiker-bob 600ms ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-dice__bg-svg .hd-compass {
  /* Rotate the inner needle around the compass centre, not the whole group
     (which would spin the "N" label too). */
  transform-origin: 1300px 540px;
}
.hero-dice__bg-svg .hd-compass-needle {
  transform-box: fill-box;
  transform-origin: center;
  animation: hd-compass-spin 28s linear infinite;
}

/* --------------------------------------------------------------------------
   Roll animation — dice tumble + card flip reveal
   --------------------------------------------------------------------------
   Dice tumble is ~900ms: each die independently translates, rotates, and
   drops with a slight bounce. The face SVGs are replaced by JS on an 85ms
   timer so the face cycles during the roll.
   --------------------------------------------------------------------------
   Card flip is ~1000ms per card, staggered 120ms. We rotate the inner
   around the Y axis 180°; front/back faces have backface-visibility: hidden.
   -------------------------------------------------------------------------- */

/* Overlay fade-in */
@keyframes roll-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes roll-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Page shake — the whole content container does a short wobble when the
   user hits Roll. Tight amplitude so it's felt more than seen. */
@keyframes page-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-8px, 3px) rotate(-0.45deg); }
  24%  { transform: translate(7px, -4px) rotate(0.55deg); }
  38%  { transform: translate(-6px, 5px) rotate(-0.35deg); }
  52%  { transform: translate(5px, -3px) rotate(0.3deg); }
  66%  { transform: translate(-4px, 2px) rotate(-0.2deg); }
  80%  { transform: translate(3px, -2px) rotate(0.12deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.is-rolling {
  animation: page-shake 620ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: center top;
  will-change: transform;
}

/* Card slide-in — cards enter from below the fold with the Polaroid tilt
   baked in so they settle with their natural lean. */
@keyframes roll-card-flip {
  0%   { transform: translateY(48px) rotate(var(--tilt, 0deg)) scale(0.94); opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: translateY(-4px) rotate(var(--tilt, 0deg)) scale(1.015); opacity: 1; }
  100% { transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); opacity: 1; }
}

/* Reduced-motion card: skip the flip, just a gentle fade-up */
@keyframes roll-card-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Caption / actions appear */
@keyframes roll-caption-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Region map pin: soft appear */
@keyframes rm-pin-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Region map: a gentle idle pulse on the Es Vedrà pin so the eye catches
   the map as the user scrolls past. Very subtle. */
@keyframes rm-beacon {
  0%, 100% { transform: scale(1); opacity: 0.0; }
  50%      { transform: scale(1.4); opacity: 0.4; }
}

/* Brand heart-trail mark -------------------------------------------------- */
/* On load: the trail line strokes itself on (≈1.1s) while a hiker dot walks
   the route; the heart fill blooms once the line is nearly closed; then one
   soft beat. Resting state = fully drawn, filled, hiker at the trailhead. */

@keyframes heart-trail-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes heart-fill-bloom {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heart-walk {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@keyframes heart-beat {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.14); }
  55%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.nav__logo-trail {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;                 /* resting: fully drawn */
  animation: heart-trail-draw 1100ms ease both;
}
.nav__logo-fill {
  opacity: 1;                           /* resting: visible */
  animation: heart-fill-bloom 520ms ease 980ms both;
}
.nav__logo-beat {
  animation: heart-beat 640ms ease 1550ms both;
}
/* Hiker dot walks the trail when offset-path is available; otherwise it
   simply rests at the trailhead (its cx/cy in markup). */
@supports (offset-path: path("M0 0L1 1")) {
  .nav__logo-hiker {
    cx: 0; cy: 0;
    offset-path: path("M20 34.5C12 27 4.5 21.5 4.5 14.2 4.5 9.8 8 6.4 12.3 6.4 15.7 6.4 18.6 8.5 20 11.3 21.4 8.5 24.3 6.4 27.7 6.4 32 6.4 35.5 9.8 35.5 14.2 35.5 21.5 28 27 20 34.5Z");
    offset-distance: 100%;              /* resting: at the trailhead (apex) */
    animation: heart-walk 1100ms linear both;
  }
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Place the animated bits at a sensible default state. Without these
     overrides, animation-duration: 0.001ms snaps elements to their final
     keyframe position — clouds vanish off-screen at translateX(1700px) and
     the compass needle lands on whatever angle 360° animation progress
     resolves to. Pin them to their natural resting positions. */
  .hero-dice__bg-svg .hd-trail { stroke-dashoffset: 0 !important; }
  .hero-dice__bg-svg .hd-sun-wrap { transform: translate(720px, 90px) !important; }
  .hero-dice__bg-svg .hd-hiker { transform: translateX(720px) !important; }
  .hero-dice__bg-svg .hd-cloud--a { transform: translateX(0) !important; }
  .hero-dice__bg-svg .hd-cloud--b { transform: translateX(0) !important; }
  .hero-dice__bg-svg .hd-cloud--c { transform: translateX(0) !important; }
  .hero-dice__bg-svg .hd-compass-needle { transform: rotate(0deg) !important; }

  /* Brand mark: skip the draw/walk/beat; show the finished heart at rest. */
  .nav__logo-trail { animation: none !important; stroke-dashoffset: 0 !important; }
  .nav__logo-fill { animation: none !important; opacity: 1 !important; transform: none !important; }
  .nav__logo-beat { animation: none !important; transform: none !important; }
  .nav__logo-hiker { animation: none !important; offset-distance: 100% !important; }

  /* Reduced-motion rolling: skip the page shake entirely and let cards
     fade in without the slide. */
  .is-rolling { animation: none !important; transform: none !important; }
  .roll-overlay--reduced .roll-card { animation: roll-card-fade 280ms ease both !important; }
  .roll-overlay--reduced .roll-card .roll-card__inner { transform: none !important; }
  .roll-overlay--reduced .roll-card__face--back { display: none; }
}