/* Stryx sites: the entry door (T420; T421 "Night Watch": the owl engraved in light, a light river, a night sky; T421b: the owl redrawn as a fine engraving). The same file on all four sites; door.js sets html[data-door-site].
   While the door is up (html.door-on) the page is hidden and still loading behind it; on the choice the page is
   seen through the owl's eyes. Colours: the token block of each site below, nowhere else. */
:root[data-door-site] {
  --door-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --door-warm: #ffd9b0;
}
:root[data-door-site="main"] {
  --door-accent-soft: rgb(65 225 181 / 0.55);
  --door-bg: #050814; --door-bg-2: #0b1430; --door-ink: #f3f1ea; --door-muted: #b9c2da; --door-accent: #41e1b5;
  --door-accent-ink: #050814; --door-line: rgb(191 212 255 / 0.22); --door-glow: rgb(65 225 181 / 0.16);
  --door-display: "Arno Display", "Arno Display Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --door-text: "Verlag", "Verlag Fallback", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}
:root[data-door-site="skills"] {
  --door-accent-soft: rgb(243 200 136 / 0.55);
  --door-bg: #070b17; --door-bg-2: #121a33; --door-ink: #f4efe6; --door-muted: #c3c7d4; --door-accent: #f3c888;
  --door-accent-ink: #0a0e1a; --door-line: rgb(236 232 255 / 0.2); --door-glow: rgb(243 200 136 / 0.14);
  --door-display: "Didot Glass", "Bodoni MT", Didot, Georgia, serif;
  --door-text: "Optima Glass", Optima, Candara, "Segoe UI", sans-serif;
}
:root[data-door-site="mneme"] {
  --door-accent-soft: rgb(234 184 102 / 0.55);
  --door-bg: #1d1712; --door-bg-2: #33261a; --door-ink: #f3ebdf; --door-muted: #d8ccba; --door-accent: #eab866;
  --door-accent-ink: #1d1409; --door-line: rgb(243 235 223 / 0.22); --door-glow: rgb(234 184 102 / 0.16);
  --door-display: "Requiem", "Iowan Old Style", Georgia, serif;
  --door-text: "Zapf Humanist", Optima, Candara, "Segoe UI", sans-serif;
}
:root[data-door-site="orion"] {
  --door-accent-soft: rgb(255 135 150 / 0.55);
  --door-bg: #07080a; --door-bg-2: #17191f; --door-ink: #f3f4f6; --door-muted: #c6cad2; --door-accent: #ff8796;
  --door-accent-ink: #07080a; --door-line: rgb(217 222 230 / 0.2); --door-glow: rgb(255 135 150 / 0.14);
  --door-display: "NHG Display", "NHG Fallback", "Helvetica Neue", Arial, sans-serif;
  --door-text: "NHG Display", "NHG Fallback", "Helvetica Neue", Arial, sans-serif;
}

/* the page waits behind the door: hidden, not removed, so its scene keeps warming up */
html.door-on { background: var(--door-bg); overflow: hidden; }
html.door-on body { overflow: hidden; }
html.door-on body > :not(#stryx-door) { visibility: hidden !important; }
html.door-leaving body { overflow: hidden; }

.door {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(48vmax 40vmax at 50% 30%, var(--door-glow), transparent 64%),
    radial-gradient(120vmax 70vmax at 50% 118%, var(--door-bg-2), transparent 70%),
    radial-gradient(90vmax 60vmax at 50% -20%, var(--door-bg-2), transparent 60%),
    var(--door-bg);
  color: var(--door-ink); font-family: var(--door-text); text-align: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  outline: none; overflow-y: auto; -webkit-tap-highlight-color: transparent;
}
/* the night: stars, the light river and fireflies, drawn on a 2D canvas behind everything */
.door__sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; animation: door-in 1.2s var(--door-ease) 0.1s forwards; }
.door__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: min(40rem, 100%); }
.door__words { display: flex; flex-direction: column; align-items: center; width: 100%; }

