/* Jead · light layer. One idea everywhere: light moving through a cut stone.
 * Dispersion (the only colour on the page), caustics that reveal the lattice,
 * facets that catch light, type that gains weight near the light, scroll as a slow turn of the stone. */
@property --fire-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--fire:conic-gradient(from var(--fire-angle),oklch(84% .11 20),oklch(92% .12 95),oklch(88% .12 155),oklch(86% .1 240),oklch(84% .11 315),oklch(84% .11 20));--lx:50%;--ly:50%;--lo:0}

/* Film grain and the scroll facet line. */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px}
.scroll-facet{position:fixed;top:0;left:0;z-index:41;width:100%;height:2px;background:var(--color-ink);transform:scaleX(0);transform-origin:left;pointer-events:none}
.scroll-facet::after{content:'';position:absolute;right:-5px;top:-4px;width:10px;height:10px;background:var(--color-paper);border:1.5px solid var(--color-ink);transform:rotate(45deg)}
@supports(animation-timeline:scroll()){.scroll-facet{animation:facet-grow linear both;animation-timeline:scroll(root)}}
@keyframes facet-grow{to{transform:scaleX(1)}}

/* The light spot follows the pointer. Invisible on paper, visible on graphite. */
.light-spot{position:fixed;left:0;top:0;z-index:5;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 900ms var(--ease-out);background:radial-gradient(circle,oklch(100% 0 0/.22),oklch(100% 0 0/.07) 34%,transparent 68%)}
body.has-light .light-spot{opacity:1}
/* Where the light lands on a dark surface it reveals the lattice cut into the stone. */
[data-light]{position:relative;isolation:isolate}
[data-light]::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:oklch(100% 0 0/.32);opacity:var(--lo);transition:opacity 600ms var(--ease-out);-webkit-mask-image:url('/landing/minerals/lattice.svg'),radial-gradient(300px circle at var(--lx) var(--ly),#000,transparent);-webkit-mask-size:1100px,100% 100%;-webkit-mask-position:var(--gx,50%) var(--gy,50%),0 0;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-image:url('/landing/minerals/lattice.svg'),radial-gradient(300px circle at var(--lx) var(--ly),#000,transparent);mask-size:1100px,100% 100%;mask-position:var(--gx,50%) var(--gy,50%),0 0;mask-repeat:no-repeat;mask-composite:intersect}
.criteria-stage{--gx:-20%;--gy:-30%}.brief{--gx:-60%;--gy:110%}.process{--gx:110%;--gy:50%}
@media(pointer:coarse){.light-spot,[data-light]::before{display:none}}

/* Hero stone: a live cut with facets that catch light and fire on the sharpest angle. */
.hero-crystal{filter:drop-shadow(0 26px 26px color-mix(in srgb,var(--color-ink) 10%,transparent));perspective:900px}
.hero-crystal svg{display:block;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.hero-crystal .glow path,.hero-crystal .fire path{transition:opacity 180ms linear}
.hero-crystal .fire path{mix-blend-mode:multiply}

/* Dispersion ring: a thin spectral halo around the primary action on hover. */
.button{position:relative}
.button::after{content:'';position:absolute;inset:-3px;border-radius:calc(var(--radius-sm) + 3px);padding:3px;background:var(--fire);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;pointer-events:none;transition:opacity 350ms var(--ease-out);animation:fire-spin 3.6s linear infinite paused}
.button:hover::after,.button:focus-visible::after{opacity:1;animation-play-state:running}
.button.light:hover::after{opacity:.9}
@keyframes fire-spin{to{--fire-angle:360deg}}
/* The winning row in the ranking flashes fire once when the list resorts. */
.rank-item::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;background:var(--fire);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;pointer-events:none}
.criteria-stage.is-playing .rank-item:first-child::before{animation:fire-spin 1400ms linear 1,fire-flash 2200ms var(--ease-out) 1;animation-delay:500ms}
@keyframes fire-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* Kinetic type: letters rise on load; a variable axis gains weight near the light. */
.hero h1 .ln{display:block;overflow:clip visible;white-space:nowrap;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ch{display:inline-block;white-space:pre;font-weight:var(--w,600);transform:translateY(112%);animation:ch-rise 1100ms var(--ease-out) forwards;animation-delay:calc(var(--i)*26ms + 80ms);transition:font-weight 220ms var(--ease-out)}
@keyframes ch-rise{to{transform:none}}
.footer-word .word{display:inline-flex}.footer-word .ch{display:inline-block;white-space:pre;font-weight:var(--w,600);transition:font-weight 260ms var(--ease-out)}

/* Scroll choreography: the prism turns, the closing line is revealed as a facet, the footer word rises. */
@supports(animation-timeline:view()){
.process-crystal{animation:prism-turn linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
.closing h2{animation:facet-reveal linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
.footer-word{animation:word-rise linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
.why h2{animation:facet-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@keyframes prism-turn{from{transform:rotate(4deg) translateY(90px)}to{transform:rotate(46deg) translateY(-90px)}}
@keyframes facet-reveal{from{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);opacity:.3}to{clip-path:polygon(50% -80%,180% 50%,50% 180%,-80% 50%);opacity:1}}
@keyframes word-rise{from{transform:translateY(.22em);letter-spacing:-.115em}to{transform:none;letter-spacing:-.08em}}

/* Ticker: the questions people actually ask, running past like light along an edge. */
.ticker{margin-top:-8px;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 80s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;align-items:center;padding-block:20px;font-size:22px;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.ticker-set>span{position:relative;padding-inline:30px;transition:font-weight 300ms var(--ease-out)}
.ticker-set>span:hover{font-weight:800}
.ticker-set>span::after{content:'';position:absolute;right:-5px;top:50%;width:8px;height:8px;border:1px solid var(--color-ink);transform:translateY(-50%) rotate(45deg)}
@keyframes ticker{to{transform:translateX(-50%)}}

@media(max-width:800px){.ticker-set{font-size:18px;padding-block:16px}.ticker-set>span{padding-inline:22px}.hero h1 .ln{white-space:normal}}
@media(max-width:480px){.ticker-set{font-size:16px}.ticker-set>span{padding-inline:18px}.grain{opacity:.04}.scroll-facet::after{display:none}}
@media(prefers-reduced-motion:reduce){
.hero h1 .ch{transform:none;animation:none}.ticker{overflow-x:auto;-webkit-mask:none;mask:none}.ticker-track{animation:none}.ticker-set[aria-hidden]{display:none}
.hero-crystal svg,.hero-crystal .glow path,.hero-crystal .fire path{transition:none}
.process-crystal,.closing h2,.why h2,.footer-word{animation:none}
}