/* Ποδαρικό — εισαγωγή «πόρτα»: μπορντό πόρτα, σαμπανί μπρούτζος, ζεστός σοβάς.
   Ένα ρολόι για πόρτα, πατήματα και λογότυπο (~1 δευτ.), και στο τέλος η κάμερα περνά μέσα από την πόρτα. */
#bootsplash{--bs-wall:#f4eee5;--bs-frame:#e8dece;--bs-lift:-26px;--bs-zoom:1;position:fixed;inset:0;z-index:9998;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#fffaf3 0%,transparent 68%),var(--bs-wall);pointer-events:auto;isolation:isolate;cursor:pointer;transition:opacity .38s ease}
#bootsplash *,#bootsplash *::before,#bootsplash *::after{box-sizing:border-box}
#bootsplash .bs-scene{position:relative;aspect-ratio:.53;height:min(360px,49vh);transform:translateY(var(--bs-lift)) scale(var(--bs-zoom));transition:transform .46s cubic-bezier(.55,0,1,.45);perspective:none}
#bootsplash .bs-scene::after{content:"";position:absolute;z-index:-1;left:-80%;right:-80%;bottom:-28px;height:50px;background:radial-gradient(ellipse,#4b302f30,transparent 67%);filter:blur(8px)}
#bootsplash .bs-frame{position:absolute;inset:0;border:1px solid #bba783;border-bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#d4c5ae,var(--bs-frame) 5%,#fff8eb 9%,var(--bs-frame) 13%,var(--bs-frame) 87%,#c8b696 95%,#ede3d2);padding:7px 7px 0;box-shadow:0 15px 35px -22px #35211d70}
#bootsplash .bs-frame::before{content:"";position:absolute;inset:3px 3px 0;border:1px solid #a18b6755;border-bottom:0;pointer-events:none}
#bootsplash .bs-opening{position:relative;width:100%;height:100%;box-shadow:inset 0 0 22px #60431b48;perspective:1200px;overflow:hidden;background:linear-gradient(90deg,#e0d0b6,#fffaf0 38%,#f6ead5);transform-style:flat;isolation:isolate}
#bootsplash .bs-door{position:absolute;inset:0;z-index:2;transform-origin:0 50%;backface-visibility:hidden;border:1px solid #3b1720;box-shadow:inset 2px 0 1px #c6818350,inset -3px 0 3px #28101c70,3px 1px 8px #27101b65;transform-style:preserve-3d;background:linear-gradient(100deg,#592334,#713144 48%,#542332);will-change:transform}
#bootsplash .bs-door::before{content:"";position:absolute;inset:8px;border:1px solid #d3ad7040;box-shadow:inset 0 0 0 2px #a2526020}
#bootsplash .bs-panel{position:absolute;border:1px solid #b78e7555;background:linear-gradient(110deg,#43172438,#873d4920)}
#bootsplash .bs-panel-bottom{top:67%;bottom:9%;left:17%;right:17%;box-shadow:inset 1px 2px 4px #260f2040,1px 1px #d2a39735}
#bootsplash .bs-window{position:absolute;top:8%;left:18%;right:18%;height:39%;border:3px solid #bb9962;border-radius:36% 36% 2px 2px;background:linear-gradient(115deg,#eedac66b,#fff6e4bb 35%,#c8b49788 72%,#fff2dbb0);box-shadow:0 0 0 3px #32182366,inset 0 0 0 1px #fff6da80,inset 0 8px 22px #714b4855;overflow:hidden}
#bootsplash .bs-window::before{content:"";position:absolute;inset:6px;border:1px solid #fff4d881;border-radius:34% 34% 0 0}
#bootsplash .bs-window::after{content:"";position:absolute;left:-30%;top:-10%;height:120%;width:50%;transform:skew(-23deg);background:linear-gradient(90deg,transparent,#fff8ed60,transparent)}
#bootsplash .bs-window i{position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:#af8d60;box-shadow:1px 0 #fff2ce99}
#bootsplash .bs-window b{position:absolute;left:0;right:0;top:49%;height:2px;background:#af8d60;box-shadow:0 1px #fff2ce99}
#bootsplash .bs-knocker{position:absolute;left:calc(50% - 8px);top:52%;width:16px;height:22px;border:2px solid #d0ad72;border-radius:45%;box-shadow:0 2px 3px #29101b70}
#bootsplash .bs-knocker::before{content:"";position:absolute;top:-4px;left:3px;width:6px;height:6px;border-radius:50%;background:#e9cc94}
#bootsplash .bs-handle{position:absolute;right:9%;top:58%;width:8px;height:34px;border-radius:3px;background:linear-gradient(90deg,#ab874d,#ffe6b5 45%,#b99258);box-shadow:1px 2px 3px #2b101b90}
#bootsplash .bs-handle::before{content:"";position:absolute;top:9px;right:1px;width:25px;height:5px;border-radius:3px;background:linear-gradient(#fff0c8,#cda967 48%,#8b6436);box-shadow:0 3px 3px #29121b80}
#bootsplash .bs-handle::after{content:"";position:absolute;bottom:6px;left:3px;width:3px;height:5px;border-radius:50%;background:#584329}
#bootsplash .bs-hinge{position:absolute;left:-2px;width:4px;height:18px;border-radius:2px;background:linear-gradient(90deg,#977244,#ead3a4,#927046)}
#bootsplash .bs-hinge-top{top:18%}
#bootsplash .bs-hinge-bottom{bottom:19%}
#bootsplash .bs-threshold{position:absolute;bottom:-5px;left:-7px;right:-7px;height:8px;border:1px solid #c5b28f;background:linear-gradient(#fff5df,#c9bda6);box-shadow:0 3px 5px #573f3520}
/* Το λογότυπο ζει πίσω από την πόρτα: το άνοιγμα το αποκαλύπτει. */
#bootsplash .bs-depth{position:absolute;z-index:1;left:16%;top:37%;width:78%;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
#bootsplash .bs-depth img{display:block;width:100%;height:auto}
#bootsplash .bs-floor{position:absolute;z-index:4;left:50%;top:86%;width:100%;height:100%;transform-origin:50% 0;transform:translateX(-50%) perspective(1600px) rotateX(72deg);transform-style:preserve-3d;pointer-events:none}
#bootsplash .floor-step{position:absolute;left:calc(50% + var(--lane));top:var(--distance);width:18px;height:44px;transform:translate(-50%,-50%) rotate(var(--turn));color:#967045;opacity:0;filter:drop-shadow(0 .3px .35px #5e412e1a)}
#bootsplash .floor-step.right svg{transform:scaleX(-1)}
#bootsplash .floor-step svg{width:100%;height:100%;overflow:visible}
#bootsplash .tread{stroke:#ede0c5;stroke-width:.7;opacity:.5;fill:none}

