/* ============================================================
   MARRIAGE.OS — 05_Shutdown (final screen)
   Faithful static export of the Wonder artboard
   "Marriage Os Shutdown Screen" (mus) + reproduced CRT effects.
   Root carries shader preset 019e2e09-… (same as boot).

   Palette (exact):
     bg          #0a0805    amber      #ffb000
     subline     #8a6d2a    seq text   #c9a23a
     ok green    #33ff99    warn red   #ff5e3a
     footer      #6b5520
     frame 1440 x 900, pt-30 / px-80
   ============================================================ */

:root {
  --bg:       #0a0805;
  --amber:    #ffb000;
  --subline:  #8a6d2a;
  --seq:      #c9a23a;
  --ok:       #33ff99;
  --warn:     #ff5e3a;
  --footer:   #6b5520;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  overflow: hidden;
}

/* ---- Screen frame (pt-30 px-80) -------------------------- */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 30px 80px 0;
  background: var(--bg);
  overflow: hidden;
}

/* Shader comes entirely from the shared shader.css (.shader-bg).
   The .shader-bg--dim modifier on this page's element makes the
   glow noticeably dimmer / more receded than boot ("sleep" vs
   boot's brighter "wake"). */

/* ---- Content Column (z-10, pt-14 pl-14, flex-1) ---------- */
.content-column {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 56px 0 0 56px;        /* pt-14 pl-14 */
}

/* Header */
.shutdown-header { display: flex; flex-direction: column; gap: 6px; }

.shutdown-title {
  color: var(--amber);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;                /* leading-none */
  text-shadow: 0 0 12px rgba(255, 176, 0, 0.45);
}

.shutdown-subline {
  margin-top: 10px;              /* mt-2.5 */
  color: var(--subline);
  font-size: 18px;               /* text-lg */
}

/* Sequence (mt-8, gap-2) */
.shutdown-sequence {
  display: flex;
  flex-direction: column;
  margin-top: 32px;              /* mt-8 */
  gap: 8px;                      /* gap-2 */
}

.seq-line { display: flex; align-items: center; gap: 16px; }  /* gap-4 */

.tag { font-size: 18px; }
.tag.ok   { color: var(--ok);   text-shadow: 0 0 6px rgba(51, 255, 153, 0.35); }
.tag.warn { color: var(--warn); text-shadow: 0 0 6px rgba(255, 94, 58, 0.40); }

.seq-text {
  color: var(--seq);
  font-size: 18px;
  text-shadow: 0 0 5px rgba(201, 162, 58, 0.20);
}

/* Signoff (mt-9, gap-1.5) */
.shutdown-signoff {
  display: flex;
  flex-direction: column;
  margin-top: 36px;              /* mt-9 */
  gap: 6px;                      /* gap-1.5 */
}

.signoff-resting {
  color: var(--amber);
  font-size: 18px;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.30);
}

.signoff-goodnight { display: flex; align-items: center; gap: 8px; }  /* gap-2 */

.goodnight-text {
  color: var(--amber);
  font-size: 18px;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.30);
}

.cursor {
  width: 11px;
  height: 20px;                  /* h-5 */
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255, 176, 0, 0.55);
  animation: blink 1.1s steps(1, end) infinite;
  animation-delay: 2.7s;
}

/* ---- Footer (h-10, items-center, pb-10 pl-14) ----------- */
.shutdown-footer {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 40px;                  /* h-10 */
  padding: 0 0 40px 56px;        /* pb-10 pl-14 */
}

.footer-copyright {
  color: var(--footer);
  font-size: 14px;               /* text-sm */
  letter-spacing: 0.5px;
}

/* ---- Overlays ------------------------------------------- */
.overlay { position: fixed; inset: 0; pointer-events: none; }

/* Vignette (z-40) — exact gradient from source */
.vignette {
  z-index: 40;
  background: radial-gradient(circle,
              rgba(10, 8, 5, 0) 55%,
              rgba(0, 0, 0, 0.55) 100%);
}

/* Scanlines (z-50) */
.scanlines {
  z-index: 50;
  overflow: hidden;
  background: repeating-linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0)    0px,
              rgba(0, 0, 0, 0)    2px,
              rgba(0, 0, 0, 0.22) 3px);
}
.scanlines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
              rgba(255, 176, 0, 0),
              rgba(255, 176, 0, 0.03),
              rgba(255, 176, 0, 0));
  animation: sweep 9s linear infinite;
}

/* ---- Keyframes ------------------------------------------ */
.shutdown-title,
.shutdown-subline,
.seq-line,
.signoff-resting,
.signoff-goodnight {
  opacity: 0;
  animation: reveal 0.4s ease-out forwards;
  animation-delay: var(--d, 0s);
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes sweep {
  from { transform: translateY(-50%); }
  to   { transform: translateY(320%); }
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.82; }
  98%           { opacity: 1; }
  99%           { opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
  .shutdown-title, .shutdown-subline, .seq-line,
  .signoff-resting, .signoff-goodnight { opacity: 1; animation: none; }
  .cursor, .scanlines::after, .shader-bg { animation: none; }
}