/* splash.css — tyjohnson.com gate
 * Styles for the three randomizing splash themes (SSH / Zero-Trust / BBS).
 * Source of truth: preview/splash-gate.html. CSP: style-src 'self' (no inline).
 */

    /* ── Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; background: #000; }

    section {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    /* The randomizer removes [hidden] from exactly one <section>. Author rules
       beat the UA `[hidden]{display:none}` regardless of specificity, so force
       it here — without this, every theme renders stacked (position:fixed) and
       only the last in source order (BBS) ever shows. */
    [hidden] { display: none !important; }

    /* Shared keyframes */
    @keyframes fade-in  { from { opacity: 0; }              to { opacity: 1; } }
    @keyframes rise     { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    @keyframes blink    { 50% { opacity: 0; } }
    @keyframes zt-fill  { to   { width: 100%; } }
    @keyframes door-open{ to   { width: 0%; } }

    /* No-JS fallback */
    .noscript-gate {
      position: fixed; inset: 0; display: flex;
      align-items: center; justify-content: center;
      background: #000; color: #d8dde0;
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
    }
    .noscript-gate a {
      color: #d8dde0; font-size: .9rem; letter-spacing: .2em;
      text-decoration: none; border: 1px solid #404a50; padding: .9em 2.4em;
    }
    .noscript-gate a:hover { background: #d8dde0; color: #000; }


    /* ════════════════════════════════════════════
       THEME 1 — SSH TERMINAL
    ════════════════════════════════════════════ */
    #s1 {
      background: #050605;
      color: #cdd2cf;
      font-family: 'Cascadia Code', 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
    }
    #s1::before {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
      background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
    }
    #s1::after {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 4;
      background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%);
    }
    #s1 .term {
      position: relative; z-index: 1;
      width: 100%; max-width: 680px;
      font-size: clamp(.66rem, 1.75vw, .82rem); line-height: 1.95;
    }
    #s1 .topbar {
      display: flex; justify-content: space-between;
      color: #777f78; font-size: .62rem; letter-spacing: .25em; text-transform: uppercase;
      border-bottom: 1px solid #3a403d; padding-bottom: .8em; margin-bottom: 1.6em;
    }
    #s1 .line { white-space: pre; }   /* visible immediately — no opacity gating (FCP/contrast safe) */
    #s1 .arrow { color: #777f78; }
    #s1 .lead  { color: #777f78; }
    #s1 .ok    { color: #8fb7b0; }
    /* Connection rows: label left, status flush-right, dotted leader fills the gap */
    #s1 .step { display: flex; align-items: center; white-space: normal; }
    #s1 .step .arrow  { flex: none; margin-right: .7em; }
    #s1 .step .label  { flex: none; white-space: pre; }
    #s1 .step .lead   { flex: 1 1 auto; height: 0; border-bottom: 1px dotted #3a403d; margin: 0 .7em; }
    #s1 .step .status { flex: none; white-space: nowrap; }
    #s1 .summary {
      margin-top: .5em;
      border-left: 2px solid #3a403d; padding-left: 1em;
    }
    #s1 .proceed { color: #cdd2cf; margin-top: 1em; }
    #s1 .enter-link { display: block; color: #cdd2cf; text-decoration: none; }
    #s1 .enter-link:hover { color: #fff; }
    #s1 .cursor {
      display: inline-block; width: .58em; height: 1.05em;
      background: #cdd2cf; vertical-align: text-bottom;
      animation: blink 1.2s steps(1) infinite;
    }
    /* SSH animation delays */
    #s1 .l1 { animation-delay: .3s; }  #s1 .l2 { animation-delay: .9s; }
    #s1 .l3 { animation-delay: 1.4s; } #s1 .l4 { animation-delay: 1.9s; }
    #s1 .l5 { animation-delay: 2.4s; } #s1 .l6 { animation-delay: 2.9s; }
    #s1 .l7 { animation-delay: 3.4s; } #s1 .l8 { animation-delay: 3.9s; }
    #s1 .sl1 { animation-delay: 4.3s; }
    #s1 .sl2 { animation-delay: 4.6s; }
    #s1 .sl3 { animation-delay: 4.9s; }
    #s1 .proceed { animation-delay: 5.3s; }


    /* ════════════════════════════════════════════
       THEME 2 — ZERO TRUST
    ════════════════════════════════════════════ */
    #s2 {
      background: radial-gradient(140% 80% at 50% -10%, #0d1416 0, #07090a 60%);
      color: #e7ecee;
      font-family: 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
    }
    #s2 .card {
      width: 100%; max-width: 460px;
      background: linear-gradient(180deg, #0c0f11, #080a0b);
      border: 1px solid #1a2124; border-radius: 6px;
      padding: 2.6rem 2.6rem 2.2rem;
      box-shadow: 0 0 60px rgba(0,0,0,.6), 0 0 40px rgba(55,210,196,.04);
    }
    #s2 .eyebrow {
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
      font-size: .6rem; font-weight: 700; letter-spacing: .42em; text-transform: uppercase;
      color: #37d2c4; display: flex; align-items: center; gap: .7em; margin-bottom: 1.6rem;
    }
    #s2 .eyebrow::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: #37d2c4; box-shadow: 0 0 8px 1px rgba(55,210,196,.6);
    }
    #s2 h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: .3rem; }
    #s2 .sub {
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
      font-size: .7rem; letter-spacing: .12em; color: #8b9498; margin-bottom: 2rem;
    }
    #s2 .checks { border-top: 1px solid #1a2124; }
    #s2 .row {
      display: flex; align-items: center; gap: 1rem;
      padding: .75rem 0; border-bottom: 1px solid #1a2124;
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace; font-size: .72rem;
    }
    #s2 .row .label { flex: 1; color: #8b9498; letter-spacing: .04em; }
    #s2 .row .val   { color: #e7ecee; font-weight: 500; letter-spacing: .03em; }
    #s2 .tick {
      width: 18px; height: 18px; flex: 0 0 18px;
      border: 1px solid #37d2c4; border-radius: 50%;
      display: grid; place-items: center;
      color: #37d2c4; font-size: .6rem;
      box-shadow: 0 0 10px rgba(55,210,196,.18);
    }
    #s2 .r1 { animation-delay: .4s; }  #s2 .r2 { animation-delay: .9s; }
    #s2 .r3 { animation-delay: 1.4s; } #s2 .r4 { animation-delay: 1.9s; }
    #s2 .r5 { animation-delay: 2.4s; }
    #s2 .meter {
      height: 2px; background: #1a2124; margin: 1.6rem 0 1.4rem;
      border-radius: 2px; overflow: hidden;
    }
    #s2 .meter::after {
      content: ''; display: block; height: 100%; width: 0;
      background: linear-gradient(90deg, #4a5256, #37d2c4);
      animation: zt-fill 2.6s cubic-bezier(.3,0,.2,1) .4s forwards;
    }
    #s2 .footerline {
      display: flex; justify-content: space-between; align-items: center;
    }
    #s2 .grant-note {
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
      font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #37d2c4;
    }
    #s2 .enter-link {
      display: inline-flex; align-items: center; gap: .55em;
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
      font-size: .64rem; letter-spacing: .14em; color: #37d2c4; text-decoration: none;
    }
    #s2 .enter-link:hover { filter: brightness(1.18); }
    #s2 .cursor {
      display: inline-block; width: .5em; height: 1em;
      background: #37d2c4; vertical-align: text-bottom;
      box-shadow: 0 0 8px rgba(55,210,196,.5);
      animation: blink 1.1s steps(1) infinite;
    }


    /* ════════════════════════════════════════════
       THEME 3 — BBS / CARRIER
    ════════════════════════════════════════════ */
    #s3 {
      background: radial-gradient(130% 100% at 50% 50%, #140d00 0, #0a0700 70%);
      color: #ffb000;
      font-family: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
      text-shadow: 0 0 4px rgba(255,176,0,.45);
    }
    #s3::before {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
      background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
    }
    #s3::after {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 4;
      background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.65) 100%);
    }
    #s3 .term {
      position: relative; z-index: 1;
      width: 100%; max-width: 600px;
      font-size: clamp(.66rem, 1.9vw, .82rem); line-height: 1.7;
    }
    #s3 .line { white-space: pre-wrap; }   /* visible immediately — no opacity gating */
    #s3 .dim   { color: #b07a00; }
    #s3 .cyan  { color: #36c5c5; text-shadow: 0 0 4px rgba(54,197,197,.4); }
    #s3 .green { color: #4fd44f; text-shadow: 0 0 4px rgba(79,212,79,.4); }
    #s3 .banner {
      color: #36c5c5; text-shadow: 0 0 5px rgba(54,197,197,.4);
      margin: .6em 0;
      white-space: pre;   /* ASCII box-drawing: preserve newlines, never wrap */
    }
    #s3 .caller-block { margin-top: .3em; }
    #s3 .prompt-line  { margin-top: .8em; }
    #s3 .cursor {
      display: inline-block; width: .6em; height: 1.05em;
      background: #ffb000; vertical-align: text-bottom;
      box-shadow: 0 0 6px rgba(255,176,0,.6);
      animation: blink 1s steps(1) infinite;
    }
    #s3 .enter-link { display: block; color: #ffb000; text-decoration: none; text-shadow: 0 0 4px rgba(255,176,0,.5); }
    #s3 .enter-link:hover { color: #fff; }

    /* BBS animation delays */
    #s3 .l1 { animation-delay: .3s; }  #s3 .l2 { animation-delay: .7s; }
    #s3 .l3 { animation-delay: 1.2s; } #s3 .l4 { animation-delay: 1.6s; }
    #s3 .l5 { animation-delay: 2.6s; }
    #s3 .banner { animation-delay: 3.1s; }
    #s3 .l6 { animation-delay: 3.7s; } #s3 .l7 { animation-delay: 4.2s; }
    #s3 .l8 { animation-delay: 4.8s; }
    #s3 .cl1 { animation-delay: 5.2s; }
    #s3 .cl2 { animation-delay: 5.5s; }
    #s3 .cl3 { animation-delay: 5.8s; }
    #s3 .prompt-line { animation-delay: 6.2s; }


    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      #s1 .line, #s3 .line, #s3 .banner { animation: none; opacity: 1; }
      #s2 .row, #s2 .footerline         { animation: none; opacity: 1; transform: none; }
      #s2 .meter::after                 { animation: none; width: 100%; }
      #s1 .cursor, #s2 .cursor, #s3 .cursor { animation: none; }
    }

    /* Visually hidden — accessible to screen readers and crawlers */
    .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }