/* portal.css — Hybrid A+B (Final Edition)
   Cleaned, unified, compatible with the JS naming scheme:
   #bootScreen, #bootLines, #portalWrapper, #dangerBtn, #dangerSub, #portalExit
   Optional hybrid visuals (aurora, scanlines, holo) are present but non-invasive.
*/

/* ---------- CSS VARIABLES ---------- */
:root{
  --bg-portal: var(--bg-base, #000709);
  --ring-glow: var(--accent-glow, rgba(0,230,255,0.12));
  --ring-glow-strong: var(--accent, rgba(0,230,255,0.28));
  --danger: #ff3b3b;
  --danger-soft: rgba(255,75,75,0.12);
  --font-boot: "Courier New", monospace;
  --font-ui: var(--font-main);
  --portal-z: 9000;
}

/* ---------- RESET / ISOLATION ---------- */
/* keep things predictable for portal scope */
#bootScreen, #portalWrapper, .portal-center, .portal-ring,
.portal-warning, #dangerBtn, #dangerSub, #portalExit, .portal-door {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- BOOT SCREEN (terminal) ---------- */
#bootScreen {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  color: var(--accent);
  font-family: var(--font-boot);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--portal-z) + 30);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* hide using .hidden (used by JS) */
#bootScreen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#bootLines {
  width: min(980px, 92%);
  font-size: 1.15rem;
  line-height: 1.45;
  text-shadow: var(--glow-soft);
  max-height: 70vh;
  overflow: auto;
  padding-right: 8px;
}

/* boot line small spacing */
#bootLines .boot-line {
  margin-bottom: 6px;
  white-space: pre-wrap;
}

/* ---------- PORTAL WRAPPER ---------- */
#portalWrapper {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,10,18,0.6), rgba(0,0,0,0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--portal-z);
  transition: opacity 0.8s ease;
  opacity: 0;
  pointer-events: none;
}

/* when JS reveals */
#portalWrapper:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- VAULT LOGO (hidden behind doors, chrome finish) ---------- */
.vault-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease 1.4s;
}

/* Show logo after doors open */
#portalExit.active ~ .portal-center .vault-logo,
#portalWrapper.vault-opening .vault-logo {
  opacity: 1;
}

.vault-jelp {
  font-family: "Audiowide", "Orbitron", sans-serif;
  font-size: clamp(8rem, 25vw, 22rem);
  font-weight: 900;
  letter-spacing: 8px;
  color: #f5f7fa;
  text-shadow:
    0px 3px 0px #aab1b8,
    0px 6px 0px #8d949b,
    0px 9px 0px #6d747a,
    0px 12px 0px #4d5460,
    0px 15px 30px rgba(255,255,255,0.65),
    0 0 50px rgba(0,255,255,0.4),
    0 0 80px rgba(0,150,255,0.25);
  display: inline-block;
  transform: scale(0.7);
  transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) 1.4s;
}

.vault-ca {
  font-family: "Audiowide", "Orbitron", sans-serif;
  font-size: clamp(2rem, 8vw, 6rem);
  font-weight: 700;
  color: #f5f7fa;
  text-shadow:
    0px 2px 0px #aab1b8,
    0px 4px 0px #8d949b,
    0px 6px 0px #6d747a,
    0 0 30px rgba(0,255,255,0.3),
    0 0 60px rgba(0,150,255,0.15);
  margin-left: -1.5rem;
  font-size: 0.35em;
  position: relative;
  bottom: 0.8em;
  right: -0.3em;
  transform: scale(0.7);
  transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) 1.4s;
}

/* Logo grows and becomes opaque after door opens */
#portalWrapper.vault-opening .vault-jelp,
#portalWrapper.vault-opening .vault-ca {
  transform: scale(1);
}

/* ---------- PORTAL CENTER (flexbox container) ---------- */
.portal-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  transform-style: preserve-3d;
  position: relative;
  z-index: calc(var(--portal-z) + 1);
  min-height: 100vh;
  width: 100%;
  gap: 0;
}

/* ---------- AURORA (optional, only if you add .portal-aurora / .aurora-layer) ---------- */
.portal-aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--portal-z) - 5);
  overflow: hidden;
}

.aurora-layer {
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: blur(28px) saturate(120%);
  animation: aurora-float 18s ease-in-out infinite;
}

@keyframes aurora-float {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-30px,-18px,0) scale(1.05); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* ---------- SCANLINES (optional: add class fx-scanlines or scanline-overlay) ---------- */
.scanline-overlay, .fx-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: calc(var(--portal-z) + 1);
  opacity: 0.12;
}

