/* =====================================================================
   Solaria motion, shared by every page (js/fx.js drives it).
   Page transitions, torchlight, the scroll fuse, rising headings, gilt
   that draws itself, button sheen and sparks, cards that lean, the
   hearth button, the page banners, the wiki and the 404.
   Everything here stops for prefers-reduced-motion (see main.css and
   the end of this file).
   ===================================================================== */

/* ------------------------------------------------------------------ page transitions */

@view-transition { navigation: auto; }

.nav { view-transition-name: site-nav; }

::view-transition-old(root) { animation: vt-out 0.32s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes vt-out { to { opacity: 0; transform: scale(0.985); filter: brightness(0.5) blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Shared keyframes. */
@keyframes rise-in { from { opacity: 0; translate: 0 18px; filter: blur(4px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ torchlight */

.torch {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  will-change: transform;
}
.torch.on { opacity: 1; }
.torch i {
  position: absolute;
  left: -320px; top: -320px;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 184 110 / 0.1), rgb(255 146 64 / 0.045) 28%, rgb(255 120 40 / 0.016) 52%, transparent 68%);
  animation: torch-flicker 3.4s ease-in-out infinite;
}
@keyframes torch-flicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  18% { transform: scale(1.035); opacity: 0.9; }
  23% { transform: scale(0.99); opacity: 1; }
  51% { transform: scale(1.02); opacity: 0.86; }
  57% { transform: scale(0.985); opacity: 0.97; }
  79% { transform: scale(1.03); opacity: 0.92; }
}

/* ------------------------------------------------------------------ the fuse */

.fuse { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 2; pointer-events: none; }
.fuse i {
  position: absolute; inset: 0;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, rgb(143 108 29 / 0.5), var(--gold) 75%, #ffdc94);
  box-shadow: 0 0 8px rgb(212 169 58 / 0.45);
}
.fuse b {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * 100%);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0, #ffcf73 30%, rgb(255 140 50 / 0.5) 55%, transparent 72%);
  box-shadow: 0 0 14px 5px rgb(255 150 60 / 0.45);
  opacity: 0;
  transition: opacity 0.3s;
  animation: fuse-spark 0.24s steps(2, jump-none) infinite alternate;
}
.nav.lit .fuse b { opacity: 1; }
@keyframes fuse-spark { from { transform: scale(0.75); } to { transform: scale(1.2); } }

/* ------------------------------------------------------------------ rising headings */

[data-split] .sw {
  display: inline-block;
  vertical-align: top;
  overflow: clip;
  overflow-clip-margin: 0.25em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
[data-split] .sw > span { display: inline-block; }

[data-split='reveal'] .sw > span {
  translate: 0 108%;
  transition: translate 1s cubic-bezier(0.2, 0.75, 0.15, 1);
  transition-delay: calc(var(--d, 0s) + 0.12s + var(--wi, 0) * 65ms);
}
.in [data-split='reveal'] .sw > span, [data-split='reveal'].in .sw > span { translate: none; }

[data-split='load'] .sw > span {
  animation: sw-up 1s cubic-bezier(0.2, 0.75, 0.15, 1) both;
  animation-delay: calc(0.15s + var(--wi, 0) * 80ms);
}
@keyframes sw-up { from { translate: 0 108%; } }

/* Ink: words darken onto the page one by one. */
[data-split='ink'] .sw { overflow: visible; }
[data-split='ink'] .sw > span {
  opacity: 0;
  filter: blur(7px);
  transition: opacity 1s ease, filter 1s ease;
  transition-delay: calc(0.3s + var(--wi, 0) * 55ms);
}
.in [data-split='ink'] .sw > span { opacity: 1; filter: none; }

/* ------------------------------------------------------------------ gilt that draws itself */

.js .reveal .eyebrow::before,
.js .reveal .eyebrow::after { scale: 0 1; transition: scale 1s var(--ease) calc(var(--d, 0s) + 0.25s); }
.js .reveal .eyebrow::before { transform-origin: right; }
.js .reveal.in .eyebrow::before,
.js .reveal.in .eyebrow::after { scale: 1 1; }

.js .reveal.gilt::before, .js .reveal.gilt::after,
.js .reveal .gilt::before, .js .reveal .gilt::after {
  width: 0; height: 0;
  transition: width 0.7s var(--ease) calc(var(--d, 0s) + 0.4s), height 0.7s var(--ease) calc(var(--d, 0s) + 0.4s);
}
.js .reveal.in.gilt::before, .js .reveal.in.gilt::after,
.js .reveal.in .gilt::before, .js .reveal.in .gilt::after { width: 18px; height: 18px; }

/* The divider's rules run out from the middle and its star turns into place. */
.js .divider.reveal { translate: none; }
.js .divider::before, .js .divider::after { scale: 0 1; transition: scale 1.2s var(--ease) 0.15s; }
.js .divider::before { transform-origin: right; }
.js .divider svg { opacity: 0; rotate: -180deg; scale: 0.4; transition: opacity 0.8s, rotate 1.2s var(--ease), scale 1.2s var(--ease); }
.js .divider.in::before, .js .divider.in::after { scale: 1 1; }
.js .divider.in svg { opacity: 1; rotate: 0deg; scale: 1; animation: star-glow 4s ease-in-out 1.4s infinite; }
@keyframes star-glow { 50% { filter: drop-shadow(0 0 6px rgb(243 212 124 / 0.8)); } }

/* ------------------------------------------------------------------ buttons */

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%;
  left: 0;
  width: 42%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
.btn-ghost::after { background: linear-gradient(100deg, transparent, rgb(243 212 124 / 0.22), transparent); }
.btn:hover::after { transform: translateX(300%) skewX(-18deg); transition: transform 0.85s var(--ease); }
.btn.is-pending::after { display: none; }

.burst { position: fixed; z-index: 120; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute;
  width: 4px; height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #ffdf8e;
  box-shadow: 0 0 6px 2px rgb(255 150 60 / 0.7);
  animation: burst 0.8s cubic-bezier(0.15, 0.7, 0.3, 1) both;
}
@keyframes burst {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* ------------------------------------------------------------------ cards that lean */

.tilt { position: relative; will-change: transform; }
.tilt > .glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 232 180 / 0.13), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s;
}
.tilt.tilting > .glare { opacity: 1; }
.tilt:not(.reveal) { transition: transform 0.35s var(--ease); }

/* ------------------------------------------------------------------ the hearth button */

.ambience {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: rgb(12 10 8 / 0.4);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.ambience svg { width: 20px; height: 20px; overflow: visible; }
.ambience path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ambience .flame { transform-origin: 12px 18px; transform-box: view-box; }
.ambience:hover { color: var(--text); border-color: rgb(212 169 58 / 0.5); }
.ambience.on { color: var(--gold-hi); border-color: rgb(212 169 58 / 0.6); background: rgb(212 169 58 / 0.1); box-shadow: 0 0 16px rgb(232 131 60 / 0.25); }
.ambience.on .flame { fill: rgb(232 131 60 / 0.35); animation: flame 1.1s ease-in-out infinite alternate; }
.ambience.on .mute { display: none; }
.ambience.armed { border-color: rgb(212 169 58 / 0.4); }
@keyframes flame {
  0% { transform: scale(1, 1) skewX(0deg); }
  40% { transform: scale(0.94, 1.06) skewX(-3deg); }
  100% { transform: scale(1.04, 0.96) skewX(2deg); }
}

@media (max-width: 860px) {
  .nav .wrap { gap: 10px; }
  .ambience { order: 2; margin-left: auto; }
  .menu-toggle { order: 3; margin-left: 0; }
}

/* ------------------------------------------------------------------ page banners */

.page-hero > canvas.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.js .page-hero .eyebrow { animation: rise-in 0.8s var(--ease) both; }
.js .page-hero h1:not([data-split]) { animation: rise-in 0.9s var(--ease) 0.1s both; }
.js .page-hero p { animation: rise-in 0.9s var(--ease) 0.45s both; }
.page-hero::after { animation: keep-float 14s ease-in-out infinite; }
@keyframes keep-float { 50% { translate: 0 -12px; } }

/* ------------------------------------------------------------------ news, play and apply */

.post { transition: border-color 0.3s; }
.post:hover { border-color: rgb(212 169 58 / 0.28); }
.next-card svg { transition: transform 0.4s var(--ease), filter 0.4s; }
.next-card:hover svg { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 8px rgb(212 169 58 / 0.6)); }
.steps li::before { transition: background 0.3s, box-shadow 0.3s; }
.steps li:hover::before { background: rgb(212 169 58 / 0.14); box-shadow: 0 0 14px rgb(212 169 58 / 0.35); }
.rules li::before { transition: text-shadow 0.3s; }
.rules li:hover::before { text-shadow: 0 0 12px rgb(212 169 58 / 0.8); }
.progress button.current b { animation: step-glow 2.6s ease-in-out infinite; }
@keyframes step-glow { 50% { box-shadow: 0 0 14px rgb(212 169 58 / 0.55); } }

/* ------------------------------------------------------------------ the 404 */

.lost { position: relative; isolation: isolate; }
.lost > canvas.embers { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: -1; pointer-events: none; }
.js .lost .code { animation: rise-in 1s var(--ease) both, guttering 5s ease-in-out 1s infinite; }
.js .lost h1:not([data-split]) { animation: rise-in 0.9s var(--ease) 0.2s both; }
.js .lost p { animation: rise-in 0.9s var(--ease) 0.55s both; }
.js .lost .actions { animation: rise-in 0.9s var(--ease) 0.7s both; }
@keyframes guttering {
  0%, 100% { filter: drop-shadow(0 0 18px rgb(232 131 60 / 0.35)); opacity: 1; }
  12% { filter: drop-shadow(0 0 6px rgb(232 131 60 / 0.2)); opacity: 0.82; }
  15% { filter: drop-shadow(0 0 22px rgb(232 131 60 / 0.4)); opacity: 1; }
  48% { filter: drop-shadow(0 0 12px rgb(232 131 60 / 0.25)); opacity: 0.9; }
  52% { opacity: 0.6; }
  55% { filter: drop-shadow(0 0 20px rgb(232 131 60 / 0.4)); opacity: 1; }
}

/* ------------------------------------------------------------------ the wiki */

.wiki-main.swap > * { animation: wiki-in 0.5s var(--ease) both; }
.wiki-main.swap > :nth-child(2) { animation-delay: 0.05s; }
.wiki-main.swap > :nth-child(3) { animation-delay: 0.1s; }
.wiki-main.swap > :nth-child(n+4) { animation-delay: 0.15s; }
@keyframes wiki-in { from { opacity: 0; translate: 0 12px; } }
.portal-crown { animation: portal-crown 12s ease-in-out infinite; }
@keyframes portal-crown { 50% { translate: 0 -10px; rotate: 5deg; opacity: 0.16; } }
.featured-emblem { animation: emblem-glow 5s ease-in-out infinite; }
@keyframes emblem-glow { 50% { box-shadow: 0 0 24px rgb(212 169 58 / 0.18), inset 0 0 18px rgb(212 169 58 / 0.12); } }

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .torch, .fuse, .burst, .glare, .trace { display: none !important; }
}