/* Opening sequence, after the app's launch screen: the logo blooms over a night
   aurora, a gold planet travels once round its orbit drawing the ring behind it,
   the name rises, then the sky opens like a portal from the logo. */
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }

.intro { display: none; }
html.has-intro, html.has-intro body { overflow: hidden; }
.has-intro .intro {
  --cy: 44%;
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(90% 60% at 50% 42%, #0C1526 0%, #070A12 55%, #04050A 100%);
  -webkit-mask-image: radial-gradient(circle at 50% var(--cy), transparent var(--r), #000 calc(var(--r) + 1px));
  mask-image: radial-gradient(circle at 50% var(--cy), transparent var(--r), #000 calc(var(--r) + 1px));
}
.intro-aurora, .intro-stars { position: absolute; inset: 0; pointer-events: none; }
.intro-aurora::before, .intro-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0; animation: i-fade 1.6s ease forwards, i-drift 9s ease-in-out infinite alternate; }
.intro-aurora::before { width: 70vmax; height: 38vmax; left: -12vmax; top: 8vh; background: radial-gradient(closest-side, rgba(45, 212, 163, 0.32), transparent 72%); }
.intro-aurora::after { width: 64vmax; height: 40vmax; right: -16vmax; top: 30vh; background: radial-gradient(closest-side, rgba(56, 120, 248, 0.3), transparent 72%); animation-delay: 0.2s, 0s; animation-direction: normal, alternate-reverse; }
@keyframes i-fade { to { opacity: 1; } }
@keyframes i-drift { to { transform: translate(6vmax, -4vmax) scale(1.1); } }
.intro-stars { opacity: 0; animation: i-fade 1.2s ease 0.1s forwards; }
.intro-stars::before, .intro-stars::after { content: ""; position: absolute; inset: 0; animation: i-twinkle 2.6s ease-in-out infinite alternate; background:
  radial-gradient(1.2px 1.2px at 8% 14%, #fff, transparent), radial-gradient(1px 1px at 22% 72%, #fff, transparent), radial-gradient(1.4px 1.4px at 31% 28%, #F7E7A6, transparent),
  radial-gradient(1px 1px at 44% 86%, #fff, transparent), radial-gradient(1.3px 1.3px at 57% 12%, #fff, transparent), radial-gradient(1px 1px at 66% 64%, #F7E7A6, transparent),
  radial-gradient(1.5px 1.5px at 78% 22%, #fff, transparent), radial-gradient(1px 1px at 88% 78%, #fff, transparent), radial-gradient(1.2px 1.2px at 94% 40%, #F7E7A6, transparent),
  radial-gradient(1px 1px at 14% 46%, #fff, transparent), radial-gradient(1px 1px at 36% 54%, #fff, transparent), radial-gradient(1.2px 1.2px at 72% 92%, #fff, transparent); }
.intro-stars::after { transform: translate(3%, 5%) rotate(180deg); animation-delay: 1.3s; opacity: 0.7; }
@keyframes i-twinkle { from { opacity: 0.35; } to { opacity: 1; } }

.intro-mark { position: relative; display: grid; justify-items: center; transition: opacity 0.45s ease, transform 0.7s var(--ease-out), filter 0.45s ease; }
.intro-orb { --o: min(640px, 94vw, 78vh); position: relative; width: var(--o); aspect-ratio: 1; display: grid; place-items: center; margin: calc(var(--o) * -0.25) 0 calc(var(--o) * -0.2); }
.intro-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-orb .track { fill: none; stroke: rgba(238, 220, 154, 0.07); stroke-width: 1; }
.intro-orb .trail { fill: none; stroke: url(#iRing); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 2000; }
.intro-orb .tail { fill: none; stroke: #FFF1C2; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 2000; filter: drop-shadow(0 0 4px #F3D27A) drop-shadow(0 0 10px rgba(212, 175, 55, 0.8)); }
.intro-orb .planet { opacity: 0; transition: opacity 0.12s linear; }
.intro-orb .planet .core { fill: #FFF6DA; }
.intro-orb .planet .halo { fill: url(#iGlow); }
.intro-logo { position: relative; width: 29%; aspect-ratio: 1; opacity: 0; transform: scale(0.72); filter: blur(10px); }
.intro-logo img { width: 100%; height: 100%; filter: drop-shadow(0 0 26px rgba(56, 189, 248, 0.55)) drop-shadow(0 0 60px rgba(45, 212, 163, 0.25)); }
.intro-logo::before { content: ""; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 220, 255, 0.35), rgba(45, 212, 163, 0.12) 45%, transparent 70%); opacity: 0; transform: scale(0.6); }
.intro.s-logo .intro-logo { opacity: 1; transform: none; filter: none; transition: opacity 0.9s ease, transform 1.3s var(--ease-out), filter 0.9s ease; }
.intro.s-logo .intro-logo::before { animation: i-bloom 1.8s var(--ease-out) forwards; }
@keyframes i-bloom { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; } 100% { opacity: 0.5; transform: scale(1); } }

.intro-word { position: relative; z-index: 2; display: grid; justify-items: center; line-height: 1; font-family: var(--f-text); color: #fff; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); overflow: hidden; padding: 4px 18px 6px; }
.intro-word .f { font-size: clamp(20px, 1.6vw + 12px, 40px); font-weight: 800; color: rgba(255, 255, 255, 0.9); }
.intro-word .u { font-size: clamp(34px, 2.6vw + 22px, 62px); font-weight: 900; margin-top: 2px; }
.intro-word i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(70%); filter: blur(6px); color: #FFE7A3; text-shadow: 0 0 18px rgba(243, 210, 122, 0.95), 0 0 2px #F3D27A; }
.intro.s-word .intro-word i { opacity: 1; transform: none; filter: none; color: inherit; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); transition: opacity 0.6s ease, transform 0.9s var(--ease-out), filter 0.6s ease, color 1.1s ease 0.35s, text-shadow 1.3s ease 0.35s; transition-delay: calc(var(--i) * 0.04s), calc(var(--i) * 0.04s), calc(var(--i) * 0.04s), calc(var(--i) * 0.04s + 0.4s), calc(var(--i) * 0.04s + 0.4s); }
.intro-rule { width: min(280px, 56vw); height: 1px; margin-top: 18px; background: linear-gradient(90deg, transparent, #D4AF37, transparent); transform: scaleX(0); }
.intro.s-word .intro-rule { transform: scaleX(1); transition: transform 1.2s var(--ease-out) 0.3s; }
.intro-tag { margin-top: 14px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem); color: var(--gold-hi); opacity: 0; transform: translateY(8px); text-align: center; padding: 0 20px; }
.intro.s-tag .intro-tag { opacity: 0.9; transform: none; transition: opacity 0.9s ease, transform 0.9s var(--ease-out); }
.intro-skip { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); left: 50%; translate: -50% 0; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243, 238, 225, 0.35); opacity: 0; animation: i-fade 0.8s ease 1.4s forwards; }

/* exit: the sky opens from the logo */
.intro-portal { position: absolute; left: 50%; top: var(--cy); width: calc(var(--r) * 2 + 3px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid #F7E7A6; box-shadow: 0 0 18px 3px rgba(243, 210, 122, 0.85), 0 0 70px 14px rgba(212, 175, 55, 0.35), inset 0 0 40px 6px rgba(212, 175, 55, 0.25); }
.intro.s-out .intro-mark { opacity: 0; transform: scale(1.14); filter: blur(10px); transition-duration: 0.35s, 0.6s, 0.35s; }
.intro.s-out .intro-skip { opacity: 0 !important; transition: opacity 0.3s; }
.intro.s-out { animation: i-portal 1.2s cubic-bezier(0.65, 0, 0.25, 1) 0.12s forwards; }
.intro.s-out .intro-portal { opacity: 1; transition: opacity 0.15s ease 0.12s; }
@keyframes i-portal { 0% { --r: 7vmin; opacity: 1; } 80% { opacity: 1; } 100% { --r: 140vmax; opacity: 0; } }