/* --- DANGER HEADING (H1-style, full width) --- */
#dangerHeading {
  font-family: var(--font-ui);
  font-size: clamp(2.8rem, 11vw, 7rem);
  color: #ff3b3b;
  text-shadow: 0 0 20px rgba(255,59,59,0.8), 0 0 40px rgba(255,59,59,0.4);
  letter-spacing: 3px;
  margin: 0 0 50px 0;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  opacity: 0;
  transform: scale(0.8) translateY(-20px);
  animation: dangerAppear 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  z-index: calc(var(--portal-z) + 2);
  flex-shrink: 0;
  white-space: nowrap;
}

@keyframes dangerAppear {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- HEARTBEAT RING (around button, active animation) --- */
#buttonHeartbeat {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 4px solid rgba(0,255,255,0.08);
  box-shadow:
    0 0 18px var(--ring-glow),
    inset 0 0 18px rgba(0,150,200,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: calc(var(--portal-z) + 1);
  margin: 30px 0 18px 0;
  animation: heartbeat 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
  flex-shrink: 0;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px var(--ring-glow), inset 0 0 18px rgba(0,150,200,0.04);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 28px var(--ring-glow-strong), inset 0 0 28px rgba(0,150,200,0.06);
  }
}

/* --- DANGER BUTTON (inside heartbeat, larger, bold) --- */
#dangerBtn, .portal-btn {
  display: inline-block;
  background: linear-gradient(145deg, var(--danger), #ff7a7a);
  padding: 28px 65px;
  border-radius: 18px;
  border: 0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  letter-spacing: 3px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255,80,80,0.6), inset 0 0 14px rgba(255,140,140,0.08);
  transform-origin: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.3, 1), 
              transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 0.3s;
  z-index: calc(var(--portal-z) + 2);
  pointer-events: none;
  position: absolute;
  will-change: transform, box-shadow;
  top: 50%;
  left: 50%;
  margin-left: -65px;
  margin-top: -24px;
}

/* hover/press */
#dangerBtn:hover, .portal-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 50px rgba(255,90,90,0.85), inset 0 0 18px rgba(255,170,170,0.12);
}

/* active press */
#dangerBtn:active {
  transform: scale(0.96);
}

/* entrance animation hook JS uses */
.danger-appear {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* --- SUBTEXT BELOW BUTTON (H2-style) --- */
#dangerSub, .portal-sub {
  margin: 60px 0 0 0;
  font-family: var(--font-ui);
  color: #ff6b6b;
  font-size: clamp(1.1rem, 3.5vw, 1.8rem);
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  z-index: calc(var(--portal-z) + 1);
  text-align: center;
  width: 100%;
  padding: 0 20px;
  text-shadow: 0 0 10px rgba(255,80,80,0.5);
  animation: subChaos 1.6s infinite cubic-bezier(0.3, 0, 0.7, 1) 1.1s;
  position: relative;
}

/* entrance for subtext */
.subtext-slidein {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- DOOR TEXT (H3-style, below button, outside heartbeat) --- */
.door-text {
  margin-top: 30px;
  text-align: center;
  z-index: calc(var(--portal-z) + 1);
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  animation: doorTextAppear 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) 0.8s forwards;
  position: relative;
  flex-shrink: 0;
}

.door-text h3 {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: #0ff;
  letter-spacing: 2px;
  text-shadow: 0 0 15px rgba(0,255,240,0.5);
  font-weight: 600;
}

@keyframes doorTextAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- EXIT DOORS (4-way diagonal vault opening) ---------- */
#portalExit {
  position: fixed;
  inset: 0;
  z-index: calc(var(--portal-z) + 5);
  pointer-events: none;
  display: none; /* only shown when animation starts */
  perspective: 1200px;
}

/* show */
#portalExit.active {
  display: block;
}

/* doors — diagonal opening vault */
.portal-door {
  position: absolute;
  background: linear-gradient(180deg, #020202, #0a0a0a);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
  transform-origin: center;
  transition: transform 1.4s cubic-bezier(0.2, 0.9, 0.25, 1);
  will-change: transform;
}

/* top-left door (opens diagonal up-left) */
.portal-door.top-left-door {
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-origin: bottom right;
  transform: rotateZ(0deg) rotateX(0deg);
}

/* top-right door (opens diagonal up-right) */
.portal-door.top-right-door {
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: bottom left;
  transform: rotateZ(0deg) rotateX(0deg);
}

/* bottom-right door (opens diagonal down-right) */
.portal-door.bottom-right-door {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: top left;
  transform: rotateZ(0deg) rotateX(0deg);
}

/* bottom-left door (opens diagonal down-left) */
.portal-door.bottom-left-door {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-origin: top right;
  transform: rotateZ(0deg) rotateX(0deg);
}

/* animate OPEN (diagonal 3D fold) */
#portalExit.active .top-left-door { 
  transform: rotateZ(-45deg) rotateY(90deg) rotateX(-20deg);
}

