/* ARGENT — the small custom layer Tailwind can't express (masks, cursor, filters, lenis, fallbacks) */
:root { --ink: #1b1724; --silk: cubic-bezier(.22, 1, .36, 1); }
html { background: #e5dbfb; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
@media (min-width: 1600px) { html { font-size: calc(16px + (100vw - 1600px) * 0.0055); } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: #1b1724; color: #f7f3ee; }
[data-theme='dark'] ::selection { background: #f7f3ee; color: #141318; }

/* loading state: hide the page until the sculpture is cast */
html.is-loading { overflow: hidden; }
.js .rv { opacity: 0; }
html.force-show .rv, html.force-show .wm-ch, html.force-show [data-intro] { opacity: 1 !important; transform: none !important; }

/* palette layers (crossfaded by JS, compositor-only) */
#bg { contain: strict; }
.bg-layer { position: absolute; inset: -14%; visibility: hidden; animation-play-state: paused; }
#grain {
  position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .14 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* split-text masks */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .06em .16em; margin: -.08em -.06em -.16em; }
.swi { display: inline-block; will-change: transform; }
.wm-mask { display: inline-block; overflow: hidden; padding: .04em .02em .12em; margin: -.04em -.02em -.12em; vertical-align: top; }
.wm-ch { display: inline-block; will-change: transform; }

/* wordmark: pearl enamel with a hairline edge (per letter once split, so masks + transforms stay crisp) */
.wordmark {
  background: linear-gradient(180deg, #ffffff 8%, #fbf7ff 38%, #e6dcfa 72%, #cbb9f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.1px rgba(27, 23, 36, .5);
  filter: drop-shadow(0 22px 40px rgba(90, 60, 160, .18));
}
.wordmark.wm-split { background: none; }
.wordmark .wm-ch {
  background: linear-gradient(180deg, #ffffff 6%, #fbf7ff 36%, #e6dcfa 70%, #cbb9f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.1px rgba(27, 23, 36, .5);
}
.outline-type { color: transparent; -webkit-text-stroke: 1.2px rgba(27, 23, 36, .55); }
[data-theme='dark'] .outline-type { -webkit-text-stroke-color: rgba(247, 243, 238, .5); }

/* custom cursor */
#cursor { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
#cursor.on { opacity: 1; }
#cursor .c-dot, #cursor .c-ring { position: absolute; left: 0; top: 0; border-radius: 999px; translate: -50% -50%; }
#cursor .c-dot { width: 6px; height: 6px; background: #fff; }
#cursor .c-ring { width: 38px; height: 38px; border: 1px solid #fff; transition: width .45s var(--silk), height .45s var(--silk), background-color .3s, border-color .3s; display: grid; place-items: center; }
#cursor .c-label { font: 500 9.5px/1 'DM Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .25s; white-space: nowrap; }
#cursor[data-cs='link'] .c-ring { width: 64px; height: 64px; background: rgba(255, 255, 255, .16); }
#cursor[data-cs='label'] .c-ring { width: 92px; height: 92px; background: #fff; border-color: #fff; }
#cursor[data-cs='label'] .c-label { opacity: 1; }
#cursor[data-cs='label'] .c-dot { opacity: 0; }
#cursor[data-cs='text'] .c-ring { width: 8px; height: 60px; border-radius: 4px; }
#cursor[data-cs='press'] .c-ring { width: 26px; height: 26px; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [role='button'], html.has-cursor summary { cursor: none; }

/* focus */
:focus-visible { outline: 2px solid #4a3d72; outline-offset: 4px; border-radius: 6px; }
[data-theme='dark'] :focus-visible, .on-dark :focus-visible { outline-color: #f7f3ee; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 400; transition: top .25s var(--silk); }
.skip:focus { top: 16px; }

/* liquid hover for display type + cards (SVG feTurbulence/feDisplacementMap) */
[data-liq] { will-change: filter; }

/* marquee */
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-item { display: inline-flex; align-items: center; gap: 3vw; padding-right: 3vw; white-space: nowrap; }

/* tilt cards */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .glare { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 55%); opacity: 0; transition: opacity .35s; }
.tilt:hover .glare { opacity: 1; }

/* pyramid liquid fill */
.tier { cursor: pointer; transition: opacity .4s; }
.tier-shape { fill: rgba(255, 255, 255, .28); stroke: rgba(27, 23, 36, .5); stroke-width: 1; transition: fill .5s; }
.tier:hover .tier-shape { fill: rgba(255, 255, 255, .5); }
.tier:focus-visible { outline: none; }
.tier:focus-visible .tier-shape { stroke: #1b1724; stroke-width: 2.4; }
.wave { transform-box: fill-box; }

/* accordion */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--silk); }
.acc-panel > div { overflow: hidden; }
[aria-expanded='true'] + .acc-panel, .acc-panel[data-open='true'] { grid-template-rows: 1fr; }
[aria-expanded='true'] .acc-plus { transform: rotate(45deg); }

/* range/steps in ritual */
.rstep { opacity: .3; transition: opacity .6s var(--silk), transform .6s var(--silk); transform: translateX(-10px); }
.rstep[data-on='true'] { opacity: 1; transform: none; }
.rstep .rbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--silk); }
.rstep[data-on='true'] .rbody { grid-template-rows: 1fr; }
.rstep .rbody > div { overflow: hidden; }
.nav-veil { background: linear-gradient(to bottom, rgba(247, 243, 255, .38), transparent); }
[data-theme='dark'] .nav-veil { background: linear-gradient(to bottom, rgba(20, 19, 24, .55), transparent); }

/* metal steps */
.mstep { opacity: .3; transition: opacity .7s var(--silk); }
.mstep[data-on='true'] { opacity: 1; }
.mstep .mbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--silk); }
.mstep[data-on='true'] .mbody { grid-template-rows: 1fr; }
.mstep .mbody > div { overflow: hidden; }

/* drawer + toast */
#bag[inert] { pointer-events: none; }
#scrim { transition: opacity .5s var(--silk); }

/* fallback (no WebGL2): elegant static chrome drop, content stays fully readable */
#fallback { display: none; }
html[data-theme='dark'] #fbwrap { filter: saturate(.55) brightness(.92); }
html.no-gl #fallback { display: block; }
#fbwrap { transition: transform .2s linear; will-change: transform; }

#cursor { display: none; }
html.has-cursor #cursor { display: block; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .mq-track { transform: none !important; }
}

/* short viewports (small laptops): keep the pinned / sticky compositions inside the frame */
@media (max-height: 700px) and (min-width: 820px) {
  #ritual > div { padding-top: 5.4rem; padding-bottom: 1.4rem; }
  #ritual h2 { font-size: clamp(1.8rem, 3.6vw, 3.4rem); }
  #ritual .rstep { padding-top: .5rem; padding-bottom: .5rem; }
  #ritual .rstep .font-display.italic { font-size: 1.9rem; }
  #ritual .rstep h3 { font-size: 1.3rem; }
  #ritual .rstep .body-copy { font-size: .84rem; line-height: 1.5; }
  #metal .sticky { padding-top: 5.4rem; }
  #metal h2 { font-size: clamp(2rem, 3.9vw, 4rem); }
  #metal .body-copy { display: none; }
  #metal .mstep .body-copy { display: block; font-size: .86rem; line-height: 1.55; }
  #metal .mstep { padding-top: .6rem; padding-bottom: .6rem; }
  #finale h2 { font-size: clamp(2rem, 3.8vw, 4rem); }
}
@media (max-height: 560px) and (min-width: 820px) {
  #ritual .rstep .rbody { display: none; }
  #metal .mstep .mbody { display: none; }
}