/* ODIGITAL preloader — automation tiles assemble into the wordmark, then the screen splits open on the hero. */
html.odp-active{overflow:hidden}
html.odp-active body::before{content:'';position:fixed;inset:0;z-index:2147483000;background:#020a29;animation:odp-safety .01s linear 4s forwards}

.odp{
  --u:640px;--mx:0;--my:0;
  --t:clamp(58px,calc(var(--u) * .14),118px);
  --r:calc(var(--u) * .4);
  --plane:58deg;
  position:fixed;inset:0;z-index:2147483001;overflow:hidden;
  background:#020a29;color:#f4f0e8;
  font-family:Rubik,Arial,sans-serif;
  cursor:pointer;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.odp *,.odp *::before,.odp *::after{box-sizing:border-box}
.odp[data-phase="split"],.odp[data-phase="open"]{background:transparent}
.odp[data-phase="open"]{pointer-events:none}

/* ---- backdrop ---- */
.odp-stage,.odp-bg{position:absolute;inset:0}
.odp-bg{background:radial-gradient(ellipse at 50% 50%,rgba(36,107,254,.14),transparent 62%),#020a29}
.odp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(143,169,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(143,169,255,.08) 1px,transparent 1px);background-size:64px 64px;background-position:center;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 72%)}
.odp-spot{position:absolute;inset:-20%;background:radial-gradient(closest-side at calc(50% + var(--mx) * 5%) calc(50% + var(--my) * 5%),rgba(127,166,255,.1),rgba(127,166,255,.03) 55%,transparent)}
.odp-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(1,6,32,.72) 100%)}

/* ---- camera + orbit ---- */
.odp-cam{position:absolute;inset:0;perspective:calc(var(--u) * 2.4);perspective-origin:50% 50%;transition:opacity .25s ease}
.odp-rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(calc(var(--plane) + var(--my) * -6deg)) rotateZ(calc(var(--mx) * 8deg))}
.odp-ring,.odp-counter,.odp-billboard,.odp-bob,.odp-tile{position:absolute;inset:0;transform-style:preserve-3d}
.odp-ring{inset:auto;animation:odp-spin 46s linear infinite}
.odp-slot{
  position:absolute;left:calc(var(--t) * -.5);top:calc(var(--t) * -.5);width:var(--t);height:var(--t);
  transform-style:preserve-3d;
  transform:rotateZ(var(--a)) translateY(calc(var(--r) * -1)) rotateZ(calc(var(--a) * -1)) scale(1);
  transition:transform 1s cubic-bezier(.65,0,.25,1) calc(var(--i) * 60ms);
}
.odp-counter{animation:odp-spin 46s linear infinite reverse}
.odp-billboard{transform:rotateX(calc(var(--plane) * -1))}
.odp-bob{animation:odp-bob 5s ease-in-out infinite alternate}
.odp-tile{--lit:0;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}

