@charset "utf-8";
/* Naireen · hero.css — #hero */

/* ---------- hero ---------- */
#hero{align-items:flex-end; padding-top:calc(var(--nav) + 35vh); padding-bottom:clamp(48px,7vh,84px)}
#hero h1{max-width:16ch}
#hero .gold{color:var(--gold)}
.hero-sub{margin-top:24px}
.hero-foot{display:flex; align-items:center; gap:14px; margin-top:32px; color:var(--stone); font-family:var(--f-ui); font-size:11px; letter-spacing:.15em; text-transform:uppercase}
.hero-foot .ln{height:1px; flex:1; max-width:120px; background:linear-gradient(to left, rgba(214,174,91,.55), transparent)}
.w{display:inline-block; opacity:1}
.js .w{opacity:0; transform:translateY(16px) }
.js .lit .w{animation:wordin .82s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wordin{to{opacity:1; transform:none}}

/* ---------- scroll hint ---------- */
#hero{position:relative}
.scroll-hint{position:absolute; bottom:clamp(14px,2.4vh,26px); inset-inline-start:50%; width:1px; height:44px;
  overflow:hidden; opacity:.8; transition:opacity .45s ease; pointer-events:none}
.scroll-hint::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent, var(--gold))}
.js .scroll-hint::before{animation:shrun 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes shrun{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
.scrolled .scroll-hint{opacity:0}
@media (prefers-reduced-motion:reduce){ .scroll-hint{display:none} }