#portalExit.active .top-right-door { 
  transform: rotateZ(45deg) rotateY(-90deg) rotateX(-20deg);
}

#portalExit.active .bottom-right-door { 
  transform: rotateZ(-45deg) rotateY(-90deg) rotateX(20deg);
}

#portalExit.active .bottom-left-door { 
  transform: rotateZ(45deg) rotateY(90deg) rotateX(20deg);
}

/* subtle overlay fade while doors animate */
#portalExit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0), rgba(0,0,0,0.5));
  pointer-events: none;
  z-index: -1;
}

/* ---------- GLITCH + HOLO LAYERS (non-invasive) ---------- */
/* if you use .glitch on elements, fx.css and glitch.js will handle it */
.glitch { position: relative; }

/* holographic shimmer for ring or background (opt-in) */
.holo-shimmer {
  mix-blend-mode: screen;
  background: linear-gradient(120deg, rgba(0,255,255,0.08), rgba(255,0,255,0.06));
  filter: blur(12px) saturate(120%);
  pointer-events: none;
}

/* ---------- RESPONSIVE / ACCESSIBILITY ---------- */
@media (max-width: 900px) {
  .portal-ring { width: 200px; height: 200px; }
  #dangerBtn, .portal-btn { font-size: 1.5rem; padding: 14px 40px; }
  #bootLines { font-size: 1rem; padding: 0 6px; }
}

/* ---------- SAFEGUARD: remove old conflicting rules if present ---------- */
/* these rules override legacy selectors that might still be in your repo */
.portal-overlay, .portal-fadeout, .portal-open, .door-panel,
.danger-button, .danger-container, .portal-doors, .portal-wrap,
.portal-wrap *, .portal-button {
  display: initial !important;
  opacity: initial !important;
  transform: none !important;
  pointer-events: auto !important;
}
/* --- BLINKING WARNING TEXT --- */
.portal-warning {
  animation: warnBlink 1.2s steps(2) infinite;
}

@keyframes warnBlink {
  0%, 80% { opacity: 1; }
  85% { opacity: 0; }
  90% { opacity: 1; }
}

/* --- CHAOTIC SUBTEXT ANIMATION --- */
.portal-sub.subtext-slidein {
  animation:
    subIn 1s ease forwards,
    subChaos 1.6s infinite cubic-bezier(.3,0,.7,1) 1.1s;
}

@keyframes subChaos {
  0%   { transform: translate(-3px,  2px) rotate(0.4deg); opacity: 1; }
  20%  { transform: translate(4px,  -1px) rotate(-1.2deg); }
  35%  { transform: translate(-2px, -4px) rotate(2deg); opacity: 0.8; }
  50%  { transform: translate(3px, 3px) rotate(-3deg); }
  70%  { transform: translate(-6px, 1px) rotate(3deg); opacity: 0.9; }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* --- BUTTON CHAOTIC WOBBLE / BEGGING EFFECT --- */
#dangerBtn.danger-appear {
  animation:
    buttonDrop 0.8s ease forwards,
    buttonTease 2.5s infinite ease-in-out 0.8s;
}

@keyframes buttonTease {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.06) translateY(-4px); }
  45%  { transform: scale(0.94) translateY(3px); }
  60%  { transform: scale(1.08) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}
/* MOVE WARNING TO BOTTOM */
.portal-warning {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    color: #ff4444;
    text-shadow: 0 0 15px red;
    animation: warningBlink 1.2s infinite alternate;
}

/* hazard blink */
@keyframes warningBlink {
    0% { opacity: 0.35; }
    50% { opacity: 1; }
    100% { opacity: 0.35; }
}
/* === TITANIUM WHITE JELP === */
.jelp-ch {
  color: #f5f7fa;
  text-shadow:
    0px 2px 0px #aab1b8,
    0px 4px 0px #8d949b,
    0px 6px 0px #6d747a,
    0px 8px 20px rgba(255,255,255,0.65),
    0 0 40px rgba(0,255,255,0.5);
}

.jelp-watermark {
  opacity: 0.06 !important;
  filter: blur(0.7px);
  text-shadow:
    0 0 20px rgba(255,255,255,0.25),
    0 0 40px rgba(0,255,255,0.15);
}