/* ========================================= */
/* HERO SECTION */
/* ========================================= */
.hero{position:relative;min-height:clamp(38rem, 76vh, 48rem);overflow:hidden;background:var(--forest-deep);color:var(--white)}

/* --- Background media + cinematic depth layers --- */
.hero__media,.hero__shade,.hero__vignette,.hero__grain{position:absolute;inset:0}
.hero__media{overflow:hidden}
.hero__image{width:100%;height:100%;object-fit:cover;object-position:center 55%;transform:scale(1.08);animation:heroZoom 22s var(--ease) forwards}
.hero__shade{background:linear-gradient(90deg,rgba(3,18,11,.85) 0%,rgba(3,18,11,.32) 52%,rgba(3,18,11,.1) 100%),linear-gradient(0deg,rgba(3,18,11,.6),transparent 48%)}
/* Soft cinematic vignette frames the frame edges */
.hero__vignette{background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(3,18,11,.5) 100%);mix-blend-mode:multiply}
/* Fine film grain for a tactile, premium texture */
.hero__grain{opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- Layout --- */
.hero__inner{position:relative;z-index:2;display:flex;min-height:clamp(38rem, 76vh, 48rem);align-items:flex-end;justify-content:space-between;gap:3rem;padding-bottom:clamp(2rem,4.5vw,3.5rem)}
.hero__copy{max-width:52rem}

/* --- Kicker with animated hairline accent --- */
.hero__copy .kicker{display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1rem;color:rgba(255,255,255,.7)}
.kicker__line{display:inline-block;width:2.4rem;height:1px;background:var(--gold);transform-origin:left;animation:kickerLine 1s var(--ease) .15s both}

/* --- Headline with line-by-line reveal --- */
.hero h1{color:var(--white);font-size:clamp(3.2rem, 5.2vw, 5.2rem);line-height:0.9;letter-spacing:-.045em}
.hero h1 .hero__line{display:block;overflow:hidden}
.hero h1 .hero__line>*,.hero h1 .hero__line{will-change:transform}
.hero__copy.reveal h1 .hero__line{transform:translateY(115%);transition:transform .9s var(--ease)}
.hero__copy.reveal h1 .hero__line:nth-child(2){transition-delay:.12s}
.hero__copy.reveal.is-visible h1 .hero__line{transform:none}
.hero h1 em{position:relative;font-family:var(--serif);font-weight:400}
/* Gold underline draws in under the serif line */
.hero h1 em::after{content:"";position:absolute;left:0;right:.06em;bottom:.06em;height:2px;background:linear-gradient(90deg,var(--gold),rgba(184,147,79,.2));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .8s}
.hero__copy.is-visible h1 em::after{transform:scaleX(1)}

.hero__lede{max-width:31rem;margin-top:1.25rem;color:rgba(255,255,255,.74);font-size:1rem}
.hero__actions{display:flex;align-items:center;gap:2rem;margin-top:1.5rem}
.hero__actions .button{position:relative;overflow:hidden}
/* Subtle sheen sweeps across the primary button on hover */
.hero__actions .button::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.hero__actions .button:hover::after{transform:translateX(120%)}
.hero__actions .text-link{color:var(--white)}
.hero__actions .text-link span{display:inline-block;transition:transform .3s var(--ease)}
.hero__actions .text-link:hover span{transform:translate(2px,2px)}

/* --- Order card --- */
.hero__order{position:relative;width:22rem;flex:0 0 22rem;padding:1.4rem;border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.3);background:rgba(5,25,15,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.hero__order:hover{transform:translateY(-4px);background:rgba(5,25,15,.42);box-shadow:0 1.5rem 3rem rgba(3,18,11,.5)}
.hero__order>div:first-child{display:flex;justify-content:space-between;color:rgba(255,255,255,.6);font-family:var(--mono);font-size:.58rem;text-transform:uppercase}
.hero__order .rating{color:var(--gold);letter-spacing:.07em}
.hero__order .rating b{color:var(--white);font-weight:400}
.hero__order h2{margin:1.6rem 0 1.4rem;color:var(--white);font-family:var(--sans);font-size:1.4rem;line-height:1.05}
.hero__order-bottom{display:flex;align-items:center;justify-content:space-between}
.hero__order-bottom>a{position:relative;display:grid;width:3rem;height:3rem;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;overflow:hidden;transition:color .35s var(--ease),border-color .35s var(--ease)}
.hero__order-bottom>a::before{content:"";position:absolute;inset:0;background:var(--gold);border-radius:50%;transform:scale(0);transition:transform .4s var(--ease);z-index:-1}
.hero__order-bottom>a:hover{color:var(--forest-deep);border-color:var(--gold)}
.hero__order-bottom>a:hover::before{transform:scale(1)}

/* --- Coordinate index --- */
.hero__index{position:absolute;z-index:2;top:2rem;right:var(--gutter);color:rgba(255,255,255,.55);font-family:var(--mono);font-size:.55rem;line-height:1.5;text-align:right}

/* --- Scroll cue --- */
.hero__scroll{position:absolute;left:50%;bottom:1.4rem;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(255,255,255,.6);font-family:var(--mono);font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;transform:translateX(-50%);transition:color .3s var(--ease)}
.hero__scroll:hover{color:var(--white)}
.hero__scroll i{position:relative;display:block;width:1px;height:2.6rem;background:rgba(255,255,255,.25);overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:45%;background:var(--gold);animation:scrollTrail 1.9s var(--ease) infinite}

/* --- Keyframes --- */
@keyframes heroZoom{to{transform:scale(1)}}
@keyframes kickerLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes scrollTrail{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

@media(max-width:64rem){.hero__scroll{display:none}}

@media(prefers-reduced-motion:reduce){
  .hero__image{animation:none;transform:scale(1.02)}
  .kicker__line{animation:none;transform:none}
  .hero__copy.reveal h1 .hero__line{transform:none;transition:none}
  .hero h1 em::after{transition:none;transform:scaleX(1)}
  .hero__scroll i::after{animation:none}
  .hero__actions .button::after{display:none}
}
/* END HERO SECTION */