/* Curiovex cinematic intro: plays once per session when landing on the homepage.
   A line of light opens the screen, a boot log and HUD load, the mark draws itself,
   the name decodes, circuit traces fire outward and the screen splits open onto the site. */
#cvx-intro,.ci-skip{display:none}
html.cvx-intro-on #cvx-intro,#cvx-intro.ci-active{display:block}
#cvx-intro{position:fixed;inset:0;z-index:2147483000;overflow:hidden;color:#cfe9dc;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);cursor:progress;-webkit-font-smoothing:antialiased;--ci-mint:#5ef2a4;--ci-teal:#2ee6d6;--ci-violet:#a78bfa;--ci-dim:#8aa99b}
/* If the script never runs, get out of the way after a few seconds. */
html.cvx-intro-on #cvx-intro{animation:ci-failsafe .01s 8s forwards}
@keyframes ci-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
html.cvx-intro-on,html.cvx-intro-on body{overflow:hidden}
.ci.ci-open{pointer-events:none;cursor:auto}

/* The page waits behind the intro: slightly zoomed, blurred and paused. */
html.cvx-intro-on #main-content{transform:scale(1.07);filter:blur(10px) brightness(.5)}
html.cvx-revealing #main-content{transition:transform 1.35s cubic-bezier(.2,.8,.1,1),filter 1.1s ease}
html.cvx-intro-on .cvw-page *,html.cvx-intro-on .cvw-page *::before,html.cvx-intro-on .cvw-page *::after{animation-play-state:paused!important}

