/* Logo intro v2 (every page view). Main version: the original logo clip at 1.0x, full frame, then the end frame holds
   and the ground cross-fades into the hall. Engine version (?intro=neu): canvas drawn by intro/intro.js.
   The clip ground is #0A0A0A, so the stage uses exactly that colour (no seam around the video). */
.intro-on #intro { background: #0A0A0A; transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.intro-on #intro::after { background: radial-gradient(ellipse at 50% 48%, transparent 60%, rgba(0,0,0,0.35) 100%); }
.bi-stage { position: absolute; inset: 0; }
.bi-video, .bi-still, .bi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.bi-still { display: none; }
.intro-still-only .bi-still { display: block; }
/* claim below the wordmark of the clip: frame height H = displayed video height; wordmark sits at +0.15 H */
.bi-claim { position: absolute; left: 50%; top: calc(50% + 0.255 * min(100vh, 56.25vw)); transform: translate(-50%, 6px); margin: 0;
  white-space: nowrap; opacity: 0; font: 500 clamp(0.95rem, 1.5vw, 1.2rem)/1.3 var(--font); letter-spacing: 0.04em; color: #C9CDD6; }
@media (max-aspect-ratio: 1/1) { .bi-claim { top: calc(50% + 0.255 * min(100vw, 100vh)); } }
.bi-claim::after { content: ''; display: block; height: 1px; margin: 12px auto 0; width: 72px; transform: scaleX(0); background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.intro-on:not(.intro-still-only) .bi-claim { animation: biClaim 0.9s ease 2.4s forwards; }
.intro-on:not(.intro-still-only) .bi-claim::after { animation: biLine 1.1s cubic-bezier(0.3, 0, 0.2, 1) 2.6s forwards; }
.intro-still-only .bi-claim { opacity: 1; transform: translate(-50%, 0); }
.intro-still-only .bi-claim::after { width: 64px; transform: none; }
.intro-out #intro { opacity: 0; }
.intro-fast #intro { transition-duration: 0.26s; }
@keyframes biClaim { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes biLine { to { transform: scaleX(1); } }   /* compositor: scale, not width */
/* engine version: the canvas brings its own wordmark and claim (DOM, sharp) */
.intro-engine .bi-claim { display: none; }
.bi-word { position: absolute; left: 50%; transform: translate(-50%, 8px); margin: 0; opacity: 0; white-space: nowrap; text-align: center;
  font: 600 clamp(1.6rem, 4vmin, 3rem)/1.2 var(--font); letter-spacing: 0.01em; color: #9DA1A8; }
.bi-word b { color: var(--accent); font-weight: 600; }
.bi-word small { display: block; margin-top: 0.7em; font: 500 clamp(0.85rem, 1.6vmin, 1.1rem)/1.3 var(--font); letter-spacing: 0.05em; color: #C9CDD6; }
.bi-word.on { opacity: 1; transform: translate(-50%, 0); }
/* Start-up: with 3D the hall picture (assets/lobby.jpg, an older render) must never show under the canvas - otherwise
   two versions of the hall cross-fade at the start. It stays the picture for the no-WebGL page only. */
.has-3d .scene { background-image: none; }
/* CSS intro (default): the signet drawn by the compositor - every part is its own layer animated only through
   transform and opacity (no layout, paint or filter per frame), so the 3D hall can compile its shaders behind it
   without a stutter. Geometry follows the clip's end frame (logo box 600 x 440 of 1920 x 1080, centred). */
.bc { display: none; }
.intro-css .bc { display: block; position: absolute; inset: 0; }
.intro-css .bi-video { display: none; }
.bc-logo { --bw: calc(min(100vw, 177.78vh) * 0.3125); position: absolute; left: 50%; top: 50%; width: var(--bw);
  height: calc(var(--bw) * 440 / 600); transform: translate(-48%, -50%); }
.bc-part { position: absolute; will-change: transform, opacity; opacity: 0; }
.bc-part svg { display: block; width: 100%; height: 100%; }
.bc-stem { left: 5%; top: 4.5%; width: 5%; height: 64.8%; background: #4A4F57; transform-origin: 50% 100%; }
.bc-bowl { left: 5.2%; top: 27.5%; width: 29.7%; height: 40.5%; }
.bc-ring { left: 35.8%; top: 1.1%; width: 55%; height: 75%; }
.bc-glow { left: 25%; top: -14%; width: 77%; height: 105%;
  background: radial-gradient(closest-side, transparent 52%, rgba(253, 93, 3, 0.22) 64%, rgba(253, 93, 3, 0.06) 80%, transparent); }
.bc-dot { left: 84.5%; top: 60%; width: 9.3%; height: 12.7%; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #FFE0C4, #FD8A3D 45%, #FD5D03 70%); }
.bc-word { position: absolute; left: 0; right: 0; top: 79%; margin: 0; text-align: center; opacity: 0; will-change: transform, opacity;
  font: 500 calc(var(--bw) * 0.105)/1 var(--font); letter-spacing: 0.01em; color: #4A4F57; }
.bc-word b { font-weight: 500; color: #FD5D03; }
.intro-css .bc-stem { animation: bcStem 0.6s cubic-bezier(0.3, 0, 0.2, 1) 0.15s both; }
.intro-css .bc-bowl { animation: bcBowl 0.7s cubic-bezier(0.3, 0, 0.2, 1) 0.45s both; }
.intro-css .bc-ring { animation: bcRing 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both; }
.intro-css .bc-glow { animation: bcGlow 1.4s ease-out 1.5s both; }
.intro-css .bc-dot { animation: bcDot 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 2.0s both; }
.intro-css .bc-word { animation: bcWord 0.7s cubic-bezier(0.3, 0, 0.2, 1) 2.2s both; }
@keyframes bcStem { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes bcBowl { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes bcRing { from { opacity: 0; transform: translate(-42%, 12%) scale(0.32); } 60% { opacity: 1; } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes bcGlow { from { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; } to { opacity: 0.75; transform: scale(1); } }
@keyframes bcDot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes bcWord { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: translateY(0); } }
@media (max-aspect-ratio: 1/1) { .bc-logo { --bw: 62vw; } }