/* Άνοιγμα */
#bootsplash.is-opening .bs-door{animation:floorDoor .76s cubic-bezier(.42,0,.3,1) both}
#bootsplash.is-opening .bs-depth{animation:floorLogoDepth .98s linear both,floorLogoFade .98s cubic-bezier(.55,0,.85,.4) both}
#bootsplash.is-opening .floor-step{animation:floorContact .44s var(--delay) ease-in-out both}
#bootsplash.is-opening .floor-step .forefoot{animation:toeContact .44s calc(var(--delay) + .018s) ease-in-out both}
@keyframes floorDoor{from{transform:rotateY(0deg);filter:brightness(1)}to{transform:rotateY(86deg);filter:brightness(.84)}}
@keyframes floorLogoDepth{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-16px,0) scale(.55)}}
@keyframes floorLogoFade{from{opacity:1}to{opacity:0}}
@keyframes floorContact{0%{opacity:0}8%{opacity:.42}20%,52%{opacity:.62}100%{opacity:0}}
@keyframes toeContact{0%{opacity:0}12%,65%{opacity:1}100%{opacity:0}}

/* Πέρασμα μέσα από την πόρτα και σβήσιμο */
#bootsplash.is-gone{--bs-zoom:2.2;opacity:0;pointer-events:none}

html[data-theme="dark"] #bootsplash{--bs-wall:#28242a;--bs-frame:#776657;background:radial-gradient(ellipse at 50% 36%,#504039,transparent 70%),var(--bs-wall)}
html[data-theme="dark"] #bootsplash .bs-frame{background:linear-gradient(90deg,#584939,#b69a72 8%,#796551 14%,#796551 86%,#ae9168 94%,#4b3d31);border-color:#a58a60}
html[data-theme="dark"] #bootsplash .bs-scene::after{background:radial-gradient(ellipse,#0f0b1090,transparent 67%)}
html[data-theme="dark"] #bootsplash .floor-step{color:#bd985c}
@media(max-width:600px){#bootsplash .bs-scene{height:280px}}
@media(max-height:480px){#bootsplash{--bs-lift:-12px}#bootsplash .bs-scene{height:49vh;height:49svh}}
@media(prefers-reduced-motion:reduce){#bootsplash{transition:opacity .12s}#bootsplash .bs-scene{transition:none}#bootsplash.is-gone{--bs-zoom:1}#bootsplash.is-opening .bs-door{animation:none}#bootsplash .floor-step,#bootsplash .bs-depth{animation:none!important;display:none}}