/* Vault engine styles (shared by Lovo and the Tidehold demo) */
:root{
  --void:#03040a; --ink:#e9ecff; --dim:#8a90b8;
  --machine:#2f6bff; --human:#8a3dff; --accent:#ffcf5a; --alarm:#ff2846;
  --glass:rgba(14,18,40,.62); --line:rgba(140,160,255,.22);
  --hud:"Rajdhani",system-ui,sans-serif; --serif:"Cinzel",Georgia,serif; --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--void);color:var(--ink);overflow:hidden;font-family:var(--body);-webkit-font-smoothing:antialiased}
body{touch-action:manipulation}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer}

#fx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.75) 100%)}
#alarmglow{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(90% 80% at 50% 50%,transparent 30%,rgba(255,30,60,.55) 100%);mix-blend-mode:screen}
#alarmglow.on{animation:alarm .5s ease-in-out 6}
@keyframes alarm{0%,100%{opacity:0}50%{opacity:1}}
#flash{position:fixed;inset:0;z-index:20;pointer-events:none;background:#fff;opacity:0;transition:opacity .9s ease}
#flash.on{opacity:1;transition:opacity .12s ease}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;text-align:center;background:var(--void);transition:opacity .8s ease}
#gate.gone{opacity:0;pointer-events:none}
#gate .mote{width:84px;height:84px;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 6%,var(--machine) 18%,transparent 62%);
  box-shadow:0 0 60px var(--machine);animation:breathe 2.6s ease-in-out infinite;display:block;margin:0 auto 26px}
#gate .mote:focus-visible{outline:2px solid var(--human);outline-offset:8px}
@keyframes breathe{50%{transform:scale(1.18);box-shadow:0 0 90px var(--human)}}
#gate p{font-family:var(--hud);letter-spacing:.32em;text-transform:uppercase;font-size:.82rem;color:var(--dim)}
#gate small{display:block;margin-top:.8rem;font-family:var(--hud);letter-spacing:.2em;font-size:.68rem;color:#565c84;text-transform:uppercase}

/* ---------- HUD ---------- */
#hud{position:fixed;top:14px;right:14px;z-index:25;display:flex;gap:8px;opacity:0;transition:opacity .6s}
#hud.on{opacity:1}
#hud button{font-family:var(--hud);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;padding:.55rem .8rem;border-radius:999px;
  background:rgba(10,14,32,.55);border:1px solid var(--line);color:#c9d0ff;backdrop-filter:blur(6px)}
#hud button:hover{border-color:var(--human);color:#fff}
#hud button[hidden]{display:none}
#brandmark{position:fixed;left:16px;top:16px;z-index:25;font-family:var(--serif);letter-spacing:.3em;font-size:.78rem;color:#9aa3d8;opacity:0;transition:opacity .8s}
#brandmark.on{opacity:.85}

/* ---------- captions ---------- */
#cap{position:fixed;left:50%;bottom:max(7vh,56px);transform:translateX(-50%);z-index:12;width:min(92vw,760px);text-align:center;
  font-family:var(--hud);font-weight:500;font-size:clamp(1rem,2.4vw,1.35rem);letter-spacing:.06em;color:#dfe4ff;
  text-shadow:0 0 18px rgba(80,110,255,.7);min-height:2.6em;pointer-events:none}
#cap .who{display:block;font-size:.66em;letter-spacing:.42em;color:var(--human);opacity:.9;margin-bottom:.35em;text-transform:uppercase}
#cap .ln{display:none}
#cap .ln.on{display:inline;animation:capin .35s ease}
@keyframes capin{from{opacity:0}to{opacity:1}}

/* ---------- logo seal ---------- */
#seal{position:fixed;z-index:8;left:50%;top:6vh;width:min(46vmin,360px);transform:translate(-50%,0) scale(.85);opacity:0;
  transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.8,.2,1),left 1.6s cubic-bezier(.2,.8,.2,1),top 1.6s cubic-bezier(.2,.8,.2,1),width 1.6s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 0 22px rgba(120,90,255,.55));pointer-events:none}
