/* =====================================================================
   MMD Landing Template — shared base
   Reset + design-token contract + utility/animation classes.
   Per-property THEME tokens live in each page's :root (see README).
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg,#0a0a0b);color:var(--ink,#f4f1ea);
  font-family:var(--font-body,'Inter',system-ui,sans-serif);
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:inherit;line-height:1.02}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--gold,#c9a227);color:#0a0a0b}

/* ---- tokens shared across variations (defaults; pages override) ---- */
:root{
  --bg:#0a0a0b; --bg-2:#111114; --surface:#17171c; --line:rgba(255,255,255,.12);
  --ink:#f4f1ea; --muted:#a7a29a;
  --gold:#c9a227; --gold-lite:#e7cf8f; --gold-deep:#8a6d1f;
  --maxw:1280px; --gutter:clamp(20px,5vw,90px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(70px,12vh,160px)}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.32em;
  font-size:12px;color:var(--gold);font-weight:600}
.muted{color:var(--muted)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:1em 1.7em;border-radius:100px;
  font-weight:600;letter-spacing:.02em;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;will-change:transform}
.btn--gold{background:linear-gradient(120deg,var(--gold-lite),var(--gold));color:#161007}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
/* press feedback — instant, on pointer-down */
.btn:active{transform:scale(.97);transition-duration:.1s}
/* hover states only where a real pointer exists (no sticky hover on touch) */
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{transform:translateY(-2px)}
  .btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
  .btn:hover .btn__arrow{transform:translateX(4px)}
}
.btn__arrow{transition:transform .3s var(--ease)}

/* ---- reveal / motion utilities (GSAP enhances; these are the base state) ---- */
[data-reveal]{opacity:0;transform:translateY(28px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js-off [data-reveal]{opacity:1;transform:none} /* no-JS fallback */
[data-parallax]{will-change:transform}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block}

/* thin animated hairline */
.rule{height:1px;background:var(--line);transform-origin:left;position:relative;overflow:hidden}
.rule::after{content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:sweep 4.5s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* scroll cue */
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  writing-mode:vertical-rl;letter-spacing:.3em;text-transform:uppercase;font-size:11px;color:var(--muted)}
.scrollcue::after{content:"";display:block;width:1px;height:46px;margin:10px auto 0;
  background:linear-gradient(var(--gold),transparent);animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* grain + vignette helpers */
.grain::before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(0,0,0,.6))}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}