/* ════════════════════════════════════════════════════════════════════════
   AWAM · Coming Soon — holding page
   Brass & Ash palette + AWAM type system (canon, locked 2026-05-31/06-01).
   Self-contained: fonts self-hosted under /assets/fonts (ITF FFL + SIL OFL).
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────── Self-hosted fonts ───────────────── */
@font-face { font-family:'Zodiak'; src:url('./assets/fonts/zodiak-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Zodiak'; src:url('./assets/fonts/zodiak-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Zodiak'; src:url('./assets/fonts/zodiak-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('./assets/fonts/switzer-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('./assets/fonts/switzer-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('./assets/fonts/switzer-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face {
  font-family:'JetBrains Mono'; src:url('./assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'JetBrains Mono'; src:url('./assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face { font-family:'Tiro Devanagari Hindi'; src:url('./assets/fonts/tirodevanagarihindi-devanagari.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ───────────────── Tokens — Brass & Ash ───────────────── */
:root {
  --c-ground:#0a0908; --c-surface-1:#13110e; --c-surface-2:#1d1a15; --c-surface-3:#28241d; --c-line:#3a352c;
  --c-type:#f5f0e7; --c-type-2:#b9b2a6; --c-type-3:#7d776d;
  --c-accent:#d9a85c; --c-accent-hot:#ffd89a; --c-accent-glow:#f2c271; --c-accent-deep:#8a6526;
  --c-steel:#3d4e5c; --c-signal:#7fb39b;

  --ff-sans:'Switzer','Switzer Fallback',system-ui,-apple-system,sans-serif;
  --ff-display:'Zodiak','Zodiak Fallback',Georgia,'Times New Roman',serif;
  --ff-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --ff-deva:'Tiro Devanagari Hindi','Noto Serif Devanagari',Georgia,serif;

  --fs-100:11px; --fs-200:14px; --fs-300:16px; --fs-400:18px;
  --track-mono-tight:0.08em; --track-mono-label:0.18em; --track-mono-display:0.32em; --track-display:-0.01em;

  --ease-out-quart:cubic-bezier(0.165,0.84,0.44,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);

  --glow-rgb:242,194,113; /* copper-glow halo */
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(130% 105% at 50% 40%, #100b09 0%, #06050420 56%),
    var(--c-ground);
  color:var(--c-type);
  font-family:var(--ff-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ───────────────── Atmosphere layers ───────────────── */
.glow {
  position:absolute; z-index:0; left:50%; top:42%;
  width:min(78vw,1040px); height:min(50vh,560px);
  transform:translate(-50%,-50%); pointer-events:none; filter:blur(8px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(var(--glow-rgb),0.20) 0%, rgba(var(--glow-rgb),0.055) 42%, rgba(10,9,8,0) 72%);
  opacity:0; transition:opacity 800ms var(--ease-out-expo);
}
#wave { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; pointer-events:none; }
.grain {
  position:absolute; inset:-50%; z-index:2; width:200%; height:200%;
  /* screen (not overlay) so the grain actually reads on the near-black ground */
  pointer-events:none; opacity:0.14; mix-blend-mode:screen;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px; animation:grain 0.5s steps(1) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)}
}

/* ───────────────── Centre column ───────────────── */
.stage {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  /* top padding reserves the upper field for the wave; the rest flows as one centred column */
  padding:44vh 1.5rem clamp(1.25rem,3vh,1.75rem);
  pointer-events:none; text-align:center;
}
.eyebrow {
  margin:0 0 clamp(1rem,2.6vh,1.7rem); font-family:var(--ff-mono); font-size:var(--fs-100);
  letter-spacing:var(--track-mono-display); text-transform:uppercase; color:var(--c-accent);
}

.statement {
  margin:0; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.5rem,7vw,7rem); line-height:0.95; letter-spacing:var(--track-display);
  max-width:14ch; text-wrap:balance; color:var(--c-type);
  text-shadow:0 4px 70px rgba(5,4,3,0.95);
}
.statement em { font-style:italic; color:var(--c-accent-hot); }
.subline {
  margin:clamp(1.1rem,2.6vh,1.7rem) 0 0; font-family:var(--ff-sans); font-weight:500;
  font-size:clamp(0.85rem,1.5vw,1.05rem); letter-spacing:0.01em; color:var(--c-type-2);
}
.email {
  pointer-events:auto; display:inline-block; margin-top:clamp(1.6rem,4vh,2.6rem);
  font-family:var(--ff-mono); font-size:clamp(0.95rem,2vw,1.4rem); letter-spacing:0.04em;
  color:var(--c-accent-hot); text-decoration:none; padding-bottom:4px;
  border-bottom:1px solid rgba(255,216,154,0.5);
  transition:color 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart), transform 260ms var(--ease-out-quart);
}
.email:hover, .email:focus-visible { color:var(--c-type); border-color:var(--c-type); outline:none; }

/* ───────────────── Footer · socials + credit (in-flow, centred) ───────────────── */
.foot { margin-top:clamp(1.75rem,4.5vh,3rem); text-align:center; }
.socials { list-style:none; margin:0 0 1rem; padding:0; display:flex; justify-content:center; gap:clamp(0.9rem,2vw,1.6rem); }
.social {
  pointer-events:auto; display:inline-block; font-family:var(--ff-mono); font-size:var(--fs-100);
  letter-spacing:var(--track-mono-label); color:var(--c-type-2); text-decoration:none;
  transition:color 200ms var(--ease-out-quart), transform 260ms var(--ease-out-quart);
}
.social:hover, .social:focus-visible { color:var(--c-accent); outline:none; }
.credit-name { margin:0 0 0.4em; font-family:var(--ff-mono); font-size:11px; letter-spacing:var(--track-mono-label); color:var(--c-type-2); }
.credit-line { margin:0; font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--track-mono-tight); color:var(--c-type-3); line-height:1.7; }

/* ───────────────── Entrance choreography ───────────────── */
.eyebrow,.statement,.subline,.email { opacity:0; transform:translateY(16px); transition:opacity 680ms var(--ease-out-expo), transform 680ms var(--ease-out-expo); }
.foot { opacity:0; transition:opacity 680ms var(--ease-out-expo); }
.ready .glow { opacity:1; }
.ready #wave { animation:fade-canvas 1100ms var(--ease-out-expo) both; }
@keyframes fade-canvas { from{opacity:0} to{opacity:1} }
.ready .eyebrow { opacity:1; transform:none; transition-delay:200ms; }
.ready .statement { opacity:1; transform:none; transition-delay:340ms; }
.ready .subline { opacity:1; transform:none; transition-delay:440ms; }
.ready .email { opacity:1; transform:none; transition-delay:520ms; }
.ready .foot { opacity:1; transition-delay:600ms; }

/* ───────────────── Reduced motion ───────────────── */
@media (prefers-reduced-motion:reduce) {
  .grain,.ready #wave { animation:none; }
  .eyebrow,.statement,.subline,.email,.foot { opacity:1; transform:none; transition:none; }
  .glow { opacity:1; transition:none; }
}

/* ───────────────── Mobile ─────────────────
 * Switch from the desktop fixed-HUD composition to a clean scrollable
 * top→bottom column: fixed wave up top, then the statement, then the footer
 * — no more competing absolute blocks colliding at the bottom edge. */
@media (max-width:720px) {
  html, body { position:static; height:auto; min-height:100%; }
  body { overflow-x:hidden; overflow-y:auto; }
  .glow, #wave, .grain { position:fixed; }     /* atmosphere stays put behind */

  .stage {
    position:relative; inset:auto; min-height:auto;
    justify-content:flex-start;
    padding:40svh 1.5rem clamp(1.75rem,6vh,2.75rem);  /* reserve the top for the wave */
  }
  .eyebrow { margin:0 0 clamp(0.8rem,2.5vh,1.2rem); }
  .foot { margin-top:clamp(2rem,7vh,3rem); }
}

/* very small / older browsers without svh — fall back to vh */
@supports not (height: 40svh) {
  @media (max-width:720px) { .stage { padding-top:40vh; } }
}