/* TINE — desktop. Hero (Clash Display) + Section 2 "Anatomy of Iconic" (museum glass case).
   Display: Clash Display (hero) / Cinzel (anatomy) · Body: Hanken Grotesk · Labels: IBM Plex Mono */
:root{
  --bone:#f3ecdd;
  --muted:#aeb6a7;
  --faint:#7c8a79;
  --gold:#e4c780;
  --gold-deep:#caa657;
  --line:rgba(228,199,128,.42);
  --hairline:rgba(243,236,221,.14);
  --clash:"Clash Display","Hanken Grotesk",sans-serif;
  --cinzel:"Cinzel",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#04100b;color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ---------- BACKGROUNDS ---------- */
.bg,.bg2{position:fixed;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.bg{background-image:url("assets/img/museum.jpg");background-color:#04100b}
.bg2{background-image:url("assets/img/case.jpg");opacity:0}
.bg__vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(65% 60% at 50% 40%, transparent 48%, rgba(2,8,5,.5) 100%),
    linear-gradient(180deg, rgba(2,8,5,.35) 0%, transparent 26%, transparent 52%, rgba(2,8,5,.8) 100%)}

/* ---------- 3D SPOON LAYER ---------- */
.spoon-layer{position:fixed;inset:0;z-index:5;pointer-events:none}
.spoon{position:absolute;top:44%;left:50%;width:135vh;height:135vh;margin:-67.5vh 0 0 -67.5vh;will-change:transform}
.spoon__mv{width:100%;height:100%;background:transparent;--poster-color:transparent;pointer-events:none;
  filter:saturate(1.5) brightness(.85) sepia(.46) contrast(1.2)}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;text-align:center;padding:0 2rem 7vh;pointer-events:none}
.hero *{pointer-events:auto}
.hero__copy{max-width:60rem}
.hero__title{font-family:var(--clash);font-weight:700;font-size:clamp(2.4rem,5.2vw,5.4rem);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.hero__sub{margin-top:1.6rem;max-width:34rem;margin-inline:auto;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.55}
.scroll-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- SECTION 2 — ANATOMY ---------- */
.sec2{position:relative;z-index:10}
.sec2__pin{position:relative;height:100vh;width:100%}
.sec2__pin>*{position:absolute}

/* left block */
.an-left{left:clamp(2rem,4.5vw,5rem);top:50%;transform:translateY(-50%);max-width:30rem}
.an-kicker{font-family:var(--clash);font-size:1.5rem;letter-spacing:.12em;color:var(--bone);opacity:.85}
.an-title{font-family:var(--clash);font-weight:700;font-size:clamp(2.6rem,4.6vw,4.6rem);line-height:1.0;letter-spacing:.01em;text-transform:uppercase;margin-top:.2rem}
.an-rule{display:block;width:120px;height:1px;background:var(--gold-deep);margin:2rem 0}
.an-tag{color:var(--muted);font-size:1.05rem;line-height:1.5}
.an-explore{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.an-explore span{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--gold-deep);border-radius:50%;font-size:.9rem}
.an-plaque{margin-top:2.4rem;display:inline-flex;flex-direction:column;gap:.35rem;padding:.9rem 1.4rem;border:1px solid var(--hairline);background:rgba(6,17,12,.4);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--faint);text-align:center}
.an-plaque b{color:var(--gold);letter-spacing:.24em}

/* measurement line near the case */
.an-measure{left:38%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;height:54vh;justify-content:center}
.an-measure i{flex:1;width:1px;background:linear-gradient(var(--line),transparent)}
.an-measure i:last-child{background:linear-gradient(transparent,var(--line))}
.an-measure span{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;color:var(--faint);writing-mode:vertical-rl;transform:rotate(180deg)}

/* right callouts */
.an-right{right:clamp(2rem,4vw,5rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(1.4rem,4vh,3rem);width:30rem}
.callout{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:1rem;position:relative}
.callout__line{position:absolute;right:100%;margin-right:1rem;top:50%;width:14vw;height:1px;background:linear-gradient(270deg,var(--line),transparent);transform:scaleX(0);transform-origin:right}
.callout__icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--gold-deep);border-radius:50%;color:var(--gold);font-size:1.1rem}
.callout__t{font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.callout__d{margin-top:.4rem;color:var(--muted);font-size:.86rem;line-height:1.45}
.callout__num{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--faint);align-self:flex-start}

/* archival record */
.an-record{right:clamp(2rem,4vw,5rem);bottom:8vh;width:24rem;border:1px solid var(--hairline);background:rgba(6,17,12,.45);padding:1.1rem 1.3rem}
.an-record__h{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-bottom:.7rem;margin-bottom:.5rem;border-bottom:1px solid var(--hairline)}
.an-record__row{display:flex;justify-content:space-between;padding:.4rem 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--muted)}
.an-record__row b{color:var(--bone)}

/* far-right plaque + footer */
.an-forever{right:clamp(.5rem,1.4vw,1.6rem);top:50%;transform:translateY(-50%);font-family:var(--clash);font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);text-align:right;line-height:1.7;writing-mode:vertical-rl}
.an-footer{left:50%;bottom:3vh;transform:translateX(-50%);font-family:var(--clash);font-size:.95rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:1rem;white-space:nowrap}
.an-footer i{color:var(--gold-deep);font-style:normal}

/* ---------- SECTION 3 — IN ITS ELEMENT (looping bg video) ---------- */
.sec3{position:relative;z-index:10;height:220vh;width:100%;background:#000}
.sec3__sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
.sec3 .sear{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sec3 .sear__scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 75% at 50% 50%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.66) 100%),
  linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 28%, transparent 64%, rgba(0,0,0,.5) 100%)}
.sear__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 2rem}
.sear__kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.sear__line{font-family:var(--clash);font-weight:700;font-size:clamp(2.6rem,6vw,6rem);line-height:1;letter-spacing:-.02em;
  text-shadow:0 6px 50px rgba(0,0,0,.8);transition:opacity .3s ease,transform .3s ease}

/* ---------- SECTION 4 — NOMINATE THE NEXT ICON ---------- */
.sec4{position:relative;z-index:11;margin-top:-100vh;min-height:100vh;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8vh 2rem;
  background:#04100b url("assets/img/museum.jpg") center/cover no-repeat}
.sec4__scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 42%, transparent 42%, rgba(2,8,5,.55) 100%),
  linear-gradient(180deg, rgba(2,8,5,.45) 0%, transparent 26%, transparent 52%, rgba(2,8,5,.82) 100%)}
.sec4__copy{position:relative;z-index:2;max-width:60rem;display:flex;flex-direction:column;align-items:center}
.sec4__title{font-family:var(--clash);font-weight:700;font-size:clamp(2.2rem,5vw,4.6rem);line-height:1;letter-spacing:-.02em;text-shadow:0 4px 40px rgba(0,0,0,.7)}
.qmark{margin:1.4rem 0 .6rem;display:grid;place-items:center}
.qmark span{font-family:var(--clash);font-weight:700;font-size:clamp(4.5rem,13vh,9rem);line-height:1;
  color:var(--gold);text-shadow:0 0 50px rgba(228,199,128,.6),0 0 120px rgba(228,199,128,.35);
  animation:qpulse 3.4s ease-in-out infinite}
@keyframes qpulse{0%,100%{opacity:.85;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-6px) scale(1.05)}}
.reel{margin-top:.3rem;font-family:var(--mono);font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:.04em;color:var(--muted)}
.reel__word{color:var(--gold);font-weight:500}
.sec4__cta{margin-top:1.7rem;color:var(--bone);font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}