/* JusTech design system: the shared pieces. Needs tokens.css first. */
* { box-sizing: border-box; }
html { background: var(--bg); transition: background .4s; }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .4s; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }
canvas { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* grain over everything: keeps the flat violet from looking printed */
.grain::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .45; mix-blend-mode: overlay;
  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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons: light (the one thing to do), ghost (the other) */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 500; font-size: 15px; white-space: nowrap; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.b-light { background: var(--text); color: #120f18; } .b-light:hover { background: #fff; }
.b-ghost { box-shadow: inset 0 0 0 1.5px rgba(241,237,247,.35); } .b-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); }

/* the violet field: the hero's and the close's ground */
.field-violet { position: relative; isolation: isolate; background: var(--violet); }
.field-violet::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(90% 80% at 85% 0%, var(--violet-hi), transparent 60%), radial-gradient(80% 80% at 0% 100%, var(--violet-deep), transparent 70%); }
.field-violet > canvas, .field-dark > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.field-dark { position: relative; isolation: isolate; background: radial-gradient(70% 90% at 70% 100%, oklch(0.3 0.13 293 / .5), transparent 70%), var(--bg-2); box-shadow: 0 0 0 1px var(--ring); }

/* display type: a word set in Bricolage, heavy and narrowed */
.display { font-family: var(--display); font-weight: 760; line-height: .86; letter-spacing: -0.045em; font-variation-settings: var(--display-axes); white-space: nowrap; }
.display span { display: inline-block; }

/* ignition (ignite.js): the letters rise, the T takes the light first, blooms white, drops a spark into the field,
   and settles to lilac. Mark the box [data-ignite], each letter .ch with --k, the letter that lights .T */
.js [data-ignite] .ch { opacity: 0; transform: translateY(.12em); }
.js [data-ignite].lit-0 .ch { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--k) * 45ms); }
[data-ignite] .T { color: var(--lilac); transition: color .5s ease, text-shadow .9s ease; }
.ignite .T { color: #fff; text-shadow: 0 0 .08em #fff, 0 0 .3em oklch(0.85 0.12 300 / .9), 0 0 .9em oklch(0.7 0.2 298 / .7); }
.settle .T { color: var(--lilac); text-shadow: 0 0 .25em oklch(0.85 0.12 300 / .35); transition: color 1.6s ease, text-shadow 2.4s ease; }
[data-ignite] .ch.glint:not(.T) { text-shadow: 0 0 .18em oklch(0.85 0.12 300 / .75); transition: text-shadow .1s; }
[data-ignite] .ch:not(.T) { transition: opacity .6s var(--ease), transform .8s var(--ease), text-shadow .9s ease; }
[data-ignite] .T.flash { color: #fff; text-shadow: 0 0 .1em #fff, 0 0 .4em oklch(0.85 0.12 300 / .8); transition: color .12s, text-shadow .12s; }
.drop { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px oklch(0.85 0.12 300), 0 0 40px 10px oklch(0.7 0.2 298 / .7); opacity: 0; pointer-events: none; z-index: 2; }
.rise { opacity: 0; transform: translateY(14px); }
.lit .rise { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }

/* glass: a screen floating over the field */
.glass-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); background-image: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%); box-shadow: var(--glass-shadow); border-radius: var(--r-2); }

@media (prefers-reduced-motion: reduce) {
  .rise, [data-ignite] .ch, [data-ignite] .T { transition: none !important; }
}