#seal.show{opacity:1;transform:translate(-50%,0) scale(1)}
#seal.locked{animation:lockglow 1.4s ease-out 1}
@keyframes lockglow{0%{filter:drop-shadow(0 0 0 #fff)}25%{filter:drop-shadow(0 0 60px #fff) brightness(1.8)}100%{filter:drop-shadow(0 0 22px rgba(120,90,255,.55))}}
#seal.companion{left:max(70px,9vw);top:12vh;width:min(24vmin,170px);transform:translate(-50%,0) scale(1);animation:float 5s ease-in-out infinite}
#seal.companion.indoor{opacity:0}
@keyframes float{50%{transform:translate(-50%,-10px) rotate(-2deg)}}
#seal svg{width:100%;height:auto;display:block;overflow:visible}
#seal .spin{transform-origin:200px 200px;animation:spin 60s linear infinite}
#seal .spin.rev{animation-direction:reverse;animation-duration:90s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- door ---------- */
#door{position:fixed;z-index:9;left:50%;top:47%;width:min(76vmin,600px);aspect-ratio:1;transform:translate(-50%,-52%) scale(.7);opacity:0;
  transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#door.show{opacity:1;transform:translate(-50%,-52%) scale(1);pointer-events:auto}
#door svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#door .r1{transform-origin:300px 300px;animation:spin 40s linear infinite}
#door .r2{transform-origin:300px 300px;animation:spin 28s linear infinite reverse}
#door .r3{transform-origin:300px 300px;animation:spin 70s linear infinite}
#door .trace{stroke-dasharray:6 14;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-40}}
#door.alarm .tint{stroke:var(--alarm)!important;fill:none}
#door.alarm .tintf{fill:var(--alarm)!important}
#door.alarm .r1,#door.alarm .r2{animation-duration:2s}
#door.opening .r1,#door.opening .r2,#door.opening .r3{animation-duration:1.2s}
#door.opening .bolt{transform:scale(.2);opacity:0;transition:transform .7s ease-in,opacity .7s}
#door.opened{transform:translate(-50%,-52%) scale(2.6);opacity:0;transition:transform 1.4s cubic-bezier(.6,0,.4,1),opacity 1.2s ease .3s;pointer-events:none}
#door .bolt{transform-box:fill-box;transform-origin:center;transition:transform .5s}

#pad{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(40,60,140,.55),rgba(6,8,22,.92) 70%);border:1px solid var(--line);
  box-shadow:inset 0 0 40px rgba(60,90,255,.35),0 0 40px rgba(60,90,255,.25)}
#pad .scan{position:absolute;inset:8%;border-radius:50%;overflow:hidden;pointer-events:none}
#pad .scan::after{content:"";position:absolute;left:0;right:0;height:18%;top:-20%;background:linear-gradient(transparent,rgba(120,160,255,.55),transparent);opacity:0}
#pad.scanning .scan::after{opacity:1;animation:scan 1.1s linear infinite}
@keyframes scan{to{top:110%}}
#pad button.key{border:0;background:none;display:grid;justify-items:center;gap:.5rem;padding:.8rem;border-radius:18px}
#pad button.key:focus-visible{outline:2px solid var(--human);outline-offset:4px}
#pad svg.print{width:clamp(44px,9vmin,72px);height:auto;position:static}
#pad .lbl{font-family:var(--hud);font-size:clamp(.62rem,1.6vmin,.8rem);letter-spacing:.24em;text-transform:uppercase;color:#cfd6ff}
#pad .sub{font-family:var(--hud);font-size:clamp(.56rem,1.3vmin,.68rem);letter-spacing:.14em;color:var(--dim);margin-top:.15rem}
#door.alarm #pad{box-shadow:inset 0 0 60px rgba(255,40,70,.6),0 0 60px rgba(255,40,70,.5);border-color:var(--alarm)}
#doorlink{position:fixed;left:50%;bottom:3vh;transform:translateX(-50%);z-index:12;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;opacity:0;transition:opacity .8s;pointer-events:none}
#doorlink.on{opacity:1;pointer-events:auto}
#doorlink button{font-family:var(--hud);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:.55rem .9rem;border-radius:999px;background:rgba(10,14,32,.6);border:1px solid var(--line);color:#aeb6e6}
#doorlink button:hover{color:#fff;border-color:var(--human)}

@media (max-width:760px){
  #seal.companion{left:46px;top:9vh;width:84px}
  #hud{top:auto;bottom:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){
  #seal.companion{animation:none}
  #door .r1,#door .r2,#door .r3,#seal .spin{animation:none}
}

/* ---------- living cast (video) ---------- */
#eyes{position:fixed;inset:0;z-index:3;pointer-events:none}
.eye{position:absolute;opacity:0;transition:opacity .7s ease;mix-blend-mode:screen;will-change:transform}
.eye video{width:100%;height:100%;object-fit:cover;display:block;clip-path:ellipse(50% 0% at 50% 50%);transition:clip-path .55s cubic-bezier(.2,.8,.2,1),filter .3s;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.eye.open{opacity:1}
.eye.open video{clip-path:ellipse(50% 44% at 50% 50%)}
.eye.blink video{clip-path:ellipse(50% 3% at 50% 50%);transition-duration:.07s}
.eye.alarm video{filter:sepia(1) saturate(7) hue-rotate(-48deg) brightness(1.15);clip-path:ellipse(50% 48% at 50% 50%)}
#ami{position:fixed;z-index:5;left:50%;top:60%;height:60vh;aspect-ratio:9/16;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;opacity:0;
  transition:left 1.4s cubic-bezier(.2,.8,.2,1),top 1.4s cubic-bezier(.2,.8,.2,1),height 1.4s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
#ami video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease}
#ami video.on{opacity:1}

/* ===== L.O.V.E.-O wordmark: metal letters, gem dots, the hyphen is a bar of light ===== */
.wm{display:inline-flex;flex-direction:column;align-items:center;gap:.35em;line-height:1;vertical-align:middle}
.wm .wl{display:inline-flex;align-items:center;font-family:Orbitron,Rajdhani,sans-serif;font-weight:900;letter-spacing:.04em}
.wm b{font-weight:900;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),linear-gradient(180deg,#ffffff 0%,#c9d3ff 38%,#5a63a3 52%,#b8c4f2 68%,#8f74ff 100%);
  background-size:300% 100%,100% 100%;background-position:180% 0,0 0;animation:wmsheen 6s ease-in-out infinite;animation-delay:calc(var(--k) * 90ms);
  filter:drop-shadow(0 0 .12em rgba(120,140,255,.55)) drop-shadow(0 .06em 0 rgba(0,0,0,.6))}
@keyframes wmsheen{0%,55%{background-position:180% 0,0 0}85%,100%{background-position:-80% 0,0 0}}
.wm .wd{display:inline-block;position:relative;top:.27em;width:.2em;height:.2em;margin:0 .07em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#5fb3ff 45%,#1b3fbf 100%);box-shadow:0 0 .25em #4aa8ff,0 0 .6em rgba(74,168,255,.5);animation:wmgem 3.2s ease-in-out infinite;animation-delay:calc(var(--k) * 160ms)}
.wm .wd:nth-of-type(even){background:radial-gradient(circle at 35% 30%,#fff,#ffcf5a 45%,#a35a00 100%);box-shadow:0 0 .25em #ffcf5a,0 0 .6em rgba(255,190,80,.5)}
@keyframes wmgem{50%{transform:scale(1.35);filter:brightness(1.5)}}
.wm .wh{display:inline-block;position:relative;width:.62em;height:.13em;margin:0 .12em;border-radius:.1em;overflow:hidden;
  background:linear-gradient(90deg,#4aa8ff,#fff4d6 50%,#ffcf5a);box-shadow:0 0 .3em #fff4d6,0 0 .9em rgba(255,244,214,.7)}
.wm .wh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translateX(-100%);animation:wmbar 2.6s ease-in-out infinite}
@keyframes wmbar{60%,100%{transform:translateX(100%)}}
.wm small{font-family:Rajdhani,sans-serif;font-weight:600;font-size:.26em;letter-spacing:.32em;text-transform:uppercase;color:#aeb7e6;white-space:nowrap}

/* the real seal, alive: aura breathes, a ring of light turns, the eye's star flares, light sweeps across */
.rseal{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.rseal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;z-index:1}
.rseal .rs-aura{position:absolute;inset:-14%;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(138,61,255,.45),rgba(47,107,255,.18) 45%,transparent 68%);animation:rsaura 5s ease-in-out infinite}
@keyframes rsaura{50%{transform:scale(1.08);opacity:.65}}
.rseal .rs-ring{position:absolute;inset:-3%;z-index:2;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(159,180,255,.0) 80%,rgba(200,215,255,.85) 86%,rgba(255,244,214,.95) 87%,transparent 90% 100%);
  -webkit-mask:radial-gradient(circle,transparent 66%,#000 67%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 66%,#000 67%,#000 70%,transparent 71%);
  animation:spin 7s linear infinite;mix-blend-mode:screen}
.rseal .rs-star{position:absolute;left:50%;top:50.5%;width:22%;height:22%;z-index:3;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,230,.95) 0,rgba(255,214,120,.55) 22%,transparent 62%);mix-blend-mode:screen;animation:rsstar 3.4s ease-in-out infinite}
@keyframes rsstar{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.8)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
.rseal .rs-sheen{position:absolute;inset:6%;z-index:4;border-radius:50%;overflow:hidden;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);background-size:300% 100%;animation:rssheen 7s ease-in-out infinite}
@keyframes rssheen{0%,60%{background-position:150% 0}90%,100%{background-position:-50% 0}}
#seal .rs-wm{text-align:center;margin-top:-2%;font-size:clamp(1.6rem,6.2vmin,3rem);transition:opacity .5s}
#seal.companion .rs-wm{opacity:0;height:0;overflow:hidden}
#seal.companion .rseal .rs-ring{animation-duration:12s}
#brandmark .wm{font-size:1.05rem;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.wm b,.wm .wd,.wm .wh::after,.rseal i{animation:none!important}}

/* Square door artwork (e.g. the Royal Rose Window): fade the film's square corners into the dark */
#door.machine.square .didle{filter:contrast(1.14) brightness(.97);-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
#door.machine.square .dopen{-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}