/* ═══════════════════════════════════════════════════
   PHANTOM ZENITH ORIGIN — 404 PAGE STYLES
   assets/css/pages/404.css
   ─────────────────────────────────────────────────
   Depends on: tokens.css, base.css

   Standalone styles for the SPA 404 "Signal Lost" view.
   Adapted from the Field Reference access-denied component,
   scaled up for full-page presentation.
   ═══════════════════════════════════════════════════ */

/* ─── LAYOUT ─── */
.fourohfour-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 40px 0;
}

.fourohfour-inner {
  width: 100%;
  max-width: 680px;
}

/* ─── DENIED PANEL ─── */
.denied-panel {
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(61, 13, 13, 0.6) 0%, rgba(15, 25, 35, 0.9) 60%);
  padding: 56px 40px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fourohfour-panelIn 0.5s ease both;
}

.denied-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 8px,
    rgba(248, 113, 113, 0.03) 8px, rgba(248, 113, 113, 0.03) 9px
  );
  pointer-events: none;
}

/* ─── WARNING ICON ─── */
.denied-icon {
  font-family: var(--mono);
  font-size: 3rem;
  color: var(--red-dim);
  display: block;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 16px rgba(248, 113, 113, 0.6));
  animation: fourohfour-redpulse 2.5s ease-in-out infinite;
}

/* ─── TERMINAL PREFIX LINES ─── */
.denied-terminal {
  max-width: 520px;
  margin: 0 auto 14px;
  width: 100%;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(248, 113, 113, 0.4);
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-align: left;
}

.denied-terminal-line {
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  border-right: 1ch solid var(--red-dim);
  width: 0;
}

.denied-terminal-line:nth-child(1) {
  animation: fourohfour-typeLine 0.8s steps(44) 0.3s forwards,
             fourohfour-blinkCaret 0.7s step-end 0.3s 2;
}

.denied-terminal-line:nth-child(2) {
  animation: fourohfour-typeLine 0.6s steps(35) 1.3s forwards,
             fourohfour-blinkCaret 0.7s step-end 1.3s 2;
}

/* ─── ERROR CODE ─── */
.denied-code {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-dim);
  opacity: 0;
  margin-bottom: 10px;
  animation: fourohfour-fadeIn 0.4s ease 2.1s forwards;
}

/* ─── MAIN TITLE ─── */
.denied-title {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-dim);
  margin-bottom: 16px;
  text-shadow: 0 0 24px rgba(248, 113, 113, 0.5);
  opacity: 0;
  animation: fourohfour-fadeIn 0.4s ease 2.4s forwards;
}

/* ─── BODY TEXT ─── */
.denied-body {
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 500px;
  margin: 0 auto 28px;
  opacity: 0;
  animation: fourohfour-fadeIn 0.5s ease 2.7s forwards;
}

/* ─── BADGE ─── */
.denied-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--red-dim);
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 4px;
  padding: 7px 16px;
  text-transform: uppercase;
  opacity: 0;
  animation: fourohfour-badgeFadeIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 3.2s forwards,
             fourohfour-redpulse 2.5s ease-in-out 4.3s infinite;
}

/* ─── RETURN LINK ─── */
.denied-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  padding: 10px 24px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.06);
  transition: all 0.2s ease;
  opacity: 0;
  animation: fourohfour-fadeIn 0.5s ease 3.6s forwards;
}

.denied-return:hover {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.2);
  color: #fff;
}

.denied-return .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.denied-return:hover .arrow {
  transform: translateX(-3px);
}

/* ─── KEYFRAMES ─── */
/* Prefixed to avoid collision with field-reference's redpulse/badgeFadeIn. */
@keyframes fourohfour-redpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes fourohfour-panelIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fourohfour-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fourohfour-badgeFadeIn {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fourohfour-typeLine {
  from { width: 0; opacity: 1; }
  to   { width: 100%; opacity: 1; }
}

@keyframes fourohfour-blinkCaret {
  0%, 100% { border-color: var(--red-dim); }
  50%      { border-color: transparent; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 520px) {
  .denied-panel    { padding: 40px 20px 36px; }
  .denied-title    { font-size: 1.15rem; }
  .denied-body     { font-size: 0.82rem; }
  .denied-terminal { font-size: 0.62rem; }
}