/* 3d-demo.css */
:root{color-scheme:dark;--cyan:#62e8ff;--bg:#061525}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:#ecfaff}
button{font:inherit;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
#grid-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#light-strings{position:fixed;inset:-5%;z-index:1;pointer-events:none;opacity:0;background-position:center;background-size:cover;mask-image:linear-gradient(#000 0%,#000 30%,#0009 56%,transparent 82%);transition:opacity 3s ease;transform:scale(1.04)}
body.intro-started #light-strings{opacity:.62}
#viewport{position:fixed;inset:0;overflow:hidden;perspective:1050px;perspective-origin:50% 48%;pointer-events:none;z-index:2}
#world{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d}
#brand-layer{position:fixed;inset:0;overflow:hidden;perspective:1050px;perspective-origin:50% 48%;pointer-events:none;z-index:2}
#brand-world{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d}
body.scene-moving #brand-world{will-change:transform}
#pages,#fx{position:absolute;left:0;top:0;transform-style:preserve-3d}
.sheet,.sheet-back{position:absolute;left:0;top:0;width:1120px;height:700px;margin-left:-560px;margin-top:-245px;backface-visibility:hidden;overflow:hidden;border:0px solid #56e0ffe6;-box-shadow:0 0 16px #38d3ff55;pointer-events:none}
.sheet{background:#fff;color:#183346}
.card-reflection{position:absolute;left:50%;top:48%;pointer-events:none;background:linear-gradient(to bottom,#f0fcff38 0%,#9cecff1c 22%,#62e8ff08 62%,transparent 100%);filter:blur(4px)}
.card-reflection.is-back{background:linear-gradient(to bottom,#259bd44d 0%,#1679b52a 22%,#065c8f0d 62%,transparent 100%)}
.page-layer{position:fixed;inset:0;overflow:hidden;perspective:1050px;perspective-origin:50% 48%;pointer-events:none;z-index:3}
.page-layer>.sheet,.page-layer>.sheet-back{left:50%;top:48%}
.page-layer .page-frame{display:block;width:100%;height:100%;border:0;background:#fff;pointer-events:none;transform-origin:0 0}
.page-layer:not(.is-active) .page-frame{transform:scale(var(--frame-scale-x,1),var(--frame-scale-y,1))}
.page-layer.is-active{perspective:none;pointer-events:auto;z-index:25!important;contain:layout paint;isolation:isolate;box-shadow:0 0 23px #51dfff66}
.page-layer.is-active>.sheet{left:0;top:0;width:100%!important;height:100%!important;margin:0!important;transform:none!important;visibility:visible;pointer-events:auto}
.page-layer.is-active .page-frame{pointer-events:auto}
.page-layer.is-active>.sheet-back{display:none}
.page-layer.is-active[aria-busy=true]::after{content:'Seite wird geladen …';position:absolute;inset:2px;display:grid;place-items:center;background:#fff;color:#183346;font-size:16px;pointer-events:none}
body.scene-moving .page-layer:not(.is-active)>.sheet{will-change:transform}
.sheet.card-active{visibility:visible}
.sheet-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:radial-gradient(ellipse at center,#11598bad,transparent 75%),repeating-linear-gradient(0deg,transparent 0 31px,#4fb1d712 32px),linear-gradient(145deg,#0b2a49,#041120 85%);color:#8beaff}
.sheet-back img{width:70%;height:22%;object-fit:contain}
.sheet-back-title{font-size:25px;letter-spacing:.18em;text-transform:uppercase}
#floor-brand{position:absolute;left:0;top:0;width:1140px;height:240px;margin-left:-570px;margin-top:-120px;transform:translate3d(0px,36px,690px);pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--intro-logo-fade,1.25s) ease,visibility 0s linear var(--intro-logo-fade,1.25s)}
body.intro-logo #floor-brand,body.intro-started #floor-brand{opacity:1;visibility:visible;transition-delay:0s}
#floor-brand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 40px #1F7CCFFF)}

.firefly-wrap{position:absolute;left:0;top:0;pointer-events:none;opacity:0}
body.intro-started .firefly-wrap{opacity:1}
body.intro-started:not(.intro-finished) .firefly-wrap{animation:firefly-in 3s ease both}
@keyframes firefly-in{from{opacity:0}to{opacity:1}}
.firefly{position:absolute;width:10px;height:10px;-border-radius:50%;background:#cdeb23;opacity:1.00;box-shadow:0 0 8px #cdeb232b,0 0 22px #cdeb2300;animation:firefly-float var(--float-duration,12s) ease-in-out var(--float-delay,0s) infinite both;animation-play-state:paused}
body.particles-running:not(.scene-moving) .firefly{animation-play-state:running}
@keyframes firefly-float{0%,100%{transform:translate3d(0,0,0);opacity:.48}35%{transform:translate3d(var(--float-x,30px),var(--float-y,-25px),0);opacity:.86}70%{transform:translate3d(calc(var(--float-x,30px)*-.45),calc(var(--float-y,-25px)*.55),0);opacity:.64}}
header{position:fixed;z-index:40;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,5vw,74px);pointer-events:none}
.brand,.menu-toggle{pointer-events:auto}
.header-controls{position:fixed;z-index:210;top:22px;right:clamp(18px,5vw,74px);display:flex;align-items:center;gap:8px}
.site-logo{display:block;width:54px;height:58px;object-fit:contain}
.menu-toggle{width:56px;height:52px;display:grid;place-content:center;gap:7px;border:0px solid #3b92af;background:transparent;cursor:pointer}
.menu-toggle i{display:block;width:26px;height:2px;background:#8defff}
.menu-toggle[aria-expanded=true] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu-toggle[aria-expanded=true] i:nth-child(2){display:none}
.menu{position:fixed;right:clamp(18px,5vw,74px);top:92px;z-index:55;width:min(365px,calc(100% - 36px));max-height:calc(100dvh - 108px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;padding:18px;background:#020d18fa;border:1px solid #3c9cba;box-shadow:0 0 30px #0009}
[hidden]{display:none!important}
.menu-title{font-size:11px;letter-spacing:.3em;color:var(--cyan);padding:12px 13px 18px}
.nav-button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid #16435a;background:transparent;padding:18px 13px;color:#e2faff;text-align:left;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-height:48px}
.nav-button:hover,.nav-button.active{background:#0d3349;color:#83efff}
.nav-button small{font-size:10px;color:#65b6d4;white-space:nowrap}
.sound-toggle,.fullscreen-toggle,.swoosh-toggle{display:grid;place-items:center;width:48px;height:52px;padding:10px;border:0;background:transparent;color:#8defff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sound-toggle svg,.fullscreen-toggle svg,.swoosh-toggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sound-toggle[aria-pressed=false] .sound-waves,.sound-toggle[aria-pressed=true] .sound-muted,.fullscreen-toggle[aria-pressed=false] .fullscreen-exit,.fullscreen-toggle[aria-pressed=true] .fullscreen-enter{display:none}
.sound-toggle:focus-visible,.fullscreen-toggle:focus-visible,.swoosh-toggle:focus-visible{outline:2px solid #8defff;outline-offset:2px;border-radius:5px}
.hud,.coordinates{position:fixed;z-index:35;bottom:max(16px,env(safe-area-inset-bottom,0px));font:11px monospace;letter-spacing:.1em;color:#81b9cd;pointer-events:none}
.hud{left:clamp(18px,5vw,74px);display:flex;gap:10px;align-items:center;max-width:60%}
#status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coordinates{right:clamp(18px,5vw,74px);white-space:nowrap}
.pulse{flex:none;width:8px;height:8px;border-radius:50%;background:#70eaff;box-shadow:0 0 10px #3ce5ff}
.loader{position:fixed;bottom:0;left:0;z-index:60;width:100%;height:3px;background:var(--cyan);transform:scaleX(0);transform-origin:left}
#intro-screen{position:fixed;inset:0;z-index:200;pointer-events:none}
#intro-launch{position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;color:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#intro-hint{position:fixed;z-index:201;pointer-events:none;transform:translateX(-50%);color:#a9edff;white-space:nowrap;font-size:14px;letter-spacing:.14em;text-shadow:0 0 12px #62e8ff55;transition:opacity .7s ease,transform .7s ease,visibility 0s .7s}
#intro-hint span{display:block;opacity:.8;animation:hint-breathe 4.8s ease-in-out .4s infinite both}
body.mobile-intro{--intro-logo-fade:2.8s}
body.mobile-intro #intro-hint span{animation-duration:7s;animation-delay:.8s}
@keyframes hint-breathe{0%,100%{opacity:0;transform:translateY(3px)}25%,70%{opacity:.9;transform:translateY(0)}}
body.intro-engaging #intro-hint,body.intro-logo #intro-hint,body.intro-started #intro-hint{opacity:0;visibility:hidden;transform:translate(-50%,-6px)}
body.intro-engaging #intro-hint span,body.intro-logo #intro-hint span,body.intro-started #intro-hint span{animation-play-state:paused}
header,.header-controls,.hud,.coordinates,.classic-site-link{transition:opacity 2s ease-in-out,transform 2s cubic-bezier(.16,1,.3,1),visibility 0s linear}
body:not(.intro-started) header,body:not(.intro-started) .header-controls,body:not(.intro-started) .hud,body:not(.intro-started) .coordinates,body:not(.intro-started) .classic-site-link{opacity:0;visibility:hidden;pointer-events:none}
body:not(.intro-started) header,body:not(.intro-started) .header-controls{transform:translateY(-16px)}
body:not(.intro-started) .hud,body:not(.intro-started) .coordinates,body:not(.intro-started) .classic-site-link{transform:translateY(13px)}
body.intro-started header,body.intro-started .header-controls,body.intro-started .hud,body.intro-started .coordinates,body.intro-started .classic-site-link{opacity:1;visibility:visible;transform:none;transition-delay:2.8s,2.8s,2.8s}
body:not(.intro-started) #fx{visibility:hidden}
body:not(.intro-finished) .menu-toggle,body:not(.intro-finished) .brand{pointer-events:none!important}
body:not(.intro-started) .sheet,body:not(.intro-started) .sheet-back,body:not(.intro-started) .card-reflection{visibility:hidden}
body:not(.intro-finished) .sheet,body:not(.intro-finished) .sheet-back{clip-path:inset(100% 0 0 0)}
body.intro-started:not(.intro-finished) .sheet,body.intro-started:not(.intro-finished) .sheet-back{animation:card-in 5.2s cubic-bezier(.45,0,.2,1) both;animation-delay:calc(5.4s + var(--reveal-index,0) * 1.5s)}
@keyframes card-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
body.intro-finished .sheet,body.intro-finished .sheet-back{clip-path:none;animation:none}
body:not(.intro-finished) .card-reflection{opacity:0}
body.intro-started:not(.intro-finished) .card-reflection{animation:reflection-in 5.2s cubic-bezier(.45,0,.2,1) both;animation-delay:calc(5.4s + var(--reveal-index,0) * 1.5s)}
@keyframes reflection-in{from{opacity:0}to{opacity:1}}
body.intro-finished .card-reflection{opacity:1;animation:none}
@media(max-width:767px){
 body.intro-started #light-strings{opacity:.42}
 .card-reflection{filter:blur(3px)}
 .sheet,.sheet-back{width:420px;height:910px;margin-left:-210px;margin-top:-455px}
 #floor-brand{width:690px;height:121px;margin-left:-345px;margin-top:-60.5px}
 header{padding:14px 18px}.site-logo{width:40px;height:46px}.menu-toggle{width:50px;height:46px}
 .header-controls{top:14px;right:18px;gap:4px}.sound-toggle,.fullscreen-toggle,.swoosh-toggle{height:46px}
 .menu{top:74px;max-height:calc(100dvh - 90px - env(safe-area-inset-bottom,0px))}
 .hud,.coordinates{font-size:9px;bottom:max(12px,env(safe-area-inset-bottom,0px))}.hud{max-width:52%;left:12px}.coordinates{right:12px}
 #fx{display:none}
}
@media(max-height:500px){header{padding-top:8px}.site-logo{height:40px}.menu-toggle{height:42px}.menu{top:58px;max-height:calc(100dvh - 70px - env(safe-area-inset-bottom,0px))}.nav-button{padding:12px}}
@media(max-height:500px){.header-controls{top:8px}.sound-toggle,.fullscreen-toggle,.swoosh-toggle{height:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#light-strings{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMDAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iciIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiMxMzdmYmIiIHN0b3Atb3BhY2l0eT0iLjIiLz48c3RvcCBvZmZzZXQ9Ii4zIiBzdG9wLWNvbG9yPSIjMzliY2U4Ii8+PHN0b3Agb2Zmc2V0PSIuNTgiIHN0b3AtY29sb3I9IiM3NjYyZDkiLz48c3RvcCBvZmZzZXQ9Ii44IiBzdG9wLWNvbG9yPSIjMTM4ZWQzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWRhOGQyIiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiMxNjg0YmYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjM1IiBzdG9wLWNvbG9yPSIjM2RiY2UzIi8+PHN0b3Agb2Zmc2V0PSIuNjIiIHN0b3AtY29sb3I9IiM0MTVlYWUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMyMzhjYmQiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PGZpbHRlciBpZD0iZ2xvdyIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMzIiLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJzb2Z0IiB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1Ii8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGcgZmlsdGVyPSJ1cmwoI2dsb3cpIj48cGF0aCBkPSJNLTE2MC0xMDBDMjAwLTgwIDI0MCAxNTAgNDg1IDIyMFM4NjAgMjkwIDEwMTAgNTEwIDEyMjAgNzIwIDE1ODAgODIwIiBzdHJva2U9InVybCgjcikiIHN0cm9rZS13aWR0aD0iOTUiIG9wYWNpdHk9Ii44Ii8+PHBhdGggZD0iTTcwLTE4MEM0MTAtOTAgNDIwIDE0MCA2NTAgMTg1UzEwMjAgMTcwIDExMzAgNDEwIDE0MDAgNTcwIDE2MTAgNjYwIiBzdHJva2U9InVybCgjcykiIHN0cm9rZS13aWR0aD0iNTgiIG9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTS0xNTAgMTIwQzE0MCAxMDAgMjQwIDMzMCA0ODAgMzcwUzcwMCA0NTAgOTAwIDY1MCAxMTkwIDg4MCAxNDYwIDk1MCIgc3Ryb2tlPSJ1cmwoI3MpIiBzdHJva2Utd2lkdGg9IjQyIiBvcGFjaXR5PSIuMyIvPjwvZz48ZyBzdHJva2U9InVybCgjcikiIGZpbHRlcj0idXJsKCNzb2Z0KSIgb3BhY2l0eT0iLjIiPjxwYXRoIGQ9Ik0tMTYwLTEwMEMyMDAtODAgMjQwIDE1MCA0ODUgMjIwUzg2MCAyOTAgMTAxMCA1MTAgMTIyMCA3MjAgMTU4MCA4MjAiIHN0cm9rZS13aWR0aD0iNSIvPjxwYXRoIGQ9Ik03MC0xODBDNDEwLTkwIDQyMCAxNDAgNjUwIDE4NVMxMDIwIDE3MCAxMTMwIDQxMCAxNDAwIDU3MCAxNjEwIDY2MCIgc3Ryb2tlLXdpZHRoPSIzIi8+PC9nPjwvZz48L3N2Zz4=")}

/* Floor network signals */
#grid-signals{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none;visibility:hidden}
.grid-signal{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation-play-state:paused}
.grid-signal-face{position:absolute;left:-160px;top:-9px;width:160px;height:18px;transform-origin:100% 50%;background:linear-gradient(90deg,transparent,var(--signal-color,#31caff) 85%,#e3ffff);border-radius:50%;animation-play-state:paused}
.grid-signal-face::after{content:'';position:absolute;right:-6px;top:3px;width:12px;height:12px;border-radius:50%;background:#e9ffff;box-shadow:0 0 10px 4px var(--signal-color,#31caff),0 0 25px 8px #26cdff99}
body.signals-running #grid-signals{visibility:visible}
body.signals-running:not(.scene-moving) .grid-signal,body.signals-running:not(.scene-moving) .grid-signal-face{animation-play-state:running;will-change:transform}
body.scene-moving #grid-signals{visibility:hidden}
@media(prefers-reduced-motion:reduce){#grid-signals{display:none}}

.swoosh-toggle[aria-pressed=true] .swoosh-muted{display:none}
@media(max-width:599px),(pointer:coarse),(prefers-reduced-motion:reduce){.swoosh-toggle{display:none!important}}

/* demo-swoosh.css */
/* Shallow conical light band + mirrored band; no extra animation loop. */
.firefly{width:15px;height:15px}
.classic-site-link{position:fixed;right:max(clamp(18px,5vw,74px),env(safe-area-inset-right,0px));bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) - 8px);z-index:45;display:inline-flex;align-items:center;gap:6px;padding:8px 6px;margin-right:-6px;color:#81b9cd;font:12px/16px Arial,Helvetica,sans-serif;letter-spacing:.025em;text-decoration:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.classic-site-link:hover{color:#d1f8ff;text-decoration:underline;text-underline-offset:3px}
.classic-site-link:focus-visible{outline:2px solid #8defff;outline-offset:2px;border-radius:4px}
.hud{max-width:calc(100% - 230px)}
@media(max-width:767px){.classic-site-link{padding-top:14px;padding-bottom:14px;bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) - 14px)}.hud{max-width:calc(100% - 198px)}}
.swoosh-layer,.swoosh-reflection{position:fixed;inset:0;overflow:hidden;perspective:1050px;perspective-origin:50% 48%;pointer-events:none;visibility:hidden}
.swoosh-layer{filter:blur(6px)}
.swoosh-reflection{z-index:2;opacity:.22;filter:blur(11px);clip-path:inset(48% 0 0);mask-image:linear-gradient(to bottom,transparent 47%,#000 54%);transition:opacity .65s ease}
.swoosh-reflection .swoosh-half{clip-path:none}
.swoosh-world{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d}
.swoosh-tilt-x,.swoosh-tilt-z,.swoosh-plane{position:absolute;left:0;top:0;transform-style:preserve-3d}
.swoosh-tilt-x{animation:swoosh-tilt-x 19.7s ease-in-out infinite alternate both;animation-play-state:paused}
.swoosh-tilt-z{animation:swoosh-tilt-z 27.3s ease-in-out -6s infinite alternate both;animation-play-state:paused}
.swoosh-plane{transform:rotateX(90deg) scale(var(--swoosh-scale))}
/* overflow:clip preserves 3D depth; clip-path on this ancestor would flatten
   the raised inner rim before the horizontal ring transform. */
.swoosh-half{position:absolute;left:-512px;top:-512px;width:1024px;height:512px;overflow:clip;transform-style:preserve-3d}
.swoosh-layer[data-half=front] .swoosh-half{top:0}
.swoosh-reflection .swoosh-half{height:1024px;overflow:visible}
.swoosh-rotor{position:absolute;left:0;top:0;width:1024px;height:1024px;transform-style:preserve-3d;animation:swoosh-orbit 10.8s linear infinite;animation-play-state:paused}
.swoosh-layer[data-half=front] .swoosh-rotor{top:-512px}
.swoosh-facet{position:absolute;transform-origin:50% 100%;backface-visibility:visible;opacity:0;transition:opacity 1.8s ease}
.swoosh-facet::before,.swoosh-facet::after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--swoosh-face-depth);transform:scaleY(var(--swoosh-face-stretch));transform-origin:50% 100%;background:conic-gradient(from calc(0deg - var(--swoosh-face-angle)) at 50% calc(100% - var(--swoosh-face-radius)),transparent 0deg 188deg,#2a7ecb00 208deg,#3864bf33 248deg,#399ed480 292deg,#68daefdd 328deg,#b3edfff2 343.2deg,#55c6e788 352.8deg,transparent 360deg);mask:linear-gradient(to bottom,transparent 56%,#0002 65.333%,#000a 77.333%,#000 84%,#0005 92%,transparent 100%)}
.swoosh-facet::before{opacity:.75;background:conic-gradient(from calc(0deg - var(--swoosh-face-angle)) at 50% calc(100% - var(--swoosh-face-radius)),transparent 0deg 168deg,#555bc600 192deg,#5b69b94d 256deg,#309bd5aa 304deg,#6bd6e9dd 336deg,#45adcf66 352deg,transparent 360deg);mask:linear-gradient(to bottom,transparent 0%,#0002 23.333%,#0007 52%,#000a 70%,#0004 89.333%,transparent 100%)}
body:is(.swoosh-running,.swoosh-fading) :is(.swoosh-layer,.swoosh-reflection){visibility:visible}
body:is(.swoosh-running,.swoosh-fading) .swoosh-tilt-x,body:is(.swoosh-running,.swoosh-fading) .swoosh-tilt-z,body:is(.swoosh-running,.swoosh-fading) .swoosh-rotor{animation-play-state:running;will-change:transform}
body.swoosh-running .swoosh-facet{opacity:1}
@keyframes swoosh-orbit{to{transform:rotate(360deg)}}
@keyframes swoosh-tilt-x{from{transform:rotateX(-5deg)}to{transform:rotateX(5deg)}}
@keyframes swoosh-tilt-z{from{transform:rotateZ(-7deg)}to{transform:rotateZ(7deg)}}
#mobile-swipe-hint{display:none;position:fixed;left:50%;bottom:calc(58px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;width:min(340px,calc(100% - 32px));padding:10px 16px;border:1px solid #72dcff55;border-radius:16px;background:#041320ed;box-shadow:0 5px 22px #0005;color:#e7faff;font-size:12px;line-height:1.5;pointer-events:none;opacity:0}
#mobile-swipe-hint[hidden]{display:none!important}
.swipe-hint-title{text-align:center;color:#9bd8eb;font-size:11px;margin-bottom:3px}
.swipe-hint-directions{display:flex;justify-content:space-between;gap:14px}
@keyframes swipe-hint-reveal{0%{opacity:0;transform:translate(-50%,8px)}10%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-3px)}}
@media(max-width:767px),(pointer:coarse){#mobile-swipe-hint{display:block}#mobile-swipe-hint.is-visible{animation:swipe-hint-reveal 8.5s ease both}}
@media(prefers-reduced-motion:reduce){#mobile-swipe-hint.is-visible{opacity:1;transform:translateX(-50%)}}
@media(max-width:599px),(pointer:coarse),(prefers-reduced-motion:reduce){.swoosh-layer,.swoosh-reflection{display:none!important}}
.firefly-wrap,#fx,.card-reflection{transition:opacity .6s ease}

/* demo-direct.css */
/* Only the direct-content prototype uses this file. */
.direct-card-viewport{container:direct-card / size}
.page-layer .page-frame.direct-page{overflow-x:scroll;overflow-y:hidden;scroll-behavior:auto;scrollbar-gutter:stable;overscroll-behavior:contain;scrollbar-width:auto;scrollbar-color:#87c9df #edf5f8;contain:layout paint style;outline:none;visibility:inherit}
.page-layer .page-frame.direct-page[hidden]{display:none!important}
.page-layer.is-active .direct-page{overflow-y:auto}
.page-layer.is-active .direct-page:focus-visible{outline:2px solid #70dcff;outline-offset:-2px}

/* Keep page layout stable while the camera passes a hidden card. */
.direct-card-viewport.is-culled{opacity:0;pointer-events:none}