/* ===================================================================
   15-second cold open — pixel assembly, live code, build, reveal
   Hidden unless JS marks <html class="js-intro">, so no-JS visitors
   never get trapped behind an overlay.
   =================================================================== */
.intro{display:none}
.js-intro .intro{display:block;position:fixed;inset:0;z-index:9999;background:#060D1A;
                 color:#fff;overflow:hidden;contain:strict}
.intro.gone{opacity:0;pointer-events:none;transition:opacity .85s cubic-bezier(.4,0,.2,1)}

.intro__px{position:absolute;inset:0;width:100%;height:100%;display:block}

.intro__glow{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;
             transform:translate(-50%,-50%);pointer-events:none;
             background:radial-gradient(closest-side,rgba(30,91,168,.3),transparent 62%);
             opacity:0;transition:opacity 1.2s ease}
.intro.lit .intro__glow{opacity:1}

/* ---------- act 1 caption ---------- */
.intro__cap{position:absolute;left:0;right:0;top:calc(50% + clamp(60px,9vw,118px));
            text-align:center;padding:0 24px;opacity:0;transform:translateY(12px);
            transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.intro__cap.on{opacity:1;transform:none}
.intro__cap b{display:block;font-size:clamp(11px,1.5vw,13px);font-weight:700;letter-spacing:.3em;
              text-transform:uppercase;color:#7EB0E8}
.intro__cap span{display:block;margin-top:12px;font-size:clamp(14px,1.9vw,18px);
                 color:rgba(255,255,255,.62);letter-spacing:-.01em}

/* ---------- act 2/3 lab ---------- */
.intro__lab{position:absolute;inset:0;display:grid;place-items:center;
            padding:clamp(70px,9vh,110px) clamp(16px,4vw,54px) clamp(84px,11vh,120px);
            opacity:0;transform:scale(.965) translateY(16px);pointer-events:none;
            transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.intro__lab.on{opacity:1;transform:none}
.intro__lab.out{opacity:0;transform:scale(1.07);transition:opacity .7s ease,transform .9s cubic-bezier(.4,0,.2,1)}
.lab{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
     gap:clamp(12px,1.6vw,22px);width:min(1180px,100%);max-height:100%}


/* editor */
.ide{background:rgba(9,17,32,.92);border:1px solid rgba(126,176,232,.22);border-radius:14px;
     overflow:hidden;display:flex;flex-direction:column;min-height:0;
     box-shadow:0 40px 90px -46px rgba(0,0,0,.95)}
.ide__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;
          background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.ide__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);flex:none}
.ide__bar i:first-child{background:#F0615B}.ide__bar i:nth-child(2){background:#F2B544}
.ide__bar i:nth-child(3){background:#4FC47A}
.ide__bar span{margin-left:10px;font-size:11.5px;color:rgba(255,255,255,.5);
               font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ide__code{margin:0;padding:clamp(14px,1.8vw,22px);overflow:hidden;flex:1;min-height:0;
           font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
           font-size:clamp(10.5px,1.18vw,14px);line-height:1.62;white-space:pre-wrap;
           word-break:break-word;color:#CBD8EA}
.tk-key{color:#7EB0E8}.tk-fn{color:#9BE7C4}.tk-str{color:#F2C98A}
.tk-num{color:#D9A7D1}.tk-com{color:#5A6B82;font-style:italic}
.tk-pun{color:#8795A8}.tk-var{color:#E6EDF6}
.caret{display:inline-block;width:7px;height:1.05em;vertical-align:-.18em;background:#7EB0E8;
       margin-left:1px;animation:blink .9s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ide__log{border-top:1px solid rgba(255,255,255,.08);padding:0 clamp(14px,1.8vw,22px);
          font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
          max-height:0;overflow:hidden;transition:max-height .5s ease,padding .4s ease}
.ide__log.on{max-height:190px;padding:12px clamp(14px,1.8vw,22px) 14px}
.ide__log p{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.52);line-height:1.9;
            opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.ide__log p.on{opacity:1;transform:none}
.ide__log p b{color:#4FC47A;font-weight:700}
.ide__log p u{text-decoration:none;margin-left:auto;color:rgba(255,255,255,.3)}
.ide__log p.hi{color:#9BE7C4}

/* live preview */
.prev{background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
      min-height:0;box-shadow:0 40px 90px -44px rgba(0,0,0,.95);
      transform:translateZ(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s}
.prev.pop{transform:scale(1.022);box-shadow:0 46px 100px -40px rgba(30,91,168,.75)}
.prev__bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#EEF3F9;
           border-bottom:1px solid #DCE4EE;flex:none}
.prev__bar i{width:7px;height:7px;border-radius:50%;background:#C9D6E6;flex:none}
.prev__bar u{flex:1;height:7px;border-radius:4px;background:#DCE4EE;margin-left:7px}
.prev__body{padding:clamp(12px,1.5vw,18px);display:grid;gap:9px;align-content:start;
            overflow:hidden;flex:1;min-height:0}
.pb{opacity:0;transform:translateY(10px) scale(.98);
    animation:pbin .55s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes pbin{to{opacity:1;transform:none}}
.pb-nav{display:flex;align-items:center;gap:7px}
.pb-nav b{width:46px;height:9px;border-radius:4px;background:#0A182E}
.pb-nav s{width:26px;height:5px;border-radius:4px;background:#C9D6E6;text-decoration:none}
.pb-nav em{margin-left:auto;width:54px;height:17px;border-radius:999px;background:#1E5BA8}
.pb-hero{padding:clamp(13px,1.8vw,22px);border-radius:10px;display:grid;gap:7px;
         background:linear-gradient(135deg,#0A182E,#13294B);position:relative;overflow:hidden}
.pb-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
                border-radius:50%;background:radial-gradient(closest-side,rgba(126,176,232,.3),transparent)}
.pb-hero b{width:58%;height:12px;border-radius:4px;background:#fff}
.pb-hero u{width:74%;height:6px;border-radius:4px;background:rgba(255,255,255,.3)}
.pb-hero em{width:76px;height:19px;border-radius:999px;background:#7EB0E8;margin-top:4px}
.pb-chips{display:flex;flex-wrap:wrap;gap:5px}
.pb-chips span{font-size:9.5px;font-weight:600;color:#1E5BA8;background:#E8F1FB;
               border:1px solid rgba(30,91,168,.2);padding:4px 9px;border-radius:999px;
               white-space:nowrap}
.pb-row{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;color:#6B7B92}
.pb-row i{width:16px;height:16px;border-radius:5px;background:#E8F1FB;flex:none;
          display:grid;place-items:center}
.pb-row i::after{content:"";width:6px;height:3px;border-left:1.6px solid #1E5BA8;
                 border-bottom:1.6px solid #1E5BA8;transform:rotate(-45deg) translate(1px,-1px)}
.pb-row u{text-decoration:none;margin-left:auto;color:#9FB0C4;font-weight:500}
.pb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pb-grid i{height:clamp(26px,3.2vw,40px);border-radius:8px;background:#F5F8FC;border:1px solid #DCE4EE}

/* ---------- hud ---------- */
.intro__hud{position:absolute;left:0;right:0;bottom:0;z-index:5;
            padding:0 clamp(16px,4vw,54px) clamp(18px,3vh,30px);
            display:flex;align-items:center;gap:18px}
.intro__bar{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.intro__bar i{display:block;height:100%;width:0;border-radius:2px;
              background:linear-gradient(90deg,#1E5BA8,#7EB0E8)}
.intro__skip{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
             color:rgba(255,255,255,.55);background:transparent;border:1px solid rgba(255,255,255,.22);
             padding:9px 17px;border-radius:999px;cursor:pointer;
             transition:color .3s,border-color .3s,background .3s}
.intro__skip:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}

/* while the intro runs, hold the hero's entrance animations at frame zero */
.introlock .wd-line>span,.introlock .wd-sub,.introlock .wd-cta,
.introlock .wd-scroll,.introlock .wd-kicker i,.introlock .wd-scroll span::after{
  animation-play-state:paused}

@media(prefers-reduced-motion:reduce){.js-intro .intro{display:none}}

/* ---------- small screens: stack the editor over the preview, both fitting ---------- */
@media(max-width:860px){
  .intro__lab{padding:clamp(58px,8vh,86px) 14px clamp(76px,10vh,104px)}
  .lab{grid-template-columns:1fr;grid-template-rows:minmax(0,1.12fr) minmax(0,.88fr);
       gap:10px;height:100%}
  .ide__code{font-size:10px;line-height:1.55;padding:13px}
  .ide__log.on{max-height:120px;padding:9px 13px 11px}
  .ide__log{font-size:10px}
  .prev__body{padding:11px;gap:7px}
  .pb-chips span{font-size:9px;padding:3px 7px}
}
@media(max-width:560px){
  .ide__code{font-size:9.2px}
  .intro__cap{top:calc(50% + 70px)}
}