/* assets/css/hero.css */
/* ============================================================
   SECTION 01 — "One Day at Bobo & Wild" cinematic hero
   450vh of scroll, one pinned 100svh stage, four scenes.
   ============================================================ */

.hero{position:relative;width:100%;height:450vh}
.hero__stage{
  position:relative;top:0;left:0;
  width:100%;height:100vh;height:100svh;
  overflow:hidden;
  background:var(--ink);
}

/* ---------- scene layers ---------- */
/* z-index here creates the stacking context the scene layers live in,
   so their z-indexes can never climb above the hero UI */
.scenes{position:absolute;inset:0;z-index:1;overflow:hidden}
.scene{
  position:absolute;inset:0;margin:0;
  will-change:transform,opacity,filter;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.scene__media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--focal,50% 50%);
}
.scene__video{opacity:0;transition:opacity .8s var(--ease)}
.scene__video.is-live{opacity:1}

/* directional scrim: keeps the copy legible, leaves the food alone */
.scene__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(102deg,
      rgba(16,26,23,.74) 0%,
      rgba(16,26,23,.46) 26%,
      rgba(16,26,23,.12) 48%,
      rgba(16,26,23,0) 66%),
    linear-gradient(to top,
      rgba(16,26,23,.60) 0%,
      rgba(16,26,23,.18) 18%,
      rgba(16,26,23,0) 40%);
}

/* day -> night atmosphere */
.stage__dusk{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(120% 100% at 72% 38%, rgba(51,75,70,0) 12%, rgba(16,26,23,.62) 78%, rgba(9,15,13,.86) 100%),
    linear-gradient(180deg, rgba(51,75,70,.30), rgba(9,15,13,.34));
}

.stage__grain{
  position:absolute;inset:-40%;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- headlines ---------- */
.heads{
  position:absolute;z-index:6;
  left:var(--pad);top:50%;
  transform:translateY(-56%);
  width:min(52vw,700px);
  pointer-events:none;
}
.head{position:absolute;left:0;top:0;width:100%;opacity:0;visibility:hidden}
.head__eyebrow{
  display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(14px,1.7vw,24px);
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--terracotta-lift);
}
.head__eyebrow i{width:clamp(22px,3.4vw,48px);height:1px;background:var(--terracotta);display:block}
.head__title{margin:0;font-family:var(--f-display);font-weight:400}
.head__line{
  display:block;overflow:hidden;
  font-size:clamp(46px,8.4vw,146px);
  line-height:.92;
  letter-spacing:-.018em;
  padding-bottom:.04em;
}
.head__word{display:inline-block;will-change:transform}

/* ---------- scene index ---------- */
.index{
  position:absolute;z-index:6;
  left:var(--pad);bottom:clamp(34px,5vh,54px);
  display:flex;flex-direction:column;gap:2px;
}
.index__item{
  display:flex;align-items:center;gap:14px;
  /* 44px is the WCAG 2.5.8 target minimum. The label itself is 9px
     tall, so the height comes from padding, not from the text. */
  min-height:44px;
  padding:10px 4px;text-align:left;
  color:var(--cream-45);
  transition:color .5s var(--ease);
}
.index__item.is-on{color:var(--cream)}
.index__rule{
  display:block;width:26px;height:1px;background:var(--cream-28);
  position:relative;overflow:hidden;flex:none;
}
.index__rule::after{
  content:'';position:absolute;inset:0;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.index__item.is-on .index__rule::after{transform:scaleX(1)}
.index__num{font-size:10px;letter-spacing:.16em;opacity:.72}
.index__label{font-size:11px;letter-spacing:.22em;text-transform:uppercase}

/* ---------- scroll hint + progress ---------- */
.hint{
  position:absolute;z-index:6;
  right:var(--pad);bottom:clamp(34px,5vh,54px);
  display:flex;align-items:center;gap:14px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-70);
}
.hint__rail{width:1px;height:40px;background:var(--cream-28);position:relative;overflow:hidden}
.hint__rail::after{
  content:'';position:absolute;left:0;right:0;top:-55%;height:55%;
  background:var(--cream);animation:hintRun 2.2s var(--ease) infinite;
}
@keyframes hintRun{0%{top:-58%}62%,100%{top:106%}}

.progress{
  position:absolute;z-index:7;left:0;right:0;bottom:0;
  height:2px;background:rgba(243,240,236,.14);
}
.progress__bar{
  display:block;height:100%;width:100%;
  background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;
}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .heads{width:min(66vw,560px);transform:translateY(-58%)}
  .head__line{font-size:clamp(42px,8.8vw,88px)}
  .index__label{font-size:10px;letter-spacing:.18em}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .scene__media{object-position:var(--focal-m,var(--focal,50% 50%))}
  /* portrait crops are tight and the food is bright, so the copy needs a
     deeper foot to sit on than it does on desktop */
  .scene__scrim{
    background:
      linear-gradient(180deg,
        rgba(16,26,23,.56) 0%,
        rgba(16,26,23,.14) 22%,
        rgba(16,26,23,0) 40%),
      linear-gradient(to top,
        rgba(13,21,19,.94) 0%,
        rgba(14,23,20,.80) 16%,
        rgba(16,26,23,.48) 32%,
        rgba(16,26,23,.14) 46%,
        rgba(16,26,23,0) 62%);
  }
  .heads{
    left:var(--pad);right:var(--pad);width:auto;
    top:auto;bottom:calc(clamp(22px,3.4vh,34px) + 54px);
    transform:none;
  }
  .head{top:auto;bottom:0}
  .head__line{font-size:clamp(34px,11.6vw,58px);letter-spacing:-.012em}
  .head__eyebrow{margin-bottom:12px;font-size:9px;letter-spacing:.24em}
  .index{
    left:var(--pad);right:var(--pad);
    bottom:clamp(22px,3.4vh,34px);
    flex-direction:row;gap:10px;align-items:center;
  }
  .index__item{gap:0;padding:4px 0;flex:1}
  .index__label,.index__num{display:none}
  .index__rule{width:100%}
  .hint{display:none}
}

@media (max-width:400px){
  .head__line{font-size:clamp(32px,11.6vw,48px)}
}

/* short landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .head__line{font-size:clamp(28px,6.4vw,48px)}
  .index{bottom:18px}
  .hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .stage__grain,.hint__rail::after{animation:none}
  .scene__video{transition:none}
}