.door__meter { display: block; }
.door__mark { width: clamp(170px, 38vmin, 380px); aspect-ratio: 1; position: relative; }
.door__mark::before { /* a moon halo: a slow breath of light behind the owl */
  content: ""; position: absolute; inset: -26%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--door-glow), transparent);
  animation: door-breath 5.6s ease-in-out infinite alternate;
}
.door__owl { position: relative; width: 100%; height: 100%; overflow: visible; }
.door__stop-a { stop-color: var(--door-accent); }
.door__stop-h { stop-color: var(--door-ink); }
.door__halo { fill: none; stroke: var(--door-line); stroke-width: 0.8; stroke-dasharray: 0.6 3.4; transform-origin: 100px 100px; animation: door-turn 140s linear infinite; }
.door__track { fill: none; stroke: var(--door-line); stroke-width: 1; }
.door__ring { fill: none; stroke: url(#stryx-door-leaf); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px var(--door-accent-soft)); }
.door__comet { transform-origin: 100px 100px; opacity: 0; transition: opacity 0.4s var(--door-ease); }
.door__comet circle { fill: var(--door-ink); filter: drop-shadow(0 0 3px var(--door-accent)) drop-shadow(0 0 7px var(--door-accent-soft)); }
.door.is-going .door__comet { opacity: 1; }

/* the engraving: every line is drawn by its own share of the progress (door.js sets each dash offset) */
.door__lines { filter: drop-shadow(0 0 2px var(--door-accent-soft)); }
.door__l { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.door__l--leaf { stroke: url(#stryx-door-leaf); stroke-width: 1.5; }
.door__l--ruff { stroke-width: 1.8; }
.door__l--tuft { stroke-width: 0.85; }
.door__l--fine { stroke: var(--door-ink); stroke-width: 0.75; opacity: 0.62; }
.door__l--brow { stroke: var(--door-ink); stroke-width: 1.1; opacity: 0.9; }
.door__l--hatch { stroke: var(--door-muted); stroke-width: 0.8; opacity: 0.6; }
.door__beakfill { fill: var(--door-accent); opacity: 0.92; }
.door__beakline { fill: none; stroke: var(--door-bg); stroke-width: 0.5; stroke-linecap: round; opacity: 0.55; }
.door__beak { opacity: 0; transform: translateY(4px); transition: opacity 0.7s var(--door-ease), transform 0.9s var(--door-ease); }
.door.is-beak .door__beak { opacity: 1; transform: none; }

/* the eyes: shut while loading, open at 100%, flare as the visitor enters */
.door__eyes { transform-box: fill-box; transform-origin: center; transform: scaleY(0.08); transition: transform 0.6s var(--door-ease); }
/* T421b: a deep eye: iris glow toward the rim (gradient in door.js), radial fibres, a thin rim, a large pupil, a soft
   reflection arc and the heavy upper lid with its fine lid line */
.door__stop-d { stop-color: var(--door-bg); }
.door__eye { fill: var(--door-bg); stroke: var(--door-line); stroke-width: 0.6; }
.door__fibres { fill: none; stroke: var(--door-accent); stroke-width: 0.32; stroke-linecap: round; opacity: 0.55; }
.door__irisrim { fill: none; stroke: var(--door-accent); stroke-width: 0.55; opacity: 0.9; }
.door__pupil { fill: var(--door-bg); stroke: var(--door-accent-soft); stroke-width: 0.35; }
.door__shine { fill: none; stroke: var(--door-ink); stroke-width: 0.7; stroke-linecap: round; opacity: 0.42; }
.door__lid { fill: var(--door-bg); opacity: 0.8; }
.door__lidline { fill: none; stroke: var(--door-ink); stroke-width: 0.85; stroke-linecap: round; opacity: 0.88; }
.door__eyeglow { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.9s var(--door-ease) 0.2s, transform 0.3s var(--door-ease); }
.door.is-awake .door__eyes { transform: none; }
.door.is-awake .door__eyeglow { opacity: 0.55; }
.door.is-flare .door__eyeglow { opacity: 1; transform: scale(1.7); transition: opacity 0.2s linear, transform 0.3s var(--door-ease); }

.door__caption { margin: 22px 0 0; min-height: 1.4em; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--door-muted); font-variant-numeric: tabular-nums; }
.door__by { margin: 26px 0 0; font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--door-muted); }
.door__name { margin: 10px 0 0; font-family: var(--door-display); font-weight: 400; font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--door-ink); text-wrap: balance; }
.door__by + .door__name { margin-top: 6px; }
.door__words > .door__caption + .door__name { margin-top: 26px; }
.door__line { margin: 16px 0 0; max-width: 36ch; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--door-muted); text-wrap: pretty; }

.door__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--door-ease), transform 0.8s var(--door-ease), visibility 0s 0.6s; }
.door.is-ready .door__btns { visibility: visible; opacity: 1; transform: none; transition: opacity 0.6s var(--door-ease), transform 0.8s var(--door-ease), visibility 0s; }
.door__btn {
  min-height: 48px; min-width: 176px; padding: 0 1.5em; border-radius: 999px; touch-action: manipulation; cursor: pointer;
  font: 500 1rem/1 var(--door-text); letter-spacing: 0.02em; color: var(--door-ink);
  background: var(--door-bg); border: 1px solid var(--door-line);
  transition: border-color 0.2s var(--door-ease), background-color 0.2s var(--door-ease), transform 0.2s var(--door-ease);
}
.door__btn:hover { border-color: var(--door-muted); }
.door__btn:active { transform: scale(0.97); }
.door__btn:focus-visible { outline: 2px solid var(--door-accent); outline-offset: 3px; }
.door__btn--primary { background: var(--door-accent); border-color: var(--door-accent); color: var(--door-accent-ink); font-weight: 600; box-shadow: 0 0 28px var(--door-glow); }
.door__btn--primary:hover { border-color: var(--door-ink); }
.door__note { margin: 18px 0 0; font-size: 0.875rem; color: var(--door-muted); visibility: hidden; opacity: 0; transition: opacity 0.6s var(--door-ease) 0.15s; }
.door.is-ready .door__note { visibility: visible; opacity: 1; }
.door.is-fade { opacity: 0; transition: opacity 0.15s linear; }
.door.is-leaving { will-change: transform, opacity; pointer-events: none; }
.door.is-leaving .door__btns, .door.is-leaving .door__note { opacity: 0; transition: opacity 0.25s linear; }
.door.is-diving { transform: scale(26); opacity: 0; transition: transform 1.4s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.6s linear 0.8s; }

@keyframes door-breath { from { opacity: 0.5; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }
@keyframes door-turn { to { transform: rotate(360deg); } }
@keyframes door-in { to { opacity: 1; } }

@media (max-width: 480px) {
  .door__btns { flex-direction: column; width: 100%; max-width: 320px; }
  .door__btn { width: 100%; }
}
@media (max-height: 640px) {
  .door__mark { width: clamp(96px, 22vmin, 160px); }
  .door__by, .door__words > .door__caption + .door__name { margin-top: 14px; }
  .door__btns { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .door__mark::before, .door__halo { animation: none; }
  .door__sky { animation: none; opacity: 1; }
  .door__l, .door__beak, .door__eyes, .door__eyeglow, .door__comet, .door__btns, .door.is-ready .door__btns, .door__note, .door__btn { transition: none; }
  .door__btns { transform: none; }
}