/* ---- Split from inline <style> in landing.html ---- */

:root{
      /* DORMANT (orange/pink) */
      --bg:#070503;
      --c-main:#ffb347;   /* amber */
      --c-accent:#ff9933; /* amber hi */
      --c-error:#ff3b3b;  /* red syntax flash */
      --c-pink:#ff66cc;   /* distortion specks */
      --glow: 0 0 6px rgba(255,179,71,.28);
    }
    /* ACTIVE (green) when .theme-green on body */
    body.theme-green{
      --bg:#050b07;
      --c-main:#00ff7b;
      --c-accent:#b4ffc1;
      --c-error:#ff3b3b;
      --c-pink:#ff66cc;
      --glow: 0 0 7px rgba(0,255,123,.35);
    }

    html,body{height:100%;margin:0}
    body{
      display:flex;align-items:center;justify-content:center;
      background:var(--bg); color:var(--c-main);
      font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
      overflow:hidden;
      transition: background .4s ease, color .4s ease, filter .4s ease;
    }
    .wrap{width:min(880px,92vw)}
    .header{
      text-align:center; margin-bottom:12px; letter-spacing:.06em;
      text-shadow: var(--glow), 1px 0 0 rgba(255,0,50,.12), -1px 0 0 rgba(0,120,255,.12);
    }

    #bootlog{
      white-space:pre-wrap; min-height:210px; text-align:left;
      padding:12px 14px; border:1px solid var(--c-main);
      background:color-mix(in srgb, var(--c-main) 6%, transparent);
      box-shadow: inset 0 0 18px color-mix(in srgb, var(--c-main) 14%, transparent);
      transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
    }

    /* segmented progress bar (hidden until reboot) */
    #barWrap{display:none;margin-top:14px}
    .segbar{
      display:grid; grid-template-columns: repeat(28,1fr); gap:4px;
      border:2px solid var(--c-main); padding:2px; height:40px;
      box-shadow: inset 0 0 14px color-mix(in srgb, var(--c-main) 18%, transparent);
      transition:border-color .4s ease, box-shadow .4s ease;
    }
    .seg{
      border:2px solid var(--c-main); background:transparent;
      transition: background .24s ease, filter .24s ease, border-color .4s ease;
    }
    .seg.filled{background:var(--c-main); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-main) 45%, transparent))}
    .seg.glitch{background:linear-gradient(90deg, var(--c-main) 0 60%, var(--c-accent) 60% 100%)}
    .seg.next::after{
      content:""; display:block; height:100%;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 40%, transparent), transparent);
      animation: shimmer 1.6s linear infinite; mix-blend-mode:screen;
    }
    @keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

    #pct{display:none;margin-top:6px; opacity:.9}

    /* prompts */
    #start,#ready{margin-top:18px;text-align:center; animation:blink 1.05s step-end infinite}
    #ready{display:none}
    @keyframes blink{50%{opacity:0}}

    /* error flash (red) */
    .flash-error{ animation:flashErr .32s ease; }
    @keyframes flashErr{
      0%{box-shadow:0 0 0 rgba(0,0,0,0)}
      20%{box-shadow:0 0 26px rgba(255,59,59,.38)}
      100%{box-shadow:0 0 0 rgba(0,0,0,0)}
    }

    /* shake on rollback */
    .shake{animation:shake .48s ease}
    @keyframes shake{
      10%,90%{transform:translateX(-1px)}
      20%,80%{transform:translateX(2px)}
      30%,50%,70%{transform:translateX(-3px)}
      40%,60%{transform:translateX(3px)}
    }

    /* overlays */
    .noise, .pix, .tearLayer, .ghostLayer, #staticOverlay { position:fixed; inset:0; pointer-events:none; }
    .noise{
      background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--c-main) 6%, transparent), transparent 40%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--c-main) 5%, transparent), transparent 45%),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-main) 16%, transparent) 0 1px, transparent 1px 2px);
      opacity:.22; animation:noisePulse 3.8s ease-in-out infinite;
      transition: background .4s ease, opacity .4s ease;
      mix-blend-mode:screen;
    }
    @keyframes noisePulse{ 50%{opacity:.3} }

    .pix::before{
      content:""; position:absolute; inset:0;
      background-image:
        radial-gradient(color-mix(in srgb, var(--c-pink) 45%, transparent) 36%, transparent 38%),
        radial-gradient(color-mix(in srgb, var(--c-main) 35%, transparent) 34%, transparent 36%),
        radial-gradient(color-mix(in srgb, var(--c-accent) 26%, transparent) 32%, transparent 34%);
      background-size: 2px 2px, 3px 3px, 4px 4px;
      background-position: 0 0, 17px 13px, 33px 7px;
      animation:pixDrift 11s linear infinite;
      opacity:.22; mix-blend-mode:screen;
      transition: opacity .4s ease;
    }
    @keyframes pixDrift{ to{ background-position: 230px 180px, 270px 210px, 330px 130px; } }

    .tearLayer .tear{
      position:absolute; left:0; width:100%; height:2px;
      background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-main) 70%, transparent), transparent);
      filter: blur(.45px);
      opacity:0; transform:translateY(0) skewX(-8deg);
      animation:tearAnim .28s ease-out forwards;
      mix-blend-mode:screen;
    }
    @keyframes tearAnim{
      12%{opacity:.85}
      100%{opacity:0; transform:translateY(5px) skewX(-4deg)}
    }

    #staticOverlay{opacity:0}
    #staticOverlay.active{
      opacity:.66;
      background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-main) 22%, transparent) 0 1px, transparent 1px 2px);
      animation:staticBurst .33s steps(2,start) infinite;
      mix-blend-mode:screen;
    }
    @keyframes staticBurst{from{background-position:0 0}to{background-position:0 100%}}

    /* ghost UI flashes */
    .ghost{
      position:absolute; color:var(--c-main);
      border:1px solid var(--c-main);
      padding:6px 8px; font-size:12px; letter-spacing:.04em;
      opacity:.0; filter: blur(2px);
      background: color-mix(in srgb, var(--c-main) 4%, transparent);
      box-shadow: inset 0 0 10px color-mix(in srgb, var(--c-main) 10%, transparent);
      animation:ghostPop .7s ease forwards;
    }
    @keyframes ghostPop{
      10%{opacity:.18}
      60%{opacity:.14}
      100%{opacity:0}
    }