/* =====================================================================
   01-hero — Quest "Hero" (header#hero), measured on quest-template.framer.ai
   Layout: 100vh column, padding 196 / 0 / 48, content top, "Scroll down" bottom.
   Load motion (Framer appear JSON, all on the same clock as the nav):
     image      scale 1.05 → 1        2 s     cubic-bezier(.12,.23,.5,1)
     CTA        y 32 → 0, fade        .4 s    delay .8 s
     scroll cue y 24 → 0, fade        1.4 s   delay .6 s
   Text effect (js/sections/01-hero.js): per word / per character blur 10 → 0, y 32 → 0, fade.
   Scroll cue arrow: Framer variant loop gap 6 ↔ 8 px (spring k 484, c 34.8), 0.411 s per half.
   ===================================================================== */

[data-section="01-hero"].hero {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 196px 0 48px;
  overflow: visible;
}

/* ------------------------------------------------------- background */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__img {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: hero-img-in 2s cubic-bezier(0.12, 0.23, 0.5, 1) both;
}
.hero__img img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Overlay: #0a0d11 at 10 % → 100 % top to bottom */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 17, 0.1) 0%, var(--bg, #0a0d11) 100%);
}

/* ---------------------------------------------------------- content */
.hero__content {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 560px;
}
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.hero__title,
.hero__sub {
  width: 100%;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Framer rich text is pre-wrap (the space kept before the forced break shifts line 1 by half a space, like the template) */
.hero__title.is-split,
.hero__sub.is-split { white-space: pre-wrap; }
.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.hero__sub {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;          /* % (not 1.4) → 22.406 px char boxes, same LayoutUnit rounding as Framer */
  letter-spacing: -0.02em;
  color: var(--t-80);
}
/* split pieces (built by the section script): same final state Framer leaves on its spans
   (blur(0px) + will-change: transform → each piece keeps its own layer, so glyphs rasterise like the template's) */
.hero__w,
.hero__c { display: inline-block; filter: blur(0px); will-change: transform; }
.hero__wn { white-space: nowrap; }

/* text is hidden until the script splits + animates it (never stays hidden: fallback fade after 3 s) */
html.js .hero__title:not(.is-split),
html.js .hero__sub:not(.is-split) {
  opacity: 0.001;
  animation: hero-text-fallback 0.6s ease 3s forwards;
}

.hero__actions {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.hero__cta-wrap {
  flex: none;
  position: relative;
  will-change: transform;
  animation: hero-rise-32 0.4s cubic-bezier(0.12, 0.23, 0.5, 1) 0.8s both;
}

/* ------------------------------------------------------ scroll cue */
.hero__scroll-wrap {
  position: relative;
  flex: none;
  height: 40px;
  will-change: transform;
  animation: hero-rise-24 1.4s cubic-bezier(0.12, 0.23, 0.5, 1) 0.6s both;
}
.hero__scroll {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: min-content;
  height: 40px;
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hero__scroll-label {
  display: block;
  flex: none;
  white-space: pre;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--t-80);
}
.hero__arrow {
  flex: none;
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  overflow: visible;
  animation: hero-arrow 0.822s linear infinite;
}

/* -------------------------------------------------------- keyframes */
@keyframes hero-img-in {
  from { transform: scale(1.05); }
  to { transform: none; }
}
@keyframes hero-rise-32 {
  from { opacity: 0.001; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-rise-24 {
  from { opacity: 0.001; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-text-fallback { to { opacity: 1; } }
/* spring k 484 / c 34.76 / m 1 sampled into linear(); settles at 80 % of each 0.411 s half, then holds */
@keyframes hero-arrow {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.25, 0.7, 0.3, 1);
    animation-timing-function: linear(0, 0.0291 2.86%, 0.1015 5.72%, 0.1986 8.58%, 0.3068 11.44%, 0.4166 14.29%, 0.5214 17.15%, 0.6172 20.01%, 0.7017 22.87%, 0.7742 25.73%, 0.8347 28.59%, 0.8839 31.45%, 0.9229 34.31%, 0.9531 37.17%, 0.9757 40.02%, 0.9921 42.88%, 1.0034 45.74%, 1.0107 48.6%, 1.015 51.46%, 1.017 54.32%, 1.0174 57.18%, 1.0168 60.04%, 1.0154 62.9%, 1.0137 65.75%, 1.0118 68.61%, 1.0099 71.47%, 1.008 74.33%, 1.0064 77.19%, 1.005 80.05%, 1 80.06%, 1);
  }
  50% {
    transform: translateY(2px);
    animation-timing-function: cubic-bezier(0.25, 0.7, 0.3, 1);
    animation-timing-function: linear(0, 0.0291 2.86%, 0.1015 5.72%, 0.1986 8.58%, 0.3068 11.44%, 0.4166 14.29%, 0.5214 17.15%, 0.6172 20.01%, 0.7017 22.87%, 0.7742 25.73%, 0.8347 28.59%, 0.8839 31.45%, 0.9229 34.31%, 0.9531 37.17%, 0.9757 40.02%, 0.9921 42.88%, 1.0034 45.74%, 1.0107 48.6%, 1.015 51.46%, 1.017 54.32%, 1.0174 57.18%, 1.0168 60.04%, 1.0154 62.9%, 1.0137 65.75%, 1.0118 68.61%, 1.0099 71.47%, 1.008 74.33%, 1.0064 77.19%, 1.005 80.05%, 1 80.06%, 1);
  }
  100% { transform: translateY(0); }
}

/* ------------------------------------------------------ breakpoints */
/* phone (< 810): content 358 wide, title 38 px, subtitle wraps naturally (no forced break) */
@media (max-width: 809.98px) {
  .hero__content { max-width: 358px; }
  .hero__title { font-size: 38px; }
  .hero__br { display: none; }
}

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .hero__cta-wrap,
  .hero__scroll-wrap,
  .hero__arrow { animation: none; will-change: auto; }
  html.js .hero__title:not(.is-split),
  html.js .hero__sub:not(.is-split) { opacity: 1; animation: none; }
}