/* Two halves that split apart along the line of light */
.ci-panel{position:absolute;left:0;right:0;height:50.2%;background:#020403;z-index:1;will-change:transform}
.ci-top{top:0}.ci-bot{bottom:0}
.ci-top::after,.ci-bot::after{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ci-mint) 28%,#f0fff7 50%,var(--ci-teal) 72%,transparent);box-shadow:0 0 18px var(--ci-mint),0 0 46px var(--ci-teal);opacity:0;transition:opacity .25s}
.ci-top::after{bottom:0}.ci-bot::after{top:0}
.ci.ci-open .ci-top::after,.ci.ci-open .ci-bot::after{opacity:1}
.ci.ci-open .ci-top{transform:translateY(-101%);transition:transform 1s cubic-bezier(.77,0,.18,1)}
.ci.ci-open .ci-bot{transform:translateY(101%);transition:transform 1s cubic-bezier(.77,0,.18,1)}

/* Opening line of light */
.ci-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:5;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--ci-mint) 25%,#f0fff7 50%,var(--ci-teal) 75%,transparent);box-shadow:0 0 14px var(--ci-mint),0 0 34px var(--ci-teal)}
.ci.ci-run .ci-line{animation:ci-line 1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes ci-line{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.ci.ci-open .ci-line{opacity:0!important}

/* Circuit traces canvas */
.ci-traces{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;transition:opacity .35s}
.ci.ci-open .ci-traces{opacity:0}

/* HUD layer */
.ci-hud{position:absolute;inset:0;z-index:3;transition:opacity .3s}
.ci.ci-open .ci-hud{opacity:0}
.ci-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(94,242,164,.16) 1px,transparent 1.6px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);opacity:0}
.ci-glow{position:absolute;left:50%;top:46%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;background:radial-gradient(circle,rgba(46,230,214,.16),rgba(94,242,164,.06) 40%,transparent 68%);opacity:0}
.ci.ci-run .ci-grid{animation:ci-fade 1s .15s forwards}
.ci.ci-run .ci-glow{animation:ci-fade 1.4s .9s forwards}
@keyframes ci-fade{to{opacity:1}}
.ci-corner{position:absolute;width:26px;height:26px;border:0 solid var(--ci-mint);opacity:0;filter:drop-shadow(0 0 6px rgba(94,242,164,.6))}
.ci-corner.tl{top:22px;left:22px;border-top-width:2px;border-left-width:2px;--ci-dx:-30px;--ci-dy:-30px}
.ci-corner.tr{top:22px;right:22px;border-top-width:2px;border-right-width:2px;--ci-dx:30px;--ci-dy:-30px}
.ci-corner.bl{bottom:22px;left:22px;border-bottom-width:2px;border-left-width:2px;--ci-dx:-30px;--ci-dy:30px}
.ci-corner.br{bottom:22px;right:22px;border-bottom-width:2px;border-right-width:2px;--ci-dx:30px;--ci-dy:30px}
.ci.ci-run .ci-corner{animation:ci-corner .6s .3s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes ci-corner{from{opacity:0;transform:translate(var(--ci-dx),var(--ci-dy))}to{opacity:1;transform:none}}
.ci-topbar{position:absolute;top:28px;left:66px;right:66px;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.18em;color:var(--ci-dim);text-transform:uppercase;opacity:0}
.ci-topbar b{color:#d8f5e7;font-weight:600}
.ci-topbar i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ci-mint);margin-right:10px;box-shadow:0 0 10px var(--ci-mint);animation:ci-blink 1s steps(2) infinite}
@keyframes ci-blink{50%{opacity:.2}}
.ci.ci-run .ci-topbar{animation:ci-fade .5s .35s forwards}
.ci-log{position:absolute;left:66px;top:24%;font-size:13px;line-height:2.1;color:var(--ci-dim);letter-spacing:.06em;white-space:pre}
.ci-ln{opacity:0;display:flex;gap:10px}
.ci-ln.on{opacity:1}
.ci-ln b{color:var(--ci-mint);font-weight:600;opacity:0;text-shadow:0 0 10px rgba(94,242,164,.7)}
.ci-ln.ok b{opacity:1}
.ci-ln.ok .ci-t{color:#a9c4b7}
.ci-count{position:absolute;left:66px;bottom:56px}
.ci-count b{display:block;font:700 clamp(58px,8vw,116px)/.9 var(--font,system-ui,sans-serif);letter-spacing:-.04em;color:#f3fbf7;font-variant-numeric:tabular-nums}
.ci-count b small{font-size:.32em;color:var(--ci-dim);margin-left:.25em;letter-spacing:0}
.ci-status{display:block;margin-top:12px;font-size:12px;letter-spacing:.24em;color:var(--ci-dim)}
.ci.ci-granted .ci-status{color:var(--ci-mint);text-shadow:0 0 12px rgba(94,242,164,.8)}
.ci-segs{position:absolute;right:66px;bottom:64px;display:flex;gap:5px}
.ci-segs i{display:block;width:9px;height:28px;border-radius:2px;background:rgba(255,255,255,.07);transition:background .15s,box-shadow .15s}
.ci-segs i.on{background:var(--ci-mint);box-shadow:0 0 10px rgba(94,242,164,.7)}
.ci.ci-granted .ci-segs i.on{background:#f0fff7}
.ci-sid{position:absolute;right:66px;bottom:106px;font-size:11px;letter-spacing:.2em;color:var(--ci-dim)}

/* Centre: the mark draws itself, the name decodes */
.ci-center{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;transition:transform 1s cubic-bezier(.7,0,.2,1),opacity .7s ease,filter .7s}
.ci.ci-open .ci-center{transform:scale(2.4);opacity:0;filter:blur(6px)}
.ci-core{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:-4vh}
.ci-mark{width:clamp(92px,12vw,148px);height:auto;overflow:visible}
.ci-mark path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ci-hex{stroke:url(#ci-metal);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1}
.ci-v{stroke:url(#ci-neon);stroke-width:10;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(94,242,164,.9)) drop-shadow(0 0 18px rgba(46,230,214,.5))}
.ci-mark .ci-spark{fill:#fff;stroke:none!important;transform-box:fill-box;transform-origin:center;transform:scale(0) rotate(-90deg);filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--ci-teal))}
.ci.ci-run .ci-hex{animation:ci-draw .6s .45s cubic-bezier(.6,0,.2,1) forwards}
.ci.ci-run .ci-v{animation:ci-draw .4s .85s cubic-bezier(.7,0,.2,1) forwards}
.ci.ci-run .ci-spark{animation:ci-spark .4s 1.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes ci-draw{to{stroke-dashoffset:0}}
@keyframes ci-spark{to{transform:scale(1) rotate(0)}}
.ci-word{margin-top:clamp(18px,3vh,30px);font:700 clamp(46px,9.5vw,132px)/.95 var(--font,system-ui,sans-serif);letter-spacing:.01em;color:#f3fbf7;white-space:nowrap;display:flex}
.ci-word span{display:inline-block;text-align:center;color:var(--ci-mint);text-shadow:0 0 18px rgba(94,242,164,.55)}
.ci-word span.lk{color:#f3fbf7;text-shadow:0 0 30px rgba(94,242,164,.35);animation:ci-lock .35s ease-out}
@keyframes ci-lock{from{transform:translateY(-.08em);color:#fff;text-shadow:0 0 40px #fff}to{transform:none}}
.ci-tag{margin-top:16px;font-size:12px;letter-spacing:.5em;color:#86e9bd;opacity:0;padding-left:.5em}
.ci.ci-run .ci-tag{animation:ci-tag .6s 1.3s ease forwards}
@keyframes ci-tag{from{opacity:0;letter-spacing:1.2em}to{opacity:1;letter-spacing:.5em}}
.ci-pulse{position:absolute;left:50%;top:clamp(46px,6vw,74px);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid var(--ci-mint);opacity:0;box-shadow:0 0 30px var(--ci-mint),inset 0 0 30px rgba(94,242,164,.4)}
.ci.ci-granted .ci-pulse{animation:ci-pulse 1.1s ease-out forwards}
@keyframes ci-pulse{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(9)}}

/* Film grain */
.ci-grain{position:absolute;inset:-60%;z-index:6;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:ci-grain .5s steps(5) infinite;transition:opacity .4s}
.ci.ci-open .ci-grain{opacity:0}
@keyframes ci-grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}
.ci-vignette{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.ci.ci-open .ci-vignette{opacity:0;transition:opacity .4s}

/* Skip */
html.cvx-intro-on .ci-skip{display:inline-flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2147483001;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(2,4,3,.6);color:#9fb5aa;font:500 11px var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);opacity:0;animation:ci-fade .4s .6s forwards}
.ci-skip:hover,.ci-skip:focus-visible{color:#fff;border-color:rgba(94,242,164,.6);outline:none}
.ci-skip kbd{font:inherit;font-size:9px;padding:2px 5px;border:1px solid rgba(255,255,255,.18);border-radius:4px}

@media (max-width:720px){
  .ci-topbar{top:22px;left:44px;right:44px;font-size:9px;letter-spacing:.12em}
  .ci-topbar .ci-clock-wrap{display:none}
  .ci-log{left:24px;top:auto;bottom:178px;font-size:10px;line-height:1.9}
  .ci-count{left:24px;bottom:70px}
  .ci-segs{right:24px;bottom:78px;gap:4px}
  .ci-segs i{width:6px;height:22px}
  .ci-segs i:nth-child(n+17){display:none}
  .ci-sid{right:24px;bottom:110px;font-size:8px}
  .ci-corner.tl,.ci-corner.tr{top:14px}.ci-corner.bl,.ci-corner.br{bottom:14px}
  .ci-corner.tl,.ci-corner.bl{left:14px}.ci-corner.tr,.ci-corner.br{right:14px}
  .ci-core{margin-top:-16vh}
  .ci-tag{font-size:10px;letter-spacing:.35em}
  html.cvx-intro-on .ci-skip{left:48px;bottom:18px;transform:none}
}
@media (pointer:coarse){.ci-skip kbd{display:none}}
