/* Krondel Entry — scoped entrance and logo portal.
   Same palette and type as the main site: warm dark, cream, brand turquoise and the
   hero's cyan → blue → violet gradient, which glows through a reeded-glass door. */
#intro { color-scheme: dark; --cyan: var(--color-brand); --glow-cyan: #5fdcec; --glow-violet: #7c5cff; --cream: var(--color-cream); --intro-ease: cubic-bezier(.22, 1, .36, 1); --door-height: min(61svh, 630px); --door-width: calc(var(--door-height) * .70); --scene-x: 50%; --scene-y: 46%; }
#intro *, #intro *::before, #intro *::after { box-sizing: border-box; }
#intro button { font: inherit; color: inherit; }
#intro button, #intro a { -webkit-tap-highlight-color: transparent; }
#intro button { touch-action: manipulation; }
#intro button:focus-visible, #intro [tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 7px; }
#intro [hidden] { display: none !important; }
#intro .mono { font-family: var(--font-ui); font-weight: 500; text-transform: uppercase; }
#intro .symbol { position: relative; display: inline-block; width: 34px; aspect-ratio: 318.375 / 264.754; overflow: hidden; flex: 0 0 auto; }
#intro .symbol img { position: absolute; display: block; width: 198.35%; max-width: none; height: auto; left: -48.49%; top: -32.81%; }
#intro .brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: .15em; }
#intro .page-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 31px 42px; transition: opacity 250ms ease; }
#intro { position: fixed; z-index: 20; inset: 0; min-height: 320px; overflow: hidden; isolation: isolate; background: #1f1d1d; transition: opacity 380ms ease; }
#intro::after { content: ""; position: absolute; pointer-events: none; z-index: 1; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 32%, rgba(6, 5, 5, .7) 100%); }
/* Static film grain, the same texture the hero shader adds. */
#intro::before { content: ""; position: absolute; pointer-events: none; z-index: 1; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#intro #facility { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- room + light */
#intro #environment { position: absolute; inset: 0; background: #151313; transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 600ms ease; }
#intro #room-architecture { position: absolute; inset: 0; width: 100%; height: 100%; }
#intro .wall-glow { position: absolute; left: var(--scene-x); top: var(--scene-y); width: calc(var(--door-width) * 4.6); height: calc(var(--door-height) * 2.1); translate: -50% -52%; pointer-events: none; transition: scale 900ms var(--intro-ease); }
#intro .wall-glow::before, #intro .wall-glow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
#intro .wall-glow::before { background: radial-gradient(closest-side, rgba(34, 211, 238, .38), rgba(34, 211, 238, .11) 48%, rgba(34, 211, 238, 0)); animation: glow-drift-a 9s ease-in-out infinite alternate; }
#intro .wall-glow::after { background: radial-gradient(closest-side, rgba(124, 92, 255, .38), rgba(124, 92, 255, .10) 52%, rgba(124, 92, 255, 0)); animation: glow-drift-b 11s ease-in-out infinite alternate; }
@keyframes glow-drift-a { from { translate: -9% -4%; scale: .9; opacity: .7; } to { translate: 7% 5%; scale: 1.06; opacity: 1; } }
@keyframes glow-drift-b { from { translate: 10% 6%; scale: 1.05; opacity: 1; } to { translate: -8% -5%; scale: .9; opacity: .65; } }
#intro .floor-glow { position: absolute; left: var(--scene-x); top: calc(var(--scene-y) + var(--door-height) / 2 + 8px); width: calc(var(--door-width) * 2.6); height: min(26vh, 240px); translate: -50% -38%; pointer-events: none; animation: floor-breathe 6s ease-in-out infinite; }
#intro .floor-glow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 194, 214, .34), rgba(124, 92, 255, .14) 55%, rgba(124, 92, 255, 0)); }
/* The glass door reflected on the floor. */
#intro .floor-glow::after { content: ""; position: absolute; left: 50%; top: 38%; width: calc(var(--door-width) * .9); height: 62%; translate: -50% 0; background: linear-gradient(180deg, rgba(95, 220, 236, .24), rgba(124, 92, 255, .10) 45%, rgba(124, 92, 255, 0)); filter: blur(10px); }
@keyframes floor-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
#intro .spotlight { position: absolute; left: 0; top: 0; width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 231, 223, .075), rgba(92, 194, 214, .035) 45%, rgba(92, 194, 214, 0)); opacity: 0; pointer-events: none; transform: translate3d(50vw, 40vh, 0); transition: transform 900ms var(--intro-ease), opacity 700ms ease; will-change: transform; }
#intro .spotlight.is-on { opacity: 1; }
#intro .door-shadow { position: absolute; left: var(--scene-x); top: calc(var(--scene-y) - var(--door-height) / 2 - 26px); width: calc(var(--door-width) + 58px); height: calc(var(--door-height) + 34px); transform: translateX(-50%); border: 1px solid rgba(245, 231, 223, .07); border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #100f0f, #0a0909); box-shadow: 0 -6px 30px rgba(0, 0, 0, .45), inset 0 0 18px #000, 0 0 80px -12px rgba(92, 194, 214, .28); }
#intro .door-shadow::before { content: ""; position: absolute; inset: 8px 8px 0; border: 1px solid rgba(245, 231, 223, .06); border-bottom: 0; border-radius: 3px 3px 0 0; }
#intro #threshold-shadow { position: absolute; left: var(--scene-x); top: calc(var(--scene-y) + var(--door-height) / 2 + 7px); width: calc(var(--door-width) + 65px); height: 22px; transform: translateX(-50%); background: radial-gradient(ellipse at center top, rgba(95, 220, 236, .5), rgba(124, 92, 255, .16) 45%, rgba(124, 92, 255, 0) 72%); }
#intro .light-flood { position: absolute; left: var(--scene-x); top: var(--scene-y); width: calc(var(--door-width) * 5); height: calc(var(--door-height) * 2.4); translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(95, 220, 236, .55), rgba(47, 111, 232, .28) 40%, rgba(124, 92, 255, .12) 65%, rgba(124, 92, 255, 0)); opacity: 0; scale: .4; pointer-events: none; transition: opacity 700ms ease, scale 900ms var(--intro-ease); }