.odp-layer,.odp-face{position:absolute;inset:0;border-radius:24%}
.odp-layer{background:linear-gradient(200deg,#0d1d4d,#040c2c 60%,#26407f);transform:translateZ(calc(var(--t) * -.035 * var(--k)))}
.odp-face{
  display:grid;place-items:center;transform:translateZ(.5px);
  background:linear-gradient(150deg,#13245c 0%,#0b1b49 45%,#07133a 100%);
  border:1px solid rgba(143,169,255,calc(.14 + var(--lit) * .26));
  box-shadow:inset 0 1px 0 rgba(244,240,232,.08),0 18px 40px rgba(1,6,32,.45);
}
.odp-face::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at calc(30% - var(--mx) * 20%) calc(24% - var(--my) * 20%),rgba(127,166,255,.28),transparent 62%);opacity:calc(.25 + var(--lit) * .75)}
.odp-face svg{position:relative;width:46%;height:46%;fill:none;stroke:#f4f0e8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:calc(.28 + var(--lit) * .72)}
.odp-face .odp-accent{stroke:#8fdcff}
/* no overflow:hidden on the 3D face (Chrome drops whole tiles); the band is clipped by its own box instead */
.odp-sweep{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 40%,rgba(244,240,232,.18) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:100% 0}
.odp-tile[data-lit="1"] .odp-sweep{animation:odp-sweep 1.1s cubic-bezier(.3,0,.2,1) forwards}

/* tiles rack in from soft focus, then dissolve into the wordmark */
.odp-leaf{animation:odp-rack 1.2s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.1s + var(--i) * .09s);transition:opacity .5s ease}
.odp:is([data-phase="converge"],[data-phase="hold"],[data-phase="line"]) .odp-slot{transform:rotateZ(var(--a)) translateY(0) rotateZ(calc(var(--a) * -1)) scale(.35)}
.odp:is([data-phase="converge"],[data-phase="hold"],[data-phase="line"]) .odp-leaf{opacity:0;transition-delay:calc(.45s + var(--i) * 50ms)}

.odp-flash{position:absolute;left:50%;top:50%;width:calc(var(--u) * .9);height:calc(var(--u) * .9);margin:calc(var(--u) * -.45) 0 0 calc(var(--u) * -.45);border-radius:50%;background:radial-gradient(closest-side,rgba(127,166,255,.2),rgba(127,166,255,.05) 45%,transparent);opacity:0;transform:scale(.3)}
.odp[data-phase="converge"] .odp-flash{animation:odp-flash 1.4s cubic-bezier(.2,.7,.2,1) .5s both}

/* ---- wordmark: centred on the split line so the cut runs through it ---- */
.odp-logo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.odp-word{margin:0;direction:ltr;font-size:clamp(44px,calc(var(--u) * .13),128px);font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:#f4f0e8}
.odp-letter{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.18em)}
.odp-letter--o{color:transparent;background:linear-gradient(135deg,#7fa6ff,#8fdcff);-webkit-background-clip:text;background-clip:text}
.odp:is([data-phase="converge"],[data-phase="hold"],[data-phase="line"]) .odp-letter{animation:odp-letter .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.5s + var(--i) * .06s)}
.odp-caption{position:absolute;left:0;right:0;top:calc(50% + clamp(44px,calc(var(--u) * .13),128px) * .5 + clamp(18px,calc(var(--u) * .035),34px));margin:0;text-align:center;font-size:clamp(15px,calc(var(--u) * .022),18px);font-weight:500;letter-spacing:.06em;color:#aeb8d4;opacity:0;transition:opacity .8s ease}
.odp:is([data-phase="hold"],[data-phase="line"]) .odp-caption{opacity:1}

.odp.is-rushed .odp-letter{animation:none;opacity:1;filter:none;transform:none}
.odp.is-rushed .odp-cam,.odp.is-rushed .odp-flash{opacity:0}

/* ---- the split: a line draws across, then the two halves part ---- */
.odp-line{position:absolute;left:0;right:0;top:50%;z-index:3;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,rgba(244,240,232,.85) 18%,#f4f0e8 50%,rgba(244,240,232,.85) 82%,transparent);box-shadow:0 0 14px rgba(143,220,255,.35);transform:scaleX(0);opacity:0;pointer-events:none}
.odp[data-phase="line"] .odp-line{transform:scaleX(1);opacity:1;transition:transform .28s cubic-bezier(.3,0,.2,1),opacity .12s ease}

.odp-half{position:absolute;inset:0;visibility:hidden;pointer-events:none;will-change:transform}
.odp-half--top{clip-path:inset(0 0 50% 0)}
.odp-half--bottom{clip-path:inset(50% 0 0 0)}
.odp-half::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(244,240,232,.7);box-shadow:0 0 10px rgba(143,220,255,.3)}
.odp-half--top::after{top:calc(50% - 1px)}
.odp-half--bottom::after{top:50%}
.odp-half .odp-letter{animation:none;opacity:1;filter:none;transform:none}
.odp-half .odp-caption{opacity:1;transition:none}
.odp:is([data-phase="split"],[data-phase="open"]) .odp-stage{visibility:hidden}
.odp:is([data-phase="split"],[data-phase="open"]) .odp-half{visibility:visible}
.odp[data-phase="open"] .odp-half{transition:transform .82s cubic-bezier(.7,0,.2,1)}
.odp[data-phase="open"] .odp-half--top{transform:translateY(-50.5%)}
.odp[data-phase="open"] .odp-half--bottom{transform:translateY(50.5%)}

/* ---- reduced motion: the wordmark, then a short fade ---- */
.odp[data-motion="reduced"] .odp-cam,.odp[data-motion="reduced"] .odp-flash{display:none}
.odp[data-motion="reduced"] .odp-letter{animation:none;opacity:1;filter:none;transform:none}
.odp[data-motion="reduced"] .odp-caption{opacity:1}
.odp[data-phase="fade"]{opacity:0;transition:opacity .45s ease;pointer-events:none}

.odp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes odp-spin{to{transform:rotateZ(360deg)}}
@keyframes odp-bob{from{transform:translate3d(0,calc(var(--u) * -.008),0)}to{transform:translate3d(0,calc(var(--u) * .008),calc(var(--u) * .015))}}
@keyframes odp-rack{from{opacity:0;filter:blur(12px)}}
@keyframes odp-sweep{to{background-position:0 0}}
@keyframes odp-flash{0%{opacity:0;transform:scale(.3)}35%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes odp-letter{to{opacity:1;filter:blur(0);transform:none}}
@keyframes odp-safety{to{visibility:hidden;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .odp-ring,.odp-counter,.odp-bob,.odp-leaf{animation:none}
}