/* Homepage ambient motion — light, atmosphere, depth.
   Loaded only on index.html. Honors prefers-reduced-motion. */

/* ---------- Hero typography load-in ---------- */
.hero .kicker,
.hero h1,
.hero .lede,
.hero-actions{
  animation: hero-rise .9s cubic-bezier(.22,.7,.3,1) both;
}
.hero .kicker{animation-delay:.12s}
.hero h1{animation-delay:.32s}
.hero .lede{animation-delay:.52s}
.hero-actions{animation-delay:.72s}

@keyframes hero-rise{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:none}
}

.hero h1{
  text-shadow:0 2px 28px rgba(0,0,0,.55), 0 1px 8px rgba(0,0,0,.4);
}
.hero .kicker,
.hero .lede{
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}

/* Slightly stronger veil so type stays readable over a live wash */
.hero-media::after{
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.58) 100%);
  z-index:3;
}

/* ---------- Living cabin wash ---------- */
.hero-media{isolation:isolate}
.hero-media img{
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.08);
  transform-origin:center 40%;
}
.hero-wash,
.hero-bloom{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-wash{z-index:1}
.hero-bloom{z-index:2}

.hero-wash-tint{
  position:absolute;
  inset:0;
  background-color:#2EE8E0;
  mix-blend-mode:color;
  opacity:.3;
  animation:wash-tint 30s ease-in-out infinite;
}
.hero-glow{
  position:absolute;
  width:70%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(circle, currentColor 0%, transparent 68%);
  mix-blend-mode:screen;
  opacity:.62;
  pointer-events:none;
}
.hero-glow-a{
  left:2%;
  top:38%;
  color:#2EE8E0;
  animation:glow-a-color 30s ease-in-out infinite, glow-a-move 22s ease-in-out infinite;
}
.hero-glow-b{
  right:0;
  top:18%;
  width:48%;
  height:48%;
  color:#E84AFF;
  animation:glow-b-color 30s ease-in-out infinite, glow-b-move 26s ease-in-out infinite;
}

@keyframes wash-tint{
  0%,100%{background-color:#2EE8E0}   /* cyan */
  20%{background-color:#E84AFF}       /* magenta */
  40%{background-color:#FFB020}       /* amber */
  60%{background-color:#7EC8FF}       /* ice-blue */
  80%{background-color:#FF5A62}       /* soft red */
}
@keyframes glow-a-color{
  0%,100%{color:#2EE8E0;opacity:.42}
  20%{color:#FF6AD5;opacity:.48}
  40%{color:#FFC14A;opacity:.4}
  60%{color:#7EC8FF;opacity:.44}
  80%{color:#FF6B73;opacity:.4}
}
@keyframes glow-b-color{
  0%,100%{color:#E84AFF;opacity:.36}
  20%{color:#FFB020;opacity:.4}
  40%{color:#7EC8FF;opacity:.38}
  60%{color:#FF5A62;opacity:.36}
  80%{color:#2EE8E0;opacity:.42}
}
@keyframes glow-a-move{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,-4%,0) scale(1.08)}
  66%{transform:translate3d(-3%,5%,0) scale(1.04)}
}
@keyframes glow-b-move{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-5%,6%,0) scale(1.1)}
  70%{transform:translate3d(4%,-3%,0) scale(1.03)}
}

/* Pointer-follow bloom (activated by JS on fine pointers) */
.hero-bloom{
  opacity:0;
  background:radial-gradient(
    circle 18rem at var(--bx, 50%) var(--by, 50%),
    rgba(255,255,255,.22) 0%,
    rgba(180,230,255,.1) 30%,
    transparent 68%
  );
  mix-blend-mode:screen;
  transition:opacity .4s ease;
}
.hero-bloom.is-on{opacity:1}

/* Thin light-strip along the hero edge */
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,#2EE8E0,#E84AFF,#FFB020,#7EC8FF,#FF5A62,#2EE8E0);
  background-size:200% 100%;
  animation:strip-slide 18s linear infinite;
  opacity:.85;
}
@keyframes strip-slide{
  from{background-position:0 0}
  to{background-position:200% 0}
}

.hero.is-offscreen .hero-wash-tint,
.hero.is-offscreen .hero-glow,
.hero.is-offscreen::after{
  animation-play-state:paused;
}

/* ---------- Chapter cabin wash ---------- */
.chapter-media{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.chapter-wash{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-color:#E84AFF;
  mix-blend-mode:color;
  opacity:.4;
  animation:wash-tint 42s ease-in-out infinite reverse;
}
.chapter-media.is-offscreen .chapter-wash{
  animation-play-state:paused;
}

/* ---------- Discover now: restrained luminous hover + soft idle ---------- */
.hero .btn-on-photo{
  box-shadow:0 0 18px rgba(255,255,255,.16);
  animation:hero-rise .9s cubic-bezier(.22,.7,.3,1) both, cta-breathe 4.5s ease-in-out 1.2s infinite;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
@keyframes cta-breathe{
  0%,100%{box-shadow:0 0 16px rgba(255,255,255,.14)}
  50%{box-shadow:0 0 28px rgba(255,255,255,.32), 0 0 48px rgba(46,232,224,.16)}
}
.hero .btn-on-photo:hover,
.hero .btn-on-photo:focus-visible{
  animation:none;
  background:transparent;
  color:var(--white)!important;
  border-color:var(--white);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 0 28px rgba(255,255,255,.5),
    0 0 56px rgba(46,232,224,.28);
}

/* ---------- Scroll progress cue ---------- */
.scroll-progress{
  position:fixed;
  top:var(--header);
  left:0;
  right:0;
  height:2px;
  z-index:60;
  pointer-events:none;
  background:linear-gradient(90deg,#2EE8E0,#E84AFF,#FFB020,#7EC8FF,#FF5A62);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

/* ---------- Scroll reveals (only when html.has-motion) ---------- */
html.has-motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,56px,0);
  transition:
    opacity 1s cubic-bezier(.16,.7,.3,1),
    transform 1s cubic-bezier(.16,.7,.3,1);
  transition-delay:var(--d, 0s);
}
html.has-motion [data-reveal].is-in{
  opacity:1;
  transform:none;
}

html.has-motion [data-reveal-stagger] > *{
  opacity:0;
  transform:translate3d(0,48px,0);
  transition:
    opacity .95s cubic-bezier(.16,.7,.3,1),
    transform .95s cubic-bezier(.16,.7,.3,1);
  transition-delay:var(--d, 0s);
}
html.has-motion [data-reveal-stagger].is-in > *{
  opacity:1;
  transform:none;
}
/* Keep packshot hover lift after the card has arrived */
html.has-motion [data-reveal-stagger].is-in > .pcard:hover,
html.has-motion [data-reveal-stagger].is-in > .pcard:focus-within{
  transform:translateY(-8px);
}

/* Packshot veil: image lifts in from below like a light coming on */
html.has-motion [data-reveal-stagger] > * .thumb{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .95s cubic-bezier(.16,.7,.3,1);
  transition-delay:var(--d, 0s);
}
html.has-motion [data-reveal-stagger].is-in > * .thumb{
  clip-path:inset(0);
}

/* Chapter still: soft clip + rise */
html.has-motion [data-reveal-media]{
  opacity:0;
  transform:translate3d(0,48px,0);
  clip-path:inset(16% 0 0 0);
  transition:
    opacity 1.1s cubic-bezier(.16,.7,.3,1),
    transform 1.1s cubic-bezier(.16,.7,.3,1),
    clip-path 1.2s cubic-bezier(.16,.7,.3,1);
  transition-delay:var(--d, 0s);
}
html.has-motion [data-reveal-media].is-in{
  opacity:1;
  transform:none;
  clip-path:inset(0);
}
html.has-motion .chapter-media img{
  will-change:transform;
  transform:scale(1.12);
  transform-origin:center center;
}

/* Shot helper: freeze cabin wash + hero type; do NOT force-complete reveals
   so mid-scroll screenshots can show enter-view honestly. */
html[data-shot] .hero-wash-tint,
html[data-shot] .hero-glow-a,
html[data-shot] .hero-glow-b,
html[data-shot] .chapter-wash,
html[data-shot] .hero::after{
  animation-delay:-6s !important;
}
html[data-shot] .hero .kicker,
html[data-shot] .hero h1,
html[data-shot] .hero .lede,
html[data-shot] .hero-actions,
html[data-shot] .hero .btn-on-photo{
  animation:none;
  opacity:1;
  transform:none;
}

/* ---------- Reduced motion / small screens ---------- */
@media (max-width:860px){
  .hero-bloom{display:none}
  /* Keep a scaled hero image so light touch-scroll parallax has room */
  .hero-media img{
    transform:translate3d(0,0,0) scale(1.06);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero .kicker,
  .hero h1,
  .hero .lede,
  .hero-actions,
  .hero .btn-on-photo,
  .hero-wash-tint,
  .hero-glow,
  .hero::after,
  .chapter-wash{
    animation:none !important;
  }
  .hero .kicker,
  .hero h1,
  .hero .lede,
  .hero-actions,
  .hero .btn-on-photo{
    opacity:1;
    transform:none;
  }
  .hero-wash-tint{opacity:.28;background-color:#2EE8E0}
  .hero-glow{opacity:.2}
  .hero-bloom{display:none}
  .hero-media img,
  .chapter-media img{
    will-change:auto;
    transform:none;
  }
  .hero .btn-on-photo{box-shadow:none}
  .scroll-progress{display:none}
  html.has-motion [data-reveal-stagger] > *,
  html.has-motion [data-reveal],
  html.has-motion [data-reveal-media],
  html.has-motion [data-reveal-stagger] > * .thumb{
    opacity:1;
    transform:none;
    clip-path:none;
    transition:none;
  }
}