/* ------------------------------------------------------------------------ door */
#intro #door-system { position: absolute; z-index: 3; left: var(--scene-x); top: var(--scene-y); width: var(--door-width); height: var(--door-height); transform: translate(-50%, -50%); }
#intro #door { position: absolute; inset: 0; overflow: hidden; background: #1a4fd0; box-shadow: inset 0 0 45px rgba(0, 0, 0, .45); perspective: 1300px; transition: opacity 500ms ease, transform 800ms ease; }
#intro .corridor { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #0b8fc4, #1a4fd0 48%, #4b2bd0); }
#intro .flow { position: absolute; display: block; width: 130%; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
#intro .flow-a { left: -60%; top: -25%; background: radial-gradient(closest-side, #19d3ee, rgba(25, 211, 238, 0)); animation: flow-a 10s ease-in-out infinite alternate; }
#intro .flow-b { right: -65%; top: 8%; background: radial-gradient(closest-side, #8a2cf0, rgba(138, 44, 240, 0)); animation: flow-b 12s ease-in-out infinite alternate; }
#intro .flow-c { left: -35%; bottom: -40%; background: radial-gradient(closest-side, #5fdcec, rgba(95, 220, 236, 0)); animation: flow-c 9s ease-in-out infinite alternate; }
#intro .flow-d { right: -50%; bottom: -22%; background: radial-gradient(closest-side, #c02cf0, rgba(192, 44, 240, 0)); opacity: .7; animation: flow-d 14s ease-in-out infinite alternate; }
@keyframes flow-a { to { transform: translate(38%, 42%) scale(1.15); } }
@keyframes flow-b { to { transform: translate(-40%, 30%) scale(.9); } }
@keyframes flow-c { to { transform: translate(30%, -55%) scale(1.2); } }
@keyframes flow-d { to { transform: translate(-30%, -40%) scale(1.1); } }
/* Reeded glass: fine vertical ribs, a cream tint and a slow passing reflection. */
#intro .door-panel { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .07)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .11) 0 1px, rgba(255, 255, 255, 0) 1px 4px, rgba(0, 0, 0, .12) 4px 5px, rgba(255, 255, 255, 0) 5px 7px), rgba(24, 20, 20, .26); border: 1px solid rgba(245, 231, 223, .18); box-shadow: inset 0 1px rgba(255, 255, 255, .16), inset 0 -40px 60px -40px rgba(0, 0, 0, .4); transition: transform 800ms cubic-bezier(.65,0,.2,1), opacity 500ms ease; }
#intro #door-left { left: 0; border-right-color: rgba(245, 231, 223, .3); transform-origin: left center; }
#intro #door-right { right: 0; border-left-color: rgba(245, 231, 223, .3); transform-origin: right center; }
#intro .door-panel::before { content: ""; position: absolute; inset: 30px 24px; border: 1px solid rgba(245, 231, 223, .16); border-radius: 2px; }
#intro .door-panel::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); transform: translateX(-160%) skewX(-14deg); animation: glass-sweep 7s ease-in-out 2.4s infinite; }
#intro #door-right::after { animation-delay: 2.75s; }
@keyframes glass-sweep { 0%, 58% { transform: translateX(-160%) skewX(-14deg); } 82%, 100% { transform: translateX(330%) skewX(-14deg); } }
#intro .panel-inset { position: absolute; left: 23px; right: 23px; height: 43px; bottom: 48px; border-top: 1px solid rgba(245, 231, 223, .14); background: repeating-linear-gradient(0deg, rgba(245, 231, 223, .07) 0 1px, transparent 1px 7px); opacity: .7; }
#intro .panel-handle { position: absolute; top: 44%; width: 4px; height: 64px; border-radius: 4px; background: linear-gradient(180deg, #fffaf6, #e8d6cb 45%, #cdb9ad); box-shadow: 0 0 12px rgba(245, 231, 223, .25), 0 2px 4px rgba(0, 0, 0, .4); }
#intro #door-left .panel-handle { right: 14px; }
#intro #door-right .panel-handle { left: 14px; }
/* Light escaping between the two leaves; it quickens when the card comes close. */
#intro .door-seam { position: absolute; z-index: 1; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; pointer-events: none; transition: opacity 260ms ease; }
#intro .door-seam::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(95, 220, 236, 0), #bff6ff 18%, #5fdcec 45%, #9b87ff 75%, rgba(124, 92, 255, 0)); box-shadow: 0 0 10px 1px rgba(95, 220, 236, .7), 0 0 34px 6px rgba(124, 92, 255, .35); animation: seam-pulse 3.4s ease-in-out infinite; }
@keyframes seam-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#intro.card-near .door-seam::before, #intro.reading .door-seam::before { animation-duration: .9s; }
#intro .door-mark { position: absolute; z-index: 1; left: 50%; top: 34%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; transition: opacity 200ms ease; }
#intro .door-sill { position: absolute; z-index: 2; left: 13px; right: 13px; bottom: 1px; height: 2px; background: linear-gradient(90deg, rgba(95, 220, 236, 0), #5fdcec 30%, #9b87ff 70%, rgba(124, 92, 255, 0)); box-shadow: 0 2px 16px 1px rgba(92, 194, 214, .45); }
/* The cream casing: these four pieces later fly into the logo's four strokes. */
#intro .frame-segment { position: absolute; z-index: 4; transform-origin: 50% 50%; }
#intro #frame-top { left: -15px; right: -15px; top: -15px; height: 13px; }
#intro #frame-right { right: -15px; top: 0; bottom: 0; width: 13px; }
#intro #frame-bottom { left: -15px; right: -15px; bottom: -8px; height: 8px; }
#intro #frame-left { left: -15px; top: 0; bottom: 0; width: 13px; }
#intro .frame-material, #intro .frame-logo-fill { position: absolute; inset: 0; }
#intro .frame-material { background: linear-gradient(90deg, #fff8f3, #f1e2d9 45%, #dfcbbf); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 3px 10px rgba(0, 0, 0, .5), 0 0 22px rgba(92, 194, 214, .14); }
#intro #frame-top .frame-material, #intro #frame-bottom .frame-material { background: linear-gradient(180deg, #fff8f3, #efdfd5 50%, #d9c4b7); }
#intro .frame-logo-fill { opacity: 0; background: var(--stripe-color, #fff); clip-path: var(--stripe-clip, polygon(0 0, 100% 0, 100% 100%, 0 100%)); }
#intro .lock { position: absolute; display: block; width: 15px; height: 3px; left: calc(50% - 7.5px); top: 4px; border-radius: 2px; background: rgba(31, 29, 29, .3); transition: background 180ms ease, box-shadow 180ms ease; }
#intro #frame-left .lock, #intro #frame-right .lock { width: 3px; height: 15px; top: calc(50% - 7.5px); left: 4px; }
#intro #frame-bottom .lock { top: 2px; }
#intro .lock.is-unlocked { background: var(--cyan); box-shadow: 0 0 8px rgba(92, 194, 214, .9); }

/* ---------------------------------------------------------------------- reader */
#intro #reader-area { position: absolute; z-index: 5; left: calc(var(--scene-x) + var(--door-width) / 2 + 67px); top: calc(var(--scene-y) - 77px); width: 109px; transition: opacity 320ms ease, transform 400ms ease; }
#intro .reader-caption { color: rgba(245, 231, 223, .5); font-size: 9px; letter-spacing: .22em; margin: 0 0 14px; white-space: nowrap; }
#intro #reader { position: relative; display: block; width: 109px; height: 151px; padding: 0; border: 1px solid rgba(245, 231, 223, .14); border-radius: 14px; cursor: pointer; background: linear-gradient(150deg, #2c2727, #1a1717 50%, #121010); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .85), 0 0 0 4px #121010, 0 0 0 5px rgba(245, 231, 223, .05), inset 0 1px rgba(255, 255, 255, .08); text-align: center; transition: border-color 200ms ease, box-shadow 200ms ease; }
#intro #reader-drop-zone { position: absolute; inset: -28px; pointer-events: none; }
#intro .reader-indicator { position: absolute; top: 13px; left: 17px; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 8px rgba(92, 194, 214, .6); transition: background 180ms ease, box-shadow 180ms ease; }
#intro .reader-indicator::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(92, 194, 214, .7); animation: indicator-ping 2.4s var(--intro-ease) infinite; }
@keyframes indicator-ping { 0% { scale: .5; opacity: .9; } 70%, 100% { scale: 1.8; opacity: 0; } }
#intro .reader-surface { position: absolute; inset: 34px 10px 24px; border: 1px solid rgba(245, 231, 223, .07); border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(92, 194, 214, .14), rgba(92, 194, 214, 0) 68%), #0e0c0c; display: grid; place-items: center; }
#intro .reader-ripple { position: absolute; left: 50%; top: 50%; width: 44px; aspect-ratio: 1; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid rgba(92, 194, 214, .55); opacity: 0; animation: reader-ripple 2.6s var(--intro-ease) infinite; }
@keyframes reader-ripple { 0% { scale: .4; opacity: 0; } 15% { opacity: 1; } 100% { scale: 2.1; opacity: 0; } }
#intro .contactless { position: relative; width: 26px; height: 30px; color: rgba(245, 231, 223, .8); transition: color 200ms ease; }
#intro .contactless svg { width: 100%; height: 100%; overflow: visible; }
#intro .contactless path { animation: contactless-wave 2.6s ease-in-out infinite; }
#intro .contactless path:nth-child(2) { animation-delay: .15s; }
#intro .contactless path:nth-child(3) { animation-delay: .3s; }
#intro .contactless path:nth-child(4) { animation-delay: .45s; }
@keyframes contactless-wave { 0%, 60%, 100% { opacity: .3; } 22% { opacity: 1; stroke: #5fdcec; } }
#intro .reader-slot { position: absolute; bottom: 12px; height: 2px; width: 37px; left: calc(50% - 18.5px); border-radius: 2px; background: rgba(245, 231, 223, .25); box-shadow: 0 -1px #000; transition: background 200ms ease, box-shadow 200ms ease; }
#intro .scan-line { position: absolute; height: 1px; left: 0; right: 0; top: 10%; opacity: 0; background: var(--cyan); box-shadow: 0 0 15px 3px rgba(92, 194, 214, .4); }
#intro #status-text { display: block; color: rgba(245, 231, 223, .62); font-size: 9px; letter-spacing: .2em; line-height: 1.6; min-height: 26px; margin-top: 18px; text-align: center; white-space: nowrap; }
#intro.card-near #reader, #intro.reading #reader { border-color: rgba(92, 194, 214, .6); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .85), 0 0 0 4px #121010, 0 0 0 5px rgba(92, 194, 214, .12), 0 0 28px rgba(92, 194, 214, .25), inset 0 1px rgba(255, 255, 255, .08); }
#intro.card-near .contactless, #intro.reading .contactless { color: #bff6ff; }
#intro.card-near .reader-indicator, #intro.reading .reader-indicator { background: #bff6ff; box-shadow: 0 0 10px 2px rgba(95, 220, 236, .8); }
#intro.card-near .reader-ripple, #intro.reading .reader-ripple { animation-duration: 1.1s; }
#intro.reading .scan-line { opacity: 1; background: var(--glow-cyan); box-shadow: 0 0 12px 2px rgba(95, 220, 236, .55); animation: scan 550ms ease-in-out infinite alternate; }
#intro.verified #reader { border-color: rgba(92, 194, 214, .8); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .85), 0 0 0 4px #121010, 0 0 36px rgba(92, 194, 214, .4); }
#intro.verified .reader-indicator { background: #e8fdff; box-shadow: 0 0 4px #bff6ff, 0 0 14px 3px rgba(95, 220, 236, .8); }
#intro.verified .reader-slot { background: var(--cyan); box-shadow: 0 0 8px rgba(92, 194, 214, .7); }
#intro.verified .contactless, #intro.verified #status-text { color: #8fe6f3; }
#intro.verified .light-flood { opacity: .35; scale: .7; }

/* ------------------------------------------------------------------------ card */
#intro #card-home { position: absolute; z-index: 9; width: 232px; height: 142px; left: calc(50% - 215px); top: calc(var(--scene-y) + var(--door-height) / 2 - 44px); }
#intro #access-card { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, .34); border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(95, 220, 236, .95), rgba(95, 220, 236, 0) 55%), radial-gradient(120% 140% at 100% 100%, rgba(138, 44, 240, .95), rgba(138, 44, 240, 0) 60%), linear-gradient(125deg, #0b9ec9, #1a4fd0 55%, #6b2fd6); box-shadow: 0 var(--shadow-y, 20px) var(--shadow-blur, 30px) -9px rgba(0, 0, 0, .7), 0 0 44px -12px rgba(92, 194, 214, .55), inset 0 1px 0 rgba(255, 255, 255, .4); text-align: left; cursor: grab; user-select: none; touch-action: none; transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) perspective(850px) rotateX(var(--card-tilt-x, 0deg)) rotateY(var(--card-tilt-y, 0deg)) rotateZ(var(--card-rotation, -7deg)) scale(var(--card-scale, 1)); transition: transform 420ms cubic-bezier(.2,.75,.2,1), opacity 250ms ease, border-color 200ms ease; }
#intro #access-card::before { content: ""; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; background: linear-gradient(var(--sheen-angle, 110deg), rgba(255, 255, 255, .14), transparent 30% 55%, rgba(255, 255, 255, .18) 70%, transparent); opacity: var(--sheen-opacity, .6); }
/* A holographic glint crosses the card every few seconds. */
#intro #access-card::after { content: ""; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .08) 54%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; animation: card-shine 5.5s ease-in-out 2.2s infinite; }
@keyframes card-shine { 0%, 50% { background-position: 130% 0; } 80%, 100% { background-position: -30% 0; } }
#intro #access-card:hover { border-color: rgba(255, 255, 255, .6); }
#intro #access-card.dragging { cursor: grabbing; transition: opacity 250ms ease; will-change: transform; box-shadow: 0 var(--shadow-y, 26px) var(--shadow-blur, 36px) -9px rgba(0, 0, 0, .7), 0 0 50px -10px rgba(92, 194, 214, .6), inset 0 1px 0 rgba(255, 255, 255, .4); }
#intro #access-card.dragging:focus-visible, #intro.reading #access-card:focus-visible, #intro.verified #access-card:focus-visible { outline: none; }
#intro .card-top { position: absolute; top: 18px; left: 19px; right: 18px; display: flex; align-items: center; justify-content: space-between; }
#intro .card-top .symbol { width: 29px; }
#intro .card-middle { position: absolute; left: 19px; top: 57px; }
#intro .card-type { display: block; font-size: 9px; font-weight: 700; letter-spacing: .2em; color: #fff; }
#intro .card-clearance { display: block; font-size: 7px; color: rgba(255, 255, 255, .72); letter-spacing: .18em; margin-top: 6px; }
#intro .card-bottom { position: absolute; bottom: 17px; left: 19px; right: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: .16em; color: rgba(255, 255, 255, .88); }
#intro .card-chip { width: 25px; height: 18px; border-radius: 4px; border: 1px solid rgba(255, 244, 236, .6); background: linear-gradient(90deg, transparent 45%, rgba(255, 244, 236, .45) 47% 50%, transparent 52%), linear-gradient(0deg, transparent 45%, rgba(255, 244, 236, .45) 47% 50%, transparent 52%), linear-gradient(135deg, rgba(255, 244, 236, .55), rgba(255, 244, 236, .18)); }
#intro .card-bars { display: block; width: 48px; height: 13px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 1px, transparent 1px 3px, rgba(255, 255, 255, .75) 3px 5px, transparent 5px 7px); opacity: .7; }
#intro #instruction-text { position: absolute; top: calc(100% + 23px); left: -10px; right: -10px; text-align: center; margin: 0; color: rgba(245, 231, 223, .72); font-size: 9px; letter-spacing: .2em; white-space: nowrap; transition: opacity 200ms ease; pointer-events: none; }
#intro .instruction-arrow { display: inline-block; color: var(--cyan); margin-left: 8px; font-size: 13px; vertical-align: -1px; animation: arrow-nudge 1.6s var(--intro-ease) infinite; }
@keyframes arrow-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px -4px; } }
#intro.card-active #instruction-text { opacity: 0; }
#intro .intro-footer { position: absolute; z-index: 10; left: 42px; right: 42px; bottom: 28px; display: flex; align-items: center; justify-content: flex-end; transition: opacity 250ms ease; }
#intro #skip-intro { display: flex; align-items: center; gap: 12px; padding: 0 20px 0 22px; min-height: 44px; border: 1px solid rgba(245, 231, 223, .14); border-radius: 999px; background: rgba(245, 231, 223, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--cream); font-size: 11px; font-weight: 500; letter-spacing: .22em; cursor: pointer; transition: background 250ms ease, border-color 250ms ease; }
#intro #skip-intro:hover { background: rgba(245, 231, 223, .12); border-color: rgba(245, 231, 223, .3); }
#intro #skip-intro span:last-child { color: var(--cyan); font-size: 15px; transition: transform 200ms ease; }
#intro #skip-intro:hover span:last-child { transform: translate(3px, -3px); }

