/* WITH @DAVARA — loader → live view-count → reveal video → eyes video → davara.dev
   Davara Distinct: indigo void, violet as Davara's own light, rationed signal-cyan,
   slow legible mechanical motion. Glow, never highlight. */

:root{
  --ink:#eaf2ff; --void:#05060a;
  --cy:#22e0f0; --cy2:#3aa0ff; --vi:#b48bff; --vi2:#7d6cff; --gold:#ffe6a3;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%; background:#000; color:var(--ink);
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* ════════ PHASE 1 — LOADER ════════ */
#loader{ position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(180,139,255,.14), transparent 55%),
    radial-gradient(110% 80% at 50% 110%, rgba(34,224,240,.10), transparent 58%),
    #05060a;
  transition:opacity .7s ease, filter .7s ease, transform .7s ease; }
#loader.dissolve{ opacity:0; filter:blur(16px); transform:scale(1.09); pointer-events:none; }
#fld{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

.core{ position:relative; z-index:2; display:grid; place-items:center;
  width:min(76vw,380px); aspect-ratio:1; }
.ring{ position:absolute; inset:0; border-radius:50%; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.ring .trk{ fill:none; stroke:rgba(125,108,255,.16); stroke-width:2; }
.ring .arc{ fill:none; stroke:url(#g); stroke-width:3.4; stroke-linecap:round;
  filter:drop-shadow(0 0 11px rgba(125,108,255,.85)); transition:stroke-dashoffset .12s linear; }
.spin{ position:absolute; inset:6%; border-radius:50%;
  border:1px solid transparent; border-top-color:rgba(180,139,255,.55);
  border-right-color:rgba(34,224,240,.28); animation:spin 2.6s linear infinite; }
.spin.b{ inset:14%; animation-duration:4s; animation-direction:reverse;
  border-top-color:rgba(34,224,240,.42); border-right-color:rgba(180,139,255,.26); }
@keyframes spin{ to{ transform:rotate(360deg);} }

.coreInner{ position:relative; z-index:3; display:grid; place-items:center; text-align:center; }
.pulse{ position:absolute; width:50%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(180,139,255,.30), rgba(180,139,255,0) 68%);
  animation:pulse 2.3s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(.82); opacity:.55;} 50%{ transform:scale(1.14); opacity:1;} }
.mark{ position:relative; font-weight:800; letter-spacing:.34em; font-size:clamp(22px,6vw,34px);
  background:linear-gradient(180deg,#fff,#dcd2ff 55%,#a9c8ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 28px rgba(180,139,255,.4); padding-left:.34em; }
.mark::after{ content:""; position:absolute; left:0; top:-6px; bottom:-6px; width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  mix-blend-mode:screen; filter:blur(2px); animation:scan 2.4s ease-in-out infinite; }
@keyframes scan{ 0%{ transform:translateX(-40%); opacity:0;} 35%{opacity:.9;} 70%,100%{ transform:translateX(310%); opacity:0;} }
.sub{ margin-top:.5em; font:600 9.5px/1 'JetBrains Mono',monospace; letter-spacing:.46em;
  color:rgba(180,200,230,.62); padding-left:.46em; }
.pct{ margin-top:.95em; font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.30em;
  color:rgba(180,139,255,.92); text-shadow:0 0 14px rgba(125,108,255,.5); }

.status{ position:absolute; bottom:14vh; z-index:3; width:100%; text-align:center; padding:0 6vw;
  font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(180,200,230,.72); }
.status b{ color:rgba(180,139,255,.95); font-weight:500; }
.bar{ position:absolute; bottom:11vh; z-index:3; width:min(62vw,340px); height:2px;
  background:rgba(125,108,255,.16); border-radius:2px; overflow:hidden; }
.bar i{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--vi),var(--cy));
  box-shadow:0 0 12px rgba(125,108,255,.8); transition:width .12s linear; }

/* ════════ PHASE 2 — VIEW COUNT ════════ */
#count{ position:fixed; inset:0; z-index:25; display:grid; place-items:center; text-align:center;
  padding:24px; opacity:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(180,139,255,.16), transparent 60%),
    #04050a;
  transition:opacity .8s ease; }
#count.on{ opacity:1; }
#count.out{ opacity:0; filter:blur(10px); }
.cwrap{ position:relative; transform:translateY(8px); opacity:0;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease; }
#count.on .cwrap{ transform:translateY(0); opacity:1; }
.ctag{ font:600 11px/1 'JetBrains Mono',monospace; letter-spacing:.40em; text-transform:uppercase;
  color:rgba(34,224,240,.85); margin-bottom:.7em; text-shadow:0 0 16px rgba(34,224,240,.4); }
.cnum{ font-weight:800; line-height:.92; font-size:clamp(64px,22vw,170px); letter-spacing:.01em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  background:linear-gradient(180deg,#fff,#dcd2ff 52%,#7fdfff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(125,108,255,.45); }
.csub{ margin-top:.5em; font:500 13px/1.5 'JetBrains Mono',monospace; letter-spacing:.14em;
  color:rgba(180,200,230,.66); }
.csub span{ color:rgba(180,139,255,.95); }

/* ════════ PHASE 3+4 — CINEMA ════════ */
#stage{ position:fixed; inset:0; background:#000; z-index:10; opacity:0;
  transition:opacity .7s ease; }
#stage.show{ opacity:1; }
#stage.fadeblack{ opacity:0; }
.cv{ position:absolute; inset:0; width:100%; height:100%; background:#000;
  opacity:0; transition:opacity .9s ease; }
#vidA{ object-fit:cover; transform:scale(1.06); transition:opacity .9s ease, transform 1.2s ease; }
#stage.show #vidA{ transform:scale(1); }
#vidB{ object-fit:contain; }      /* square video — whole frame, centered on black */
.cv.on{ opacity:1; }
@media (orientation:portrait){ #vidA{ object-fit:contain; } }

/* unmute hint + skip */
#snd,#skip{ position:fixed; z-index:40;
  font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.16em;
  color:rgba(234,242,255,.6); background:rgba(8,12,24,.45);
  border:1px solid rgba(180,139,255,.26); border-radius:999px;
  padding:9px 15px; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .5s ease,color .2s,border-color .2s,transform .15s; backdrop-filter:blur(8px); }
#snd{ left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%); }
#skip{ right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); }
#snd.on,#skip.on{ opacity:1; pointer-events:auto; }
#snd:hover,#skip:hover{ color:#fff; border-color:rgba(180,139,255,.6); }
#snd:active,#skip:active{ transform:translateX(-50%) scale(.95); }
#skip:active{ transform:scale(.95); }

@media (prefers-reduced-motion:reduce){
  .spin,.pulse,.mark::after{ animation:none !important; }
  .cv,#stage,#loader,#count,.cwrap{ transition-duration:.2s !important; }
}