/* Motion system: reveal, split, parallax, magnetic, global effects. API documented in js/motion.js */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 72px;
}

/* Selection, focus, scrollbar */
::selection { background: var(--gold-bright); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.night :focus-visible, footer :focus-visible { outline-color: var(--gold-bright); }
html { scrollbar-width: thin; scrollbar-color: var(--gold) var(--paper-deep); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--gold); border: 2px solid var(--paper-deep); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* Reveal: uses individual transform properties (translate/scale) so elements keep their own transform */
.reveal {
  --rx: 0px; --ry: 32px; --rs: 1;
  opacity: 0; translate: var(--rx) var(--ry); scale: var(--rs);
}
.reveal[data-reveal="fade"] { --ry: 0px; }
.reveal[data-reveal="left"] { --rx: -48px; --ry: 0px; }
.reveal[data-reveal="right"] { --rx: 48px; --ry: 0px; }
.reveal[data-reveal="scale"] { --ry: 0px; --rs: .94; }
.reveal[data-reveal="clip"] { --ry: 0px; opacity: 1; clip-path: inset(0 0 100% 0); }
.reveal.in {
  opacity: 1; translate: none; scale: none; clip-path: none;
  animation: reveal-in 1.1s var(--ease) var(--d, 0ms) backwards;
}
.reveal[data-reveal="clip"].in { animation-name: reveal-clip; animation-duration: 1.3s; }
@keyframes reveal-in {
  from { opacity: 0; translate: var(--rx) var(--ry); scale: var(--rs); }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes reveal-clip {
  from { clip-path: inset(0 0 100% 0); translate: 0 16px; }
  to { clip-path: inset(0 0 0 0); translate: 0 0; }
}

/* Split text: each word masked, rising in */
[data-split]:not(.is-split) { opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w { display: inline-block; vertical-align: top; overflow: hidden; padding: .1em .06em .2em; margin: -.1em -.06em -.2em; }
.wi { display: inline-block; transform: translateY(115%); }
.in .wi {
  transform: none;
  animation: word-up 1.05s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 55ms) backwards;
}
@keyframes word-up { from { transform: translateY(115%); } to { transform: none; } }

[data-parallax], [data-magnetic] { will-change: translate; }

/* Nav active link */
nav ul a:not(.btn) { position: relative; }
nav ul a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
nav ul a:not(.btn).active { color: var(--ink); }
nav ul a:not(.btn).active::after, nav ul a:not(.btn):hover::after { transform: scaleX(1); }

/* Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transform: scaleX(0); transform-origin: left;
}

/* Paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .18  0 0 0 0 .1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Custom cursor */
html.has-cursor, html.has-cursor *:not(input):not(textarea):not(select):not([contenteditable="true"]) { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; border-radius: 50%; opacity: 0;
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), background .3s, border-color .3s, margin .35s var(--ease);
}
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
.cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--gold); }
html.cursor-on .cursor-dot, html.cursor-on .cursor-ring { opacity: 1; }
html.cursor-link .cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(226, 183, 90, .14); border-color: var(--gold-bright); }
html.cursor-link .cursor-dot { opacity: 0; }
html.cursor-text .cursor-dot, html.cursor-text .cursor-ring { opacity: 0; }
html.cursor-down .cursor-ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

/* Intro curtain */
.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--paper); display: grid; place-items: center;
  transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
.intro.lift { transform: translateY(-100%); }
.intro-mark { display: grid; justify-items: center; gap: 22px; transition: opacity .3s; }
.intro.lift .intro-mark { opacity: 0; }
.intro svg { width: 84px; height: 84px; overflow: visible; }
.intro .j-path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s var(--ease) .05s forwards; }
.intro .j-dot { fill: var(--gold); transform-origin: 50% 50%; transform: scale(0); transform-box: fill-box; animation: pop .4s var(--ease) .6s forwards; }
.intro .j-line { display: block; width: 120px; height: 1px; background: var(--gold); transform: scaleX(0); animation: grow .8s var(--ease) .1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes grow { to { transform: scaleX(1); } }
html.is-intro { overflow: hidden; }

@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-split] { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; animation: none !important; }
  .wi { transform: none !important; animation: none !important; }
  .intro, .cursor-dot, .cursor-ring, .scroll-progress { display: none; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
}

.static .intro, .static .cursor-dot, .static .cursor-ring { display: none; }
.static .scroll-progress { display: none; }