/* Marfani Frame Maker — base (v2). */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--bg); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: var(--z-cursor);
  transform: translateY(calc(-100% - 2rem));
  background: var(--wa); color: var(--wa-ink); padding: .75rem 1.25rem;
  font-weight: 700; font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none; border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------- atmosphere
   Grain and a slow-drifting warm glow give the dark ground depth without any
   image. Both are purely decorative and cheap. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.glow {
  position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px);
  opacity: 0.55; will-change: transform;
}
.glow--gold { background: radial-gradient(circle, rgba(217,174,60,0.55), rgba(217,174,60,0) 65%); }
.glow--blue { background: radial-gradient(circle, rgba(60,90,200,0.5), rgba(60,90,200,0) 65%); }

/* ----------------------------------------------------------------- cursor
   Desktop only. A small dot and a ring that grows over anything pressable. */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; display: none; }
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--gold); }
.cursor__ring {
  width: 34px; height: 34px; border: 1px solid rgba(217, 174, 60, 0.7);
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out), border-color var(--dur), background var(--dur);
}
.has-cursor .cursor { display: block; }
.has-cursor.cursor-hover .cursor__ring { width: 58px; height: 58px; background: rgba(217,174,60,0.08); border-color: var(--gold); }
.has-cursor.cursor-down .cursor__ring { width: 22px; height: 22px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }
.has-cursor { cursor: none; }
.has-cursor a, .has-cursor button { cursor: none; }

/* ------------------------------------------------------------- typography */
.display {
  font-family: var(--font-sans); font-weight: 800; font-stretch: 120%;
  line-height: 0.98; letter-spacing: var(--track-tight); text-transform: uppercase;
}
.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.label {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-mute);
}
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; }
.eyebrow::before { content: ''; width: 2.4rem; height: 1px; background: var(--gold); }
.gold-text {
  background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
}
.mono { font-family: var(--font-mono); letter-spacing: -0.01em; }
.measure { max-width: var(--measure); }

/* ------------------------------------------------------------------ layout */
.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--max-narrow)); }
.section { padding-block: var(--section-y); position: relative; }
.section-head { display: grid; gap: var(--s-3); margin-block-end: 2.5rem; max-width: 60rem; }
.section-head__title { font-size: var(--t-xl); }
.section-head__lede { color: var(--text-dim); font-size: var(--t-md); line-height: 1.55; max-width: var(--measure); }
.rule-gold { height: 1px; background: linear-gradient(90deg, var(--gold), rgba(217,174,60,0)); }

/* ------------------------------------------------------------------ reveal
   Scroll reveals are driven by GSAP when it loads and by IntersectionObserver
   when it does not; without any JavaScript at all nothing is hidden. */
.has-js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); }
.has-js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-mitre); }
.has-js [data-reveal-stagger] > * { opacity: 0; transform: translate3d(0, 24px, 0); }
.has-js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-mitre); transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal], .has-js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------- intro
   One second: the frame assembles, then the page is revealed beneath it. Never
   blocks — a timer clears it even if the animation library never arrives. */
.intro {
  position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center;
  background: var(--bg); pointer-events: none;
}
.intro__mark { width: clamp(84px, 14vw, 150px); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.intro__word { margin-top: 1.4rem; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .32em; text-transform: uppercase; color: var(--text-mute); }
.intro.is-done { display: none; }
html:not(.has-js) .intro { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

@media print {
  .intro, .cursor, .grain, .wa-float, .nav-toggle { display: none !important; }
  .has-js [data-reveal], .has-js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
}