.cypher-intro[hidden] { display:none!important; }
body.cypher-intro-active { overflow:hidden; }

.cypher-intro {
  --intro-ink:#f5f5f5;
  --intro-muted:#a6a6a6;
  position:fixed;
  inset:0;
  z-index:2147483000;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:radial-gradient(circle at 50% 47%,#202020 0,#090909 32%,#030303 72%),#030303;
  color:var(--intro-ink);
  font-family:"JetBrains Mono","Courier New",monospace;
  opacity:1;
  transition:opacity .72s ease,visibility 0s .72s;
}

.cypher-intro.is-exiting { visibility:hidden;opacity:0;pointer-events:none; }
.cypher-intro * { box-sizing:border-box; }
.cypher-intro button { font:inherit; }

.cypher-intro-matrix,.cypher-intro-grid,.cypher-intro-scan,.cypher-intro-noise,
.cypher-intro-vignette,.cypher-intro-tech-field {
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}

.cypher-intro-matrix {
  z-index:-6;opacity:.94;
  transition:opacity 1.4s ease,filter 1.5s ease,transform 2s cubic-bezier(.2,.8,.2,1);
}

.cypher-intro-grid {
  z-index:-5;opacity:.22;
  background-image:linear-gradient(#fff0 95%,#ffffff12 95%),linear-gradient(90deg,#fff0 95%,#ffffff12 95%);
  background-size:clamp(38px,6vw,84px) clamp(38px,6vw,84px);
  mask-image:radial-gradient(circle at center,#000 0 24%,transparent 72%);
  transform:perspective(620px) rotateX(63deg) scale(1.65) translateY(22%);
  transform-origin:center bottom;
  animation:cypher-intro-grid-drift 6s linear infinite;
}

.cypher-intro-noise {
  z-index:7;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.cypher-intro-scan {
  z-index:6;opacity:.15;mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,#fff 4px,transparent 5px);
  background-size:100% 5px;
}
.cypher-intro-scan::after {
  content:"";position:absolute;left:0;right:0;height:20vh;
  background:linear-gradient(transparent,#ffffff24,transparent);
  animation:cypher-intro-scanner 2.8s linear infinite;
}
.cypher-intro-vignette { z-index:5;background:radial-gradient(circle at center,transparent 24%,#0005 58%,#000 108%); }
.cypher-intro-tech-field { z-index:-3; }

.cypher-intro-node {
  position:absolute;width:clamp(5px,.45vw,8px);aspect-ratio:1;
  border:1px solid #ffffff8f;transform:rotate(45deg);box-shadow:0 0 14px #fff8;opacity:0;
  animation:cypher-intro-node-in 2.4s var(--delay) ease forwards,
    cypher-intro-node-pulse 2.6s calc(var(--delay) + 2s) ease-in-out infinite;
}
.cypher-intro-node::before,.cypher-intro-node::after {
  content:"";position:absolute;top:50%;width:var(--wire);height:1px;
  background:linear-gradient(90deg,#ffffff8c,transparent);transform-origin:left;
}
.cypher-intro-node::before { left:100%;transform:rotate(var(--angle)); }
.cypher-intro-node::after { right:100%;transform:rotate(calc(var(--angle) + 180deg)); }

.cypher-intro-hud {
  position:absolute;
  inset:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  z-index:9;opacity:.72;pointer-events:none;transition:opacity .8s ease;
}
.cypher-intro-corner {
  position:absolute;width:clamp(34px,5vw,74px);height:clamp(34px,5vw,74px);
  border-color:#ffffff91;border-style:solid;
}
.cypher-intro-corner.tl { inset:0 auto auto 0;border-width:1px 0 0 1px; }
.cypher-intro-corner.tr { inset:0 0 auto auto;border-width:1px 1px 0 0; }
.cypher-intro-corner.bl { inset:auto auto 0 0;border-width:0 0 1px 1px; }
.cypher-intro-corner.br { inset:auto 0 0 auto;border-width:0 1px 1px 0; }

.cypher-intro-system-label {
  position:absolute;top:12px;left:clamp(48px,7vw,100px);display:flex;align-items:center;gap:10px;
  color:#cfcfcf;font-size:clamp(10px,.8vw,13px);letter-spacing:.14em;text-transform:uppercase;
}
.cypher-intro-system-label::before {
  content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;
  animation:cypher-intro-blink 1.2s steps(2) infinite;
}
.cypher-intro-coordinate {
  position:absolute;right:clamp(48px,7vw,100px);bottom:12px;color:#aaa;
  font-size:clamp(9px,.74vw,12px);letter-spacing:.12em;
}

.cypher-intro-boot {
  position:absolute;left:50%;bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px));z-index:10;
  width:min(360px,calc(100vw - 72px));transform:translateX(-50%);color:#bcbcbc;
  font-size:clamp(10px,.82vw,13px);letter-spacing:.11em;text-transform:uppercase;
  transition:opacity .6s ease,transform .6s ease;
}
.cypher-intro-boot-copy { display:flex;justify-content:space-between;gap:14px; }
.cypher-intro-progress { height:1px;margin-top:10px;overflow:hidden;background:#ffffff26; }
.cypher-intro-progress span {
  display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;
  animation:cypher-intro-boot-progress 3.6s cubic-bezier(.18,.7,.15,1) forwards;
}

.cypher-intro-welcome {
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;
  padding:max(28px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(72px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  text-align:center;visibility:hidden;opacity:0;transform:scale(.975);
  transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1),visibility 0s 1s;
}
.cypher-intro-card { position:relative;width:min(1080px,100%);padding:clamp(28px,6vw,72px) clamp(18px,7vw,80px); }
.cypher-intro-card::before,.cypher-intro-card::after {
  content:"";position:absolute;top:50%;width:min(14vw,150px);height:1px;
  background:linear-gradient(90deg,transparent,#ffffff5c);
}
.cypher-intro-card::before { right:100%; }
.cypher-intro-card::after { left:100%;transform:rotate(180deg); }

.cypher-intro-seal {
  position:relative;display:grid;place-items:center;width:clamp(62px,7vw,92px);aspect-ratio:1;
  margin:0 auto clamp(18px,3.5vw,30px);border:1px solid #ffffff70;border-radius:50%;color:#fff;
  font-size:clamp(24px,3vw,38px);box-shadow:inset 0 0 28px #ffffff0d,0 0 40px #ffffff0b;
}
.cypher-intro-seal::before,.cypher-intro-seal::after {
  content:"";position:absolute;inset:7px;border:1px dashed #ffffff3d;border-radius:50%;
  animation:cypher-intro-spin 8s linear infinite;
}
.cypher-intro-seal::after {
  inset:-9px;border-style:solid;border-color:#fff2 transparent;
  animation-direction:reverse;animation-duration:13s;
}

.cypher-intro-kicker {
  margin:0 0 10px;color:#a8a8a8;font-size:clamp(10px,1.05vw,15px);
  letter-spacing:clamp(.16em,.9vw,.42em);text-transform:uppercase;
}
.cypher-intro-title {
  min-height:2.3em;margin:0;color:#f8f8f8;font-size:clamp(42px,7.5vw,128px);line-height:1.02;
  letter-spacing:-.055em;text-wrap:balance;text-shadow:0 0 24px #ffffff1f;
}
.cypher-intro-title,.cypher-intro-title span { color:#f8f8f8!important; }
.cypher-intro-title span { display:block; }
.cypher-intro-title .lead-line {
  margin-bottom:clamp(7px,1.2vw,13px);font-size:clamp(20px,2.7vw,42px);line-height:1.28;
  letter-spacing:.08em;white-space:nowrap;text-transform:uppercase;
}
.cypher-intro-title .brand-word { letter-spacing:.06em;text-transform:uppercase; }

.cypher-intro-glyphs {
  display:flex;justify-content:center;gap:clamp(7px,1.4vw,15px);margin:clamp(17px,3vw,28px) 0;
  color:#777;font-size:clamp(11px,1.25vw,17px);
}
.cypher-intro-glyphs span { animation:cypher-intro-glyph-breathe 2s calc(var(--i) * 120ms) ease-in-out infinite; }

.cypher-intro-enter {
  position:relative;isolation:isolate;display:inline-grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  min-width:min(360px,88vw);min-height:62px;padding:15px 22px;overflow:hidden;
  border:1px solid #ffffff8a;border-radius:2px;background:#070707c9;color:#fff;cursor:pointer;
  font-size:clamp(13px,1.25vw,17px);font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  box-shadow:0 0 0 1px #000,0 0 34px #ffffff0b;
  transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease;
}
.cypher-intro-enter::before {
  content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateX(-102%);
  transition:transform .42s cubic-bezier(.77,0,.18,1);
}
.cypher-intro-enter:hover { color:#050505;border-color:#fff;transform:translateY(-2px); }
.cypher-intro-enter:hover::before { transform:translateX(0); }
.cypher-intro-enter:focus-visible { color:#fff;background:#070707c9;border-color:#fff;outline:2px solid #fff;outline-offset:4px; }
.cypher-intro-enter:active { transform:translateY(0) scale(.985); }
.cypher-intro-hint {
  margin:13px 0 0;color:#777;font-size:clamp(9px,.8vw,12px);letter-spacing:.11em;text-transform:uppercase;
}

.cypher-intro.phase-converge .cypher-intro-matrix { opacity:.28;filter:blur(1.2px);transform:scale(1.035); }
.cypher-intro.phase-converge .cypher-intro-grid { opacity:.08; }
.cypher-intro.phase-converge .cypher-intro-tech-field { opacity:.35;transition:opacity 1.2s ease; }
.cypher-intro.phase-reveal .cypher-intro-welcome { visibility:visible;opacity:1;transform:scale(1);transition-delay:0s; }
.cypher-intro.phase-reveal .cypher-intro-boot { opacity:0;transform:translate(-50%,10px); }
.cypher-intro.phase-reveal .cypher-intro-hud { opacity:.34; }
.cypher-intro.phase-ready .cypher-intro-enter { animation:cypher-intro-enter-ready 1.4s ease both; }

@keyframes cypher-intro-scanner { from { transform:translateY(-25vh); } to { transform:translateY(110vh); } }
@keyframes cypher-intro-grid-drift { to { background-position:0 84px,84px 0; } }
@keyframes cypher-intro-node-in { 0% { opacity:0;scale:.2; } 35% { opacity:.9; } 100% { opacity:.3;scale:1; } }
@keyframes cypher-intro-node-pulse { 50% { opacity:.78;box-shadow:0 0 20px #fffb; } }
@keyframes cypher-intro-boot-progress { 0% { transform:scaleX(0); } 70% { transform:scaleX(.78); } 100% { transform:scaleX(1); } }
@keyframes cypher-intro-blink { 50% { opacity:.25; } }
@keyframes cypher-intro-spin { to { transform:rotate(360deg); } }
@keyframes cypher-intro-glyph-breathe { 50% { color:#eee;transform:translateY(-2px); } }
@keyframes cypher-intro-enter-ready { 0% { opacity:0;transform:translateY(10px); } 100% { opacity:1;transform:translateY(0); } }

@media (max-width:600px) {
  .cypher-intro-hud { inset:max(11px,env(safe-area-inset-top)) max(11px,env(safe-area-inset-right)) max(11px,env(safe-area-inset-bottom)) max(11px,env(safe-area-inset-left)); }
  .cypher-intro-system-label { top:9px;left:38px;max-width:64vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px; }
  .cypher-intro-coordinate { right:38px;bottom:9px;font-size:8px; }
  .cypher-intro-welcome { align-items:center;padding-inline:18px; }
  .cypher-intro-card { padding-inline:0; }
  .cypher-intro-card::before,.cypher-intro-card::after { display:none; }
  .cypher-intro-title { min-height:2.1em;font-size:clamp(39px,13vw,62px);letter-spacing:-.045em; }
  .cypher-intro-title .lead-line { margin-bottom:10px;font-size:clamp(17px,5.2vw,24px);letter-spacing:.065em; }
  .cypher-intro-kicker { font-size:clamp(9px,2.8vw,12px);letter-spacing:.15em; }
  .cypher-intro-enter { width:min(310px,100%);min-width:0;min-height:54px;gap:12px;padding-inline:15px;font-size:13px; }
  .cypher-intro-glyphs { font-size:11px; }
  .cypher-intro-boot { bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px)); }
  .cypher-intro-node:nth-child(n+15) { display:none; }
}

@media (max-height:620px) {
  .cypher-intro-seal { width:44px;margin-bottom:12px;font-size:18px; }
  .cypher-intro-card { padding-block:18px; }
  .cypher-intro-glyphs { margin:12px 0; }
  .cypher-intro-hint { display:none; }
  .cypher-intro-boot { bottom:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .cypher-intro *,.cypher-intro *::before,.cypher-intro *::after {
    animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;
  }
  .cypher-intro-matrix,.cypher-intro-tech-field,.cypher-intro-scan,.cypher-intro-grid { opacity:.12; }
  .cypher-intro-welcome { visibility:visible;opacity:1;transform:none;transition:none; }
  .cypher-intro-boot { display:none; }
}