/* DENTAL FREQUENCY DESIGN — DOS STYLE PORTAL TRANSITION v33 */

.portal-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(0,167,255,.08),transparent 36%),
    #020608;
  color:#7be3ff;
  font-family:"Courier New",Courier,monospace;
}
.portal-transition[hidden]{display:none!important}

.portal-transition:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 4px
    );
  animation:terminalFlicker .12s steps(2,end) infinite;
}

.portal-transition:after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:
    linear-gradient(rgba(40,196,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,196,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  animation:terminalGridMove 8s linear infinite;
}

.portal-transition-scan{
  position:absolute;
  left:0;
  right:0;
  top:-12%;
  height:4px;
  z-index:2;
  background:linear-gradient(90deg,transparent,#21cfff 18%,#a7f7ff 50%,#21cfff 82%,transparent);
  box-shadow:0 0 8px #21cfff,0 0 24px rgba(33,207,255,.65);
  animation:terminalScan 1.55s linear infinite;
}

.portal-transition-terminal{
  width:min(760px,calc(100vw - 32px));
  min-height:390px;
  position:relative;
  z-index:3;
  padding:24px;
  border:1px solid #1c708f;
  border-radius:6px;
  background:rgba(1,10,14,.94);
  box-shadow:
    0 0 0 1px rgba(83,219,255,.04) inset,
    0 0 42px rgba(0,167,255,.14),
    0 30px 90px rgba(0,0,0,.55);
}

.terminal-brand{
  padding-bottom:12px;
  border-bottom:1px solid #184255;
  color:#d9f7ff;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.terminal-screen{
  min-height:270px;
  padding:18px 0 8px;
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#66d9ff;
  font-size:14px;
  line-height:1.35;
  text-align:left;
}

.terminal-line{
  opacity:0;
  transform:translateY(3px);
  animation:terminalLineIn .16s ease forwards;
}

.terminal-line.ok{color:#72f3bd}
.terminal-line.warn{color:#ffd26d}
.terminal-line.bold{color:#eafcff;font-weight:700}

.terminal-cursor{
  display:inline-block;
  width:8px;
  height:1em;
  margin-left:4px;
  vertical-align:-2px;
  background:#79e5ff;
  animation:terminalCursor .72s steps(1,end) infinite;
}

.terminal-status{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:12px;
  border-top:1px solid #183c4a;
  color:#80aeba;
  font-size:11px;
  letter-spacing:.12em;
}

.terminal-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#27d3ff;
  box-shadow:0 0 12px #27d3ff;
  animation:terminalDotPulse 1s ease-in-out infinite;
}

.portal-launching{
  overflow:hidden!important;
}

@keyframes terminalScan{
  0%{top:-4%}
  100%{top:104%}
}
@keyframes terminalGridMove{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(28px,28px,0)}
}
@keyframes terminalFlicker{
  0%,100%{opacity:.22}
  50%{opacity:.30}
}
@keyframes terminalLineIn{
  to{opacity:1;transform:none}
}
@keyframes terminalCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes terminalDotPulse{
  0%,100%{opacity:.45;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.2)}
}

@media(max-width:600px){
  .portal-transition-terminal{
    min-height:350px;
    padding:18px;
  }
  .terminal-screen{
    min-height:235px;
    font-size:12px;
  }
  .terminal-brand{
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .portal-transition:before,
  .portal-transition:after,
  .portal-transition-scan,
  .terminal-dot{
    animation:none!important;
  }
}