/* ─── WELCOME ─────────────────────────────────
   The screen every version opens with: the sun rises, a row of glyphs lights up, the brand writes itself into a
   cartouche, then the doors part onto the page. Built by js/intro.js; each version's stylesheet sets the --w-* tokens. */
:where(.welcome) {
  --w-bg: #0d0d0d;
  --w-ink: #fff;
  --w-soft: rgba(255,255,255,.6);
  --w-accent: #c9962c;
  --w-glow: 230,160,70;
  --w-sun: radial-gradient(circle, #fff1cf 0%, #ffc56b 26%, #e8862f 50%, rgba(200,80,30,0) 71%);
  --w-sun-edge: 0 solid transparent;
  --w-sun-size: min(80vmin, 640px);
  --w-rays: repeating-conic-gradient(rgba(var(--w-glow),.2) 0deg 3deg, transparent 3deg 12deg);
  --w-rays-mask: radial-gradient(circle, #000 4%, transparent 40%);
  --w-font: system-ui, sans-serif;
  --w-weight: 700;
  --w-case: none;
  --w-track: 0;
  --w-brand-shadow: none;
  --w-tag-font: Georgia, serif;
  --w-tag-style: italic;
  --w-tag-weight: 400;
  --w-tag-size: clamp(19px, 2.6vw, 32px);
  --w-tag-rotate: 0deg;
  --w-ring: var(--w-accent);
  --w-ring-w: 2px;
  --w-ring-fill: transparent;
  --w-ring-glow: drop-shadow(0 0 6px rgba(var(--w-glow),.7));
}
body.intro-active { overflow: hidden; }

.welcome { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; overflow: hidden; background: var(--w-bg); color: var(--w-ink); text-align: center; text-transform: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.welcome.is-open { background: transparent; pointer-events: none; }

/* the two halves of the backdrop that slide apart */
.welcome__door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.welcome__door--l { left: 0; }
.welcome__door--r { right: 0; }
.welcome__door::before { content: ''; position: absolute; top: 0; bottom: 0; width: 100vw; background: var(--w-bg); }
.welcome__door--l::before { left: 0; }
.welcome__door--r::before { right: 0; }
.welcome__door::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: rgb(var(--w-glow)); box-shadow: 0 0 28px 8px rgba(var(--w-glow),.75); opacity: 0; transition: opacity .25s; }
.welcome__door--l::after { right: 0; }
.welcome__door--r::after { left: 0; }
.welcome.is-open .welcome__door { transition: transform 1.15s cubic-bezier(.75,0,.2,1) .2s; }
.welcome.is-open .welcome__door--l { transform: translateX(-102%); }
.welcome.is-open .welcome__door--r { transform: translateX(102%); }
.welcome.is-open .welcome__door::after { opacity: 1; }

/* sun and turning rays */
.welcome__sky { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s ease; }
.welcome__sun { position: absolute; left: 50%; top: 50%; width: var(--w-sun-size); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--w-sun); border: var(--w-sun-edge); opacity: 0; animation: w-rise 2.4s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.welcome__rays { position: absolute; left: 50%; top: 50%; width: 260vmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--w-rays); -webkit-mask: var(--w-rays-mask); mask: var(--w-rays-mask); opacity: 0; animation: w-rays-in 1.8s ease .7s forwards, w-spin 50s linear infinite; }
.welcome.is-open .welcome__sky { opacity: 0; }
@keyframes w-rise { from { opacity: 0; transform: translateY(55vh) scale(.5); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes w-rays-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes w-spin { to { rotate: 360deg; } }

.welcome__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 1.2s ease .3s; }
.welcome.is-open .welcome__dust { opacity: 0; }

/* words */
.welcome__stage { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; transition: opacity .55s ease, transform .9s cubic-bezier(.5,0,.2,1), filter .55s; }
.welcome.is-open .welcome__stage { opacity: 0; transform: scale(1.12); filter: blur(6px); }

.welcome__glyphs { display: flex; gap: clamp(8px, 2.4vw, 28px); margin-bottom: clamp(18px, 4vh, 38px); font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif; font-size: clamp(24px, 4.4vw, 52px); line-height: 1; color: var(--w-accent); }
.welcome__glyphs span { opacity: 0; animation: w-glyph 1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.35s + var(--i) * 90ms); }
@keyframes w-glyph {
  from { opacity: 0; transform: translateY(14px) scale(.7); filter: blur(6px); }
  55% { opacity: 1; filter: blur(0); text-shadow: 0 0 22px rgb(var(--w-glow)), 0 0 4px #fff; }
  to { opacity: .9; transform: none; filter: blur(0); text-shadow: 0 0 10px rgba(var(--w-glow),.4); }
}

.welcome__word { display: inline-block; white-space: nowrap; }
.welcome__ch { display: inline-block; opacity: 0; animation: w-ch .75s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d) + var(--i) * var(--s)); }
@keyframes w-ch { from { opacity: 0; transform: translateY(.45em) rotate(5deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

.welcome__hello { --d: .95s; --s: 40ms; margin-bottom: clamp(14px, 2.6vh, 24px); font-size: clamp(11px, 1.3vw, 14px); letter-spacing: .42em; text-transform: uppercase; color: var(--w-soft); }

.welcome__ring { --d: 1.5s; --s: 65ms; position: relative; margin-right: 10px; padding: .26em .7em .3em; font-family: var(--w-font); font-weight: var(--w-weight); text-transform: var(--w-case); letter-spacing: var(--w-track); font-size: clamp(36px, 8.4vw, 118px); line-height: 1.02; text-shadow: var(--w-brand-shadow); }
.welcome__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: var(--w-ring-glow); }
.welcome__ring rect { fill: var(--w-ring-fill); fill-opacity: 0; stroke: var(--w-ring); stroke-width: var(--w-ring-w); stroke-dasharray: 1; stroke-dashoffset: 1; animation: w-draw 1.4s cubic-bezier(.6,0,.2,1) 1.2s forwards; }
@keyframes w-draw { to { stroke-dashoffset: 0; fill-opacity: 1; } }
/* the bar that closes a cartouche */
.welcome__ring::after { content: ''; position: absolute; right: -10px; top: 18%; bottom: 18%; width: var(--w-ring-w); background: var(--w-ring); transform: scaleY(0); animation: w-tie .45s cubic-bezier(.2,.7,.2,1) 2.5s forwards; }
@keyframes w-tie { to { transform: none; } }
.welcome__brand { position: relative; }
.welcome__glint { position: absolute; inset: 0; border-radius: var(--rx, 999px); overflow: hidden; pointer-events: none; }
.welcome__glint::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 28%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg); opacity: 0; animation: w-glint 1.2s ease-in-out 2.8s forwards; }
@keyframes w-glint { from { left: -40%; opacity: 1; } to { left: 120%; opacity: 1; } }

.welcome__tag { margin-top: clamp(18px, 3.6vh, 32px); font-family: var(--w-tag-font); font-style: var(--w-tag-style); font-weight: var(--w-tag-weight); font-size: var(--w-tag-size); line-height: 1.25; color: var(--w-accent); rotate: var(--w-tag-rotate); opacity: 0; animation: w-up .9s cubic-bezier(.2,.7,.2,1) 2.55s forwards; }
.welcome__sub { margin-top: 14px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--w-soft); opacity: 0; animation: w-up .9s ease 2.9s forwards; }
.welcome__skip { position: absolute; left: 0; right: 0; bottom: 24px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--w-soft); opacity: 0; animation: w-up .8s ease 1.4s forwards; transition: opacity .3s; }
.welcome.is-open .welcome__skip { visibility: hidden; }
@keyframes w-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }