/* The Start Screen: the chamber inside #boot. Walls in perspective, squares lighting on twos, the opening, the floor,
   the pair as silhouettes with a rim of light; Enter rushes the room past and goes to white. */
#boot.chamber-on { background: #050608; overflow: hidden; }
#boot .chamber { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 42%; overflow: hidden; transform-origin: 50% 42%; }
#boot .cb-wall { position: absolute; top: -16%; bottom: -16%; width: 98%; display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 1fr; gap: 4px; padding: 4px; background-color: #07080b; background-image: linear-gradient(rgba(255, 250, 248, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 250, 248, .09) 1px, transparent 1px); background-size: 11.111% 10%; }
#boot .cb-wall.l { left: -14%; transform-origin: left center; transform: rotateY(56deg); }
#boot .cb-wall.r { right: -14%; transform-origin: right center; transform: rotateY(-56deg); }
#boot .cb-sq { display: block; border: 1px solid rgba(255, 250, 248, .13); background: #0a0b0f; }
#boot .cb-sq.lit { background: #FFFAF8; box-shadow: 0 0 26px rgba(255, 250, 248, .38); opacity: 0; animation: cb-lit .5s steps(3, end) forwards; animation-delay: var(--d, 0ms); }
#boot .cb-sq.pic { background-size: cover; background-position: center; filter: grayscale(1) contrast(1.45) brightness(1.08); outline: 1px solid rgba(255, 250, 248, .4); opacity: 0; animation: cb-lit .5s steps(3, end) forwards; animation-delay: var(--d, 0ms); }
#boot .cb-door { position: absolute; left: 50%; top: -6%; height: 76%; width: 7%; transform: translateX(-50%); background: #FFFAF8; box-shadow: 0 0 150px 56px rgba(255, 250, 248, .26); mask-image: linear-gradient(to bottom, #000 72%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); }
#boot .cb-floor { position: absolute; left: -35%; right: -35%; bottom: -3%; height: 48%; transform-origin: 50% 0; transform: perspective(700px) rotateX(62deg); background-color: #050608; background-image: linear-gradient(rgba(255, 250, 248, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 250, 248, .14) 1px, transparent 1px); background-size: 64px 64px; }
#boot .cb-glow { position: absolute; left: 50%; bottom: 0; width: 14%; height: 44%; transform: translateX(-50%); background: linear-gradient(to top, rgba(255, 250, 248, .3), transparent 80%); filter: blur(8px); }
#boot .cb-cast { position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 12px; z-index: 3; }
#boot .cb-cast img { display: block; height: 23vh; width: auto; filter: brightness(.14) contrast(1.6) saturate(1.6) drop-shadow(0 0 1px rgba(255, 250, 248, .85)) drop-shadow(0 0 18px rgba(255, 250, 248, .22)); }
#boot .cb-cast img.kagi { height: 9.6vh; }
#boot .cb-cast.rf { bottom: auto; top: calc(79% + 2px); transform: translateX(-50%) scaleY(-1); opacity: .16; z-index: 2; }
#boot .cb-cast.rf img { filter: brightness(.14) blur(1px); }
#boot.chamber-on .stack { position: absolute; left: 36px; bottom: 34px; transform: none; gap: 8px; justify-items: start; z-index: 4; }
#boot.chamber-on .line { text-align: left; }
#boot.chamber-on .scatter { display: none; }
#boot.chamber-on .wm { font-size: clamp(26px, 3vw, 40px); }
#boot .cb-enter { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-70); opacity: 0; animation: cb-fade .6s ease 1.8s forwards; }
#boot .cb-enter b { border: 1px solid var(--line); border-radius: 3px; padding: 4px 7px; color: var(--bone); font-weight: 500; }
#boot .cb-enter i { width: 5px; height: 5px; background: var(--g); box-shadow: 0 0 10px var(--g); animation: cb-blink 1.2s steps(1) infinite; }
#boot.walk .chamber { transform: scale(2.4); transition: transform 1.05s cubic-bezier(.55, 0, .9, .35); }
#boot.walk .cb-door { width: 360%; height: 160%; top: -30%; box-shadow: none; transition: width .8s cubic-bezier(.7, 0, 1, .6) .2s, height .8s cubic-bezier(.7, 0, 1, .6) .2s, top .8s cubic-bezier(.7, 0, 1, .6) .2s; mask-image: none; -webkit-mask-image: none; }
#boot.walk .cb-cast, #boot.walk .stack { opacity: 0; transition: opacity .3s ease; }
#boot.walk { background: #FFFAF8; transition: background .15s ease .85s; }
@keyframes cb-lit { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-fade { to { opacity: 1; } }
@keyframes cb-blink { 50% { opacity: .3; } }
@media (max-width: 900px) { #boot .cb-cast img { height: 16vh; } #boot .cb-cast img.kagi { height: 7vh; } #boot .cb-wall { width: 90%; } }
@media (prefers-reduced-motion: reduce) { #boot .cb-sq.lit, #boot .cb-sq.pic { animation: none; opacity: 1; } #boot .cb-enter { animation: none; opacity: 1; } #boot.walk .chamber, #boot.walk .cb-door { transition: none; } }
/* the three-dimensional room takes the walls, floor, door and cast over; the stack stays on top */
#boot canvas.cb-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; transition: opacity .25s ease; }
#boot.three .cb-wall, #boot.three .cb-floor, #boot.three .cb-door, #boot.three .cb-glow, #boot.three .cb-cast { visibility: hidden; }
#boot.three .chamber { perspective: none; }
#boot.three.walk .chamber { transform: none; transition: none; }
#boot.open .cb-enter i { background: var(--bone); box-shadow: 0 0 12px var(--bone); animation: none; }
/* the Start plate: bottom right, three planes in the Trending card's language. It lifts and tilts toward the hand, a
   light follows the pointer across it; pressing compresses it on twos, throws pixels, turns it bone, then the room walks in. */
#boot .cb-start-wrap { position: absolute; right: 36px; bottom: 34px; z-index: 5; perspective: 700px; opacity: 0; animation: cb-fade .6s ease 1.6s forwards; }
#boot .cb-start { position: relative; display: block; margin: 0; padding: 0; border: 0; background: transparent; color: var(--bone); cursor: pointer; transform-style: preserve-3d; transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .42s var(--ease, ease); will-change: transform; outline: none; }
#boot .cb-start:hover, #boot .cb-start:focus-visible { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
#boot .cb-start:active { transform: translateY(-2px) scale(.97) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-duration: .12s; }
#boot .cb-start-face { position: relative; display: flex; align-items: center; gap: 16px; min-width: 216px; padding: 14px 18px 14px 18px; border: 1px solid rgba(255, 250, 248, .18); border-radius: 8px; background: rgba(14, 15, 18, .62); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); transform: translateZ(0); transition: border-color .3s ease, box-shadow .42s var(--ease, ease), transform .42s var(--ease, ease), background .3s ease; }
#boot .cb-start:hover .cb-start-face, #boot .cb-start:focus-visible .cb-start-face { border-color: rgba(255, 250, 248, .42); box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 250, 248, .05); transform: translateZ(14px); background: rgba(20, 21, 26, .7); }
#boot .cb-start-face i { width: 6px; height: 6px; flex: none; background: var(--g); box-shadow: 0 0 12px var(--g); animation: cb-blink 1.2s steps(1) infinite; }
#boot .cb-start-t { display: grid; gap: 4px; text-align: left; }
#boot .cb-start-l { font: 800 22px/1 'Doto', var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone); }
#boot .cb-start-sub { font: 500 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
#boot .cb-start-face kbd { margin-left: auto; font: 500 10px/1 var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; color: var(--bone-70); letter-spacing: .1em; }
#boot .cb-start-sheen { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: 0; background: radial-gradient(140px 90px at var(--mx, 50%) var(--my, 50%), rgba(255, 250, 248, .16), transparent 70%); transform: translateZ(16px); transition: opacity .3s ease; }
#boot .cb-start:hover .cb-start-sheen, #boot .cb-start:focus-visible .cb-start-sheen { opacity: 1; }
#boot.open .cb-start-face { border-color: #fff; box-shadow: 0 0 34px rgba(255, 250, 248, .4); }
#boot .cb-start.pressed { animation: cb-press .52s steps(5, end) forwards; }
#boot .cb-start.pressed .cb-start-face { background: var(--bone); border-color: var(--bone); color: var(--ink); }
#boot .cb-start.pressed .cb-start-l, #boot .cb-start.pressed .cb-start-sub, #boot .cb-start.pressed kbd { color: var(--ink); }
#boot .cb-start.pressed kbd { border-color: rgba(14, 15, 18, .4); }
#boot .cb-start.pressed .cb-start-face i { background: var(--ink); box-shadow: none; animation: none; }
#boot .cb-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; transform: translateZ(20px); }
#boot .cb-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--bone); opacity: 0; animation: cb-px .55s steps(6, end) forwards; }
#boot .cb-burst i.r { background: var(--r); } #boot .cb-burst i.g { background: var(--g); } #boot .cb-burst i.b { background: #2E7BFF; }
#boot.walk .cb-start-wrap { opacity: 0; transition: opacity .2s; }
@keyframes cb-press { 0% { transform: scale(1); } 25% { transform: scale(.92); } 55% { transform: scale(1.06); } 100% { transform: scale(1.28); opacity: 0; } }
@keyframes cb-px { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } }
@media (max-width: 900px) { #boot .cb-start-wrap { right: 14px; bottom: 14px; } #boot .cb-start-face { min-width: 0; padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { #boot .cb-start-wrap { animation: none; opacity: 1; } #boot .cb-start, #boot .cb-start-face { transition: none; } #boot .cb-start.pressed { animation: none; } #boot .cb-burst i { animation: none; } }