/* =====================================================================
   Round 3: glass nav, exact Figma heights, microinteractions
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --glass-bg:rgba(255,253,250,.62);
  --glass-border:rgba(237,232,223,.9);
  --nav-btn-bg:#28201C; --nav-btn-border:#3D342F;
  --btn-inset:inset 0 -1px 2px rgba(0,0,0,.1),inset 0 1px 2px rgba(255,255,255,.4);
  --btn-drop:0 2px 2px rgba(0,0,0,.06),0 6px 12px -4px rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:112px}

/* ---------- Nav: fixed, filled once scrolled (Figma 143:1456 Scrolled) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:12px 48px;display:block;background:none;box-shadow:none}
.nav.is-scrolled{background:none;box-shadow:none}
.nav__inner{width:100%;justify-content:center;border:1px solid transparent;border-radius:var(--radius-md);
  background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background .35s var(--ease-out),border-color .35s,box-shadow .35s,backdrop-filter .35s,padding .35s var(--ease-out)}
.nav.is-scrolled .nav__inner{background:var(--surface-default);border-color:var(--border-subtle);padding-block:var(--space-16)}
.nav__logo img{height:32px;width:auto;transition:transform .3s var(--ease-out)}
.nav__logo:hover img{transform:scale(1.04)}
.nav__link{position:relative;transition:background .25s,color .25s}
.nav__link:hover{background:var(--accent-hover)}
.nav__link[aria-current="page"]{background:var(--accent-default)}
.nav__link[aria-current="page"]:hover{background:var(--accent-hover)}

/* ---------- Buttons ---------- */
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s,border-color .2s,color .2s}

/* ---------- Exact Figma heights ---------- */
.follow-banner{min-height:240px;padding:32px 0}
.section-header{min-height:44px}
.originals-wrap{padding:40px 80px}
.originals{padding:80px 0;border-radius:var(--radius-lg)}
.originals__inner{width:min(1192px,100% - 48px)}
.worth__label{padding:24px 0 16px}

/* ---------- Event cards ---------- */

/* ---------- Follow pill ---------- */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- Newsletter ---------- */
.field{transition:box-shadow .25s,border-color .25s}
.field:focus-within{box-shadow:none}
.field.is-invalid{animation:shake .4s;border-color:var(--feedback-error)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.issue-card{transition:transform .35s var(--ease-out),box-shadow .35s}
.issue-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-large-hover)}

/* ---------- Footer ---------- */

/* ---------- Modal ---------- */
.modal{display:flex;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.is-open{visibility:visible;opacity:1;transition:opacity .25s}
.modal__panel{transform:translateY(16px) scale(.96);transition:transform .45s var(--ease-out)}
.modal.is-open .modal__panel{transform:none}
.modal__check{width:56px;height:56px;border-radius:50%;background:var(--accent-default);display:grid;place-items:center}
.modal__check svg{stroke:var(--neutral-900);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.modal.is-open .modal__check svg{animation:draw .5s .2s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Scroll reveal (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.is-in{opacity:1;transform:none}
.nav__link,.btn{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Nav: hug content, spacing per Figma 143:1456 ---------- */
.nav{padding:12px 48px;display:flex;justify-content:center;pointer-events:none}
.nav__inner{pointer-events:auto;width:fit-content;max-width:100%;padding:24px 28px;gap:24px;justify-content:center}
.nav.is-scrolled .nav__inner{padding-block:24px}
.nav__links{gap:32px}
@media (max-width:960px){.nav{padding-inline:16px}.nav__inner{padding-inline:16px;gap:12px}.nav__links{gap:12px}}

/* Figma strokes are inside the frame: use an inset ring so the bar is exactly 94px tall and hugs content.
   Resting state stays transparent. Border and fill fade in only after scroll. */
.nav__inner{box-sizing:border-box;border:0;height:94px;padding:0 28px;background:transparent;box-shadow:none;
  transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.nav.is-scrolled .nav__inner{padding-block:0;border:0;background:var(--surface-default);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.nav__toggle,.nav__menu{display:none}
@media (max-width:960px){
  .nav{flex-direction:column;align-items:stretch}
  .nav__inner{width:100%;max-width:none;justify-content:space-between;padding-inline:16px}
  .nav__bar,.nav__desktop-only{display:none}
  .nav__logo{flex:none}
  .nav__actions{flex:none}
  .nav__toggle{display:inline-flex}
  .nav.is-menu-open,
  .nav.is-menu-open .nav__inner,
  .nav.is-menu-open .nav__menu{background:#fff}
  .nav.is-menu-open .nav__inner{box-shadow:inset 0 0 0 1px var(--border-subtle)}
  .nav.is-menu-open .nav__menu{display:flex;flex-direction:column;gap:var(--space-8);pointer-events:auto;margin-top:var(--space-8);padding:var(--space-16);background:#fff;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--border-subtle)}
  .nav__menu .nav__links{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .nav__menu .btn{justify-content:flex-start}
}
.footer__explore a{position:relative;transition:padding-left .35s var(--ease-out)}
.footer__explore a::before{content:"→";position:absolute;left:0;opacity:0;transform:translateX(-12px);transition:opacity .25s,transform .35s var(--ease-out)}
.footer__explore a:hover{padding-left:44px}
.footer__explore a:hover::before{opacity:1;transform:none}
.footer__col a{transition:padding-left .25s var(--ease-out),font-weight .2s}
.footer__col a:hover{padding-left:6px;font-weight:600}