/* ------------------------------------------------------------- door sequence */
#intro.door-opening #door-left { transform: translateX(-98%) rotateY(8deg); }
#intro.door-opening #door-right { transform: translateX(98%) rotateY(-8deg); }
#intro.door-opening .door-mark, #intro.door-opening .door-seam { opacity: 0; }
#intro.door-opening #environment { transform: scale(1.035); }
#intro.door-opening .wall-glow { scale: 1.25; }
#intro.door-opening .light-flood { opacity: 1; scale: 1; }
#intro.door-opening #reader-area { opacity: 0; transform: translateY(-5px); pointer-events: none; }
#intro.door-opening #card-home { opacity: 0; pointer-events: none; }
#intro.frame-transform #door { opacity: 0; transform: scale(1.08); }
#intro.frame-transform #environment { opacity: 0; }
#intro.frame-transform .page-header, #intro.frame-transform .intro-footer { opacity: 0; pointer-events: none; }
#intro #frame-flight-layer { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#intro .frame-segment.is-flying { right: auto !important; bottom: auto !important; will-change: transform; transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rotation)) scale(var(--scale-x), var(--scale-y)); transition: transform var(--frame-duration, 790ms) cubic-bezier(.68,0,.18,1) var(--delay, 0ms), opacity 180ms ease; }
#intro .is-flying .frame-material { opacity: 0; transition: opacity 550ms ease var(--delay, 0ms); }
#intro .is-flying .frame-logo-fill { opacity: 1; transition: opacity 550ms ease var(--delay, 0ms); }
#intro #logo-lockup { position: fixed; z-index: 8; width: min(640px, 110vw); left: 50%; top: 48%; transform: translate(-50%, -50%); pointer-events: none; transition: transform 400ms ease, opacity 350ms ease; }
#intro #transition-logo { display: block; width: 100%; height: auto; aspect-ratio: 631.5 / 446.25; opacity: 0; transition: opacity 180ms ease; }
#intro .logo-wordmark { position: absolute; left: 0; right: 0; top: 85%; text-align: center; color: #e0e8e9; font-size: 16px; letter-spacing: .38em; padding-left: .38em; opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 240ms ease; }
#intro.logo-visible #transition-logo, #intro.logo-visible .logo-wordmark { opacity: 1; }
#intro.logo-visible .logo-wordmark { transform: translateY(0); }
#intro.logo-visible .frame-segment.is-flying { opacity: 0; }
#intro.skipping #facility, #intro.skipping #card-home, #intro.skipping .page-header, #intro.skipping .intro-footer, #intro.skipping #frame-flight-layer { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
#intro #portal-veil { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; display: none; pointer-events: none; }
#intro.entering { background: transparent; pointer-events: none; }
#intro.entering::before, #intro.entering::after, #intro.entering #facility, #intro.entering #frame-flight-layer, #intro.entering #card-home, #intro.entering .page-header, #intro.entering .intro-footer { visibility: hidden; }
#intro.entering #portal-veil { display: block; }
#intro.entering #logo-lockup { transition: none; will-change: transform; }
#intro.entering #transition-logo { transition: none; }
#intro.entering .logo-wordmark { opacity: 0; transition: opacity 120ms ease; }
#intro[data-state="IDLE"]:not(.card-touched) #access-card { animation: card-float 4.6s ease-in-out infinite; }
@keyframes card-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: 3px -10px; rotate: 1.2deg; } 70% { translate: -2px -5px; rotate: -.7deg; } }
#intro.hint #reader, #intro #reader.remind { animation: reader-hint 950ms ease-in-out; }
@keyframes scan { to { transform: translateY(69px); } }
@keyframes reader-hint { 50% { border-color: rgba(92, 194, 214, .85); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .85), 0 0 0 4px #121010, 0 0 30px rgba(92, 194, 214, .35); } }

/* ---------------------------------------------------------------- arrival
   One-shot choreography; entry.js removes .is-arriving once it has played so that
   re-parented pieces (the flying frame) never replay it. Only `backwards` fill:
   the state classes above must keep control of the final values. */
#intro.is-arriving #environment { animation: arrive-fade 1s ease backwards; }
#intro.is-arriving .wall-glow { animation: arrive-bloom 1.8s var(--intro-ease) .5s backwards; }
#intro.is-arriving #door { animation: arrive-door 1.5s var(--intro-ease) .25s backwards; }
#intro.is-arriving .frame-segment { animation: arrive-frame-x .8s var(--intro-ease) 1.05s backwards; }
#intro.is-arriving #frame-left, #intro.is-arriving #frame-right { animation-name: arrive-frame-y; }
#intro.is-arriving #frame-right { animation-delay: 1.12s; }
#intro.is-arriving #frame-bottom { animation-delay: 1.19s; }
#intro.is-arriving #frame-left { animation-delay: 1.26s; }
#intro.is-arriving .page-header { animation: arrive-drop .9s var(--intro-ease) .35s backwards; }
#intro.is-arriving #reader-area { animation: arrive-side 1s var(--intro-ease) 1.2s backwards; }
#intro.is-arriving #card-home { animation: arrive-card 1.1s var(--intro-ease) 1.3s backwards; }
#intro.is-arriving .intro-footer { animation: arrive-fade .8s ease 1.6s backwards; }
@keyframes arrive-fade { from { opacity: 0; } }
@keyframes arrive-bloom { from { opacity: 0; scale: .55; } }
/* A line of light draws down the seam, then the glass opens out of it. */
@keyframes arrive-door { 0% { clip-path: inset(50% calc(50% - 1px) 50% calc(50% - 1px)); } 35% { clip-path: inset(0 calc(50% - 1px) 0 calc(50% - 1px)); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes arrive-frame-x { from { opacity: 0; scale: 0 1; } }
@keyframes arrive-frame-y { from { opacity: 0; scale: 1 0; } }
@keyframes arrive-drop { from { opacity: 0; translate: 0 -12px; } }
@keyframes arrive-side { from { opacity: 0; translate: 18px 0; } }
@keyframes arrive-card { from { opacity: 0; translate: 0 70px; rotate: 8deg; } }

#intro .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
#intro #reader-area { left: calc(var(--scene-x) + var(--door-width) / 2 + 51px); }
}
@media (max-width: 850px) {
#intro { --door-width: min(calc(var(--door-height) * .70), 46vw); --scene-x: 45%; }
#intro .page-header { padding: 25px 26px; }
#intro .intro-footer { left: 26px; right: 26px; }
}
@media (max-width: 600px) {
#intro { --door-height: min(58svh, 500px); --door-width: min(60vw, 330px); --scene-x: 43%; --scene-y: 44%; }
#intro .page-header { padding: 23px 22px; }
#intro .brand { font-size: 16px; gap: 9px; }
#intro .brand .symbol { width: 27px; }
#intro .door-shadow { width: calc(var(--door-width) + 44px); }
#intro .door-shadow::before { inset: 7px 7px 0; }
#intro .door-panel::before { inset: 24px 13px; }
#intro .panel-inset { left: 13px; right: 13px; height: 33px; bottom: 32px; }
#intro .panel-handle { height: 48px; }
#intro #reader-area { left: calc(var(--scene-x) + var(--door-width) / 2 + 28px); top: calc(var(--scene-y) - 47px); width: 64px; }
#intro #reader { width: 64px; height: 106px; border-radius: 10px; }
#intro .reader-caption { font-size: 7px; letter-spacing: .08em; margin-bottom: 11px; }
#intro .reader-indicator { left: 10px; top: 10px; width: 6px; height: 6px; }
#intro .reader-surface { inset: 26px 6px 21px; border-radius: 6px; }
#intro .reader-ripple { width: 30px; margin: -15px 0 0 -15px; }
#intro .contactless { width: 22px; height: 25px; }
#intro .reader-slot { bottom: 10px; width: 27px; left: calc(50% - 13.5px); }
#intro #reader-drop-zone { inset: -23px; }
#intro #status-text { font-size: 7px; letter-spacing: .06em; margin-top: 14px; white-space: normal; }
#intro #card-home { width: 211px; height: 129px; left: calc(50% - 114px); top: calc(var(--scene-y) + var(--door-height) / 2 - 18px); }
#intro .card-top { top: 15px; left: 16px; right: 16px; }
#intro .card-top .symbol { width: 26px; }
#intro .card-middle { top: 51px; left: 16px; }
#intro .card-bottom { bottom: 14px; left: 16px; right: 16px; }
#intro #instruction-text { top: calc(100% + 20px); font-size: 8px; letter-spacing: .12em; }
#intro .intro-footer { left: 22px; right: 22px; bottom: max(12px, env(safe-area-inset-bottom)); }
#intro #skip-intro { min-height: 40px; padding: 0 16px 0 18px; font-size: 10px; }
}
@media (max-width: 365px) {
#intro { --scene-x: 41%; --door-width: 56vw; }
#intro #card-home { width: 190px; height: 118px; left: calc(50% - 102px); }
#intro .card-middle { top: 45px; }
#intro .card-bottom { bottom: 12px; }
}
@media (max-height: 650px) {
#intro { --door-height: 56svh; --scene-y: 42%; }
#intro .page-header { padding-top: 17px; }
#intro #card-home { width: 188px; height: 114px; top: auto; bottom: 76px; }
#intro .card-top { top: 12px; left: 15px; right: 15px; }
#intro .card-middle { top: 44px; left: 15px; }
#intro .card-bottom { bottom: 11px; left: 15px; right: 15px; }
#intro .card-top .symbol { width: 25px; }
#intro .card-type { font-size: 8px; }
#intro .card-clearance { margin-top: 4px; }
#intro #instruction-text { top: calc(100% + 14px); font-size: 8px; }
#intro .intro-footer { bottom: 8px; }
}
@media (max-height: 460px) and (min-width: 601px) {
#intro { --door-height: 65svh; --scene-y: 51%; }
#intro .page-header { padding: 14px 25px; }
#intro .brand { font-size: 15px; }
#intro .brand .symbol { width: 25px; }
#intro #card-home { left: calc(50% - 340px); bottom: 76px; }
#intro #reader-area { top: calc(var(--scene-y) - 76px); }
}
#intro .wordmark { display: block; height: auto; object-fit: contain; }
#intro .brand-wordmark { width: 145px; }
#intro .door-wordmark { width: 105px; opacity: .6; }
#intro .card-brand { width: 105px; }
#intro .logo-wordmark { padding: 0; }
#intro .logo-wordmark .wordmark { width: 168px; margin: 0 auto; }
@media (max-width: 600px) {
#intro .brand-wordmark { width: 120px; }
#intro .door-wordmark { width: 80px; }
#intro .card-brand { width: 96px; }
#intro .logo-wordmark .wordmark { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
#intro *, #intro *::before, #intro *::after { animation: none !important; }
#intro .reader-ripple, #intro .reader-indicator::after, #intro .door-panel::after, #intro #access-card::after, #intro .spotlight { display: none; }
#intro #access-card { transition-duration: 130ms; }
#intro .door-panel { transition-duration: 150ms; }
#intro.door-opening #environment, #intro.frame-transform #door { transform: none; }
#intro .frame-segment.is-flying { transition-duration: 140ms, 120ms; transition-delay: 0ms; }
#intro .is-flying .frame-material, #intro .is-flying .frame-logo-fill { transition-duration: 120ms; transition-delay: 0ms; }
#intro.entering #logo-lockup { transform: translate(-50%, -50%); }
#intro, #intro #logo-lockup { transition-duration: 150ms; }
}
/* The site stays laid out for WebGL and ScrollTrigger while the entrance covers it. */
#intro { z-index: 10000; color: var(--color-cream); font-family: var(--font-ui); font-weight: 400; }
#intro[hidden] { display: none !important; }
#intro .frame-logo-fill { background: var(--stripe-color, var(--color-cream)); }
html[data-loader-state="pending"] #main-content { visibility: hidden; }
html:not([data-loader-state="done"]) { overflow: hidden; }
html:not([data-loader-state="done"]) body { overflow: hidden; }
#main-content:focus { outline: none; }