/* RESET GG · 05 · #roteiro (prefixo rt-) */
.roteiro{overflow-x:clip}
.rt-head{max-width:1280px;margin:0 auto clamp(28px,4vw,56px)}
.rt-head .h-scene{margin-bottom:18px}
.rt-lede{font:400 clamp(17px,1.4vw,21px)/1.45 var(--body);color:var(--mute);max-width:46ch}

.rt-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
.rt-side{display:none}

/* ---------- página do roteiro ---------- */
.rt-page{position:relative;max-width:860px;width:100%;margin:0 auto;background:#f0ece9;color:#191512;
  padding:clamp(28px,5vw,80px) clamp(18px,5vw,84px);font:400 clamp(15px,1.15vw,17px)/1.6 var(--script);
  box-shadow:0 40px 90px -40px rgba(255,107,26,.35), 0 0 0 1px rgba(255,255,255,.06)}
.rt-title{text-align:center;font-weight:700;text-decoration:underline;margin-bottom:2em;letter-spacing:.02em}
.rt-fadein,.rt-cutto{text-transform:uppercase}
.rt-fadein{margin-bottom:1.6em}
.rt-step{display:flex;flex-direction:column}
.rt-slug{font-weight:700;text-transform:uppercase;margin-bottom:.8em}
.rt-h{font:700 1em/1.4 var(--script);text-transform:uppercase;margin-bottom:.8em;display:flex;flex-wrap:wrap;column-gap:.5em}
.rt-n{color:#b04200;margin-right:.6em}
.rt-act{max-width:52ch;margin-bottom:.9em}
.rt-dlg{margin:1.1em 0 .4em;padding-left:clamp(0px,12%,120px)}
.rt-who{text-transform:uppercase;padding-left:clamp(0px,18%,120px)}
.rt-par{padding-left:clamp(0px,10%,70px);font-style:italic}
.rt-line{max-width:36ch;overflow-wrap:anywhere}
.rt-cutto{text-align:right;margin:1.2em 0 2em}
.rt-cutto:last-child{font-weight:700;margin-bottom:0}

/* karaokê / máquina de escrever */
.rt-k .rt-w{color:#b4bfc3;transition:color .25s, background-color .25s}
.rt-k .rt-w.on{color:#191512}
.rt-k .rt-n{color:#b4bfc3;transition:color .3s}
.rt-k .rt-step:has(.rt-w.on) .rt-n{color:#b04200}
.rt-w.rt-cur{background:linear-gradient(transparent 62%, rgba(255,107,26,.55) 62%);position:relative}
.rt-w.rt-cur::after{content:"";position:absolute;right:-.62em;top:.12em;bottom:.1em;width:.5em;background:#b04200;animation:rt-blink 1s steps(2,start) infinite}
@keyframes rt-blink{to{visibility:hidden}}

/* ---------- quadro de filme (comum a desktop e mobile) ---------- */
.rt-frame{position:relative;background:radial-gradient(120% 90% at 50% 40%, #18100c 0%, #080605 75%);color:var(--ink);
  padding:clamp(22px,3vw,40px) 34px;border-bottom:6px solid #000;font:400 16px/1.45 var(--body);display:flex;align-items:center}
.rt-frame::before,.rt-frame::after{content:"";position:absolute;top:0;bottom:0;width:22px;background:#000 repeating-linear-gradient(180deg, transparent 0 9px, rgba(232,215,205,.22) 9px 21px, transparent 21px 30px) center / 8px 100% no-repeat}
.rt-frame::before{left:0}.rt-frame::after{right:0}
.rt-in{width:100%;display:grid;gap:16px}
.rt-step > .rt-frame{margin:1em 0 .2em}
.rt-lb{color:var(--cyan);font:600 11px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.rt-note{color:var(--mute);font-size:15px}
.rt-note b{color:var(--ink);font-weight:600}
.rt-note a{color:var(--cyan)}

/* 1. requisitos */
.rt-reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.rt-req{border:1px solid var(--line);background:linear-gradient(160deg, rgba(255,107,26,.10), rgba(0,0,0,.2) 60%);padding:18px;display:grid;gap:6px;align-content:start}
.rt-req b{font:400 clamp(30px,3vw,44px)/1 var(--display);letter-spacing:.02em}
.rt-req p{color:var(--mute);font-size:15px}
.rt-ok{font:600 12px/1 var(--mono);color:var(--cyan-hi);margin-top:6px}
.rt-link{font:600 13px/1 var(--mono);color:#170800;background:var(--cyan);padding:12px 12px;text-decoration:none;justify-self:start;margin-top:6px}
.rt-link:hover{background:var(--cyan-hi)}

/* 2. convite do Discord */
.rt-inv{background:#14100d;border:1px solid rgba(255,107,26,.35);padding:22px;display:grid;gap:14px;box-shadow:0 0 50px -18px rgba(255,107,26,.6)}
.rt-inv-row{display:flex;align-items:center;gap:14px}
.rt-inv-ico{width:60px;height:60px;flex:none;border-radius:16px;background:#000;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.rt-inv-ico img{width:30px}
.rt-inv-row b{display:block;font:400 26px/1 var(--display);letter-spacing:.04em}
.rt-inv-row small{font:500 13px/1.4 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.rt-inv-txt{color:var(--mute);font-size:15px}
.rt-inv .btn{justify-self:stretch;align-items:center}

/* 3. console F8 */
.rt-con{background:#040302;border:1px solid rgba(255,107,26,.4);box-shadow:0 0 60px -20px rgba(255,107,26,.7)}
.rt-con-bar{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.rt-con-bar i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.rt-con-body{padding:18px 16px 22px;font:400 clamp(13px,1.15vw,16px)/1.6 var(--mono)}
.rt-con-dim{color:var(--dim)}
.rt-con-ln{color:var(--cyan);overflow-wrap:anywhere}
.rt-con-ln code{font:600 1em/1.6 var(--mono);color:var(--ink)}
.rt-caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;margin-left:2px;background:var(--cyan);animation:rt-blink 1s steps(2,start) infinite}
.rt-acts{display:flex;flex-wrap:wrap;gap:10px}
.rt-acts .btn{flex:1 1 160px;align-items:center;justify-content:center}

/* 4. passaporte */
.rt-pass{position:relative;background:linear-gradient(150deg,#2d1d13,#160e0a 55%);border:1px solid rgba(255,107,26,.4);padding:16px 18px;overflow:hidden}
.rt-pass::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,107,26,.05) 14px 15px)}
.rt-pass-top{position:relative;display:flex;justify-content:space-between;font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.rt-pass-body{position:relative;display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:start}
.rt-pass-foto{aspect-ratio:3/4;background:#000;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.rt-pass-foto img{width:44%;opacity:.8}
.rt-pass dl{display:grid;gap:8px}
.rt-pass dt{font:500 10px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.rt-pass dd{font:500 17px/1.3 var(--body)}
.rt-id dd{font:600 clamp(16px,1.6vw,20px)/1.3 var(--mono);color:var(--cyan-hi);border:1px dashed var(--cyan);padding:6px 10px;margin-top:3px;background:rgba(255,107,26,.08)}
.rt-mrz{position:relative;margin-top:14px;font:400 12px/1 var(--mono);color:var(--dim);letter-spacing:.12em;white-space:nowrap;overflow:hidden}
.rt-stamp{position:absolute;right:16px;top:54px;font:400 22px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:3px solid var(--cyan);padding:6px 10px 4px;transform:rotate(-12deg);opacity:.85}

/* ---------- desktop com movimento: painel sticky ao lado ---------- */
@media (min-width:900px){
  .rt-split .rt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:stretch}
  .rt-split .rt-side{display:block;position:relative}
  .rt-split .rt-step{min-height:82vh}
  .rt-split .rt-txt{position:sticky;top:calc(var(--bar-top) + 18vh)}
  .rt-split .rt-step:nth-last-child(2){min-height:62vh}
  .rt-split .rt-step:not(.rt-live) .rt-txt{opacity:.55;transition:opacity .4s}
  .rt-split .rt-step.rt-live .rt-txt{opacity:1;transition:opacity .4s}

  .rt-proj{position:sticky;top:calc(var(--bar-top) + 5vh);display:grid;gap:16px}
  .rt-gate{position:relative;height:min(68vh,600px);overflow:clip;background:#000;
    box-shadow:0 0 0 1px rgba(255,107,26,.25), 0 0 90px -20px rgba(255,107,26,.55), 0 50px 120px -40px rgba(0,0,0,.9)}
  .rt-gate::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%);
    animation:rt-scan 6s linear infinite}
  @keyframes rt-scan{to{background-position:0 120px, 0 0}}
  .rt-reel{height:100%;display:flex;flex-direction:column;will-change:transform}
  .rt-reel .rt-frame{flex:none;height:100%;padding-inline:48px}
  .rt-reel .rt-frame::before,.rt-reel .rt-frame::after{width:32px;background-size:12px 100%}
  .rt-flick{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse 60% 45% at 30% 40%, rgba(255,190,140,.55), transparent 70%), linear-gradient(90deg, transparent 20%, rgba(255,107,26,.35) 50%, transparent 80%)}
  .rt-beam{position:absolute;z-index:-1;left:50%;top:-14vh;width:140%;height:calc(100% + 14vh);translate:-50% 0;pointer-events:none;
    background:radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,107,26,.22), transparent 70%);clip-path:polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    animation:rt-proj-flk 3.2s ease-in-out infinite alternate}
  @keyframes rt-proj-flk{0%{opacity:.55}40%{opacity:.85}45%{opacity:.6}100%{opacity:1}}
  .rt-track{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .rt-track li{font:500 12px/1.3 var(--body);color:var(--dim);border-top:2px solid var(--line);padding-top:8px;transition:color .3s, border-color .3s}
  .rt-track li b{display:block;font:600 11px/1 var(--mono);letter-spacing:.14em;margin-bottom:4px}
  .rt-track li.on{color:var(--ink);border-color:var(--cyan)}
  .rt-track li.on b{color:var(--cyan)}
}

/* ---------- final ---------- */
.rt-end{text-align:center;margin-top:clamp(56px,9vw,120px);display:grid;justify-items:center;gap:clamp(22px,3vw,36px)}
.rt-end-t{font:400 clamp(52px,9vw,150px)/1.04 var(--display);text-transform:uppercase}
.rt-end-t.in em{display:inline-block;animation:rt-on 1.1s ease-out both .2s}
@keyframes rt-on{0%{opacity:0;text-shadow:0 0 0 transparent}12%{opacity:1}18%{opacity:.25}26%{opacity:1;text-shadow:-6px 0 rgba(255,107,26,.9), 6px 0 rgba(255,190,140,.5)}100%{opacity:1;text-shadow:0 0 40px rgba(255,107,26,.45)}}
.rt-end-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rt-end-cta .btn-ghost{align-items:center}

/* pausa fora da tela */
.rt-idle *,.rt-idle *::before,.rt-idle *::after{animation-play-state:paused!important}

@media (max-width:899px){
  .rt-page{padding:28px 16px}
  .rt-frame{padding:20px 28px}
  .rt-dlg{padding-left:8%}
}
@media (max-width:420px){
  .rt-pass-body{grid-template-columns:64px 1fr;gap:12px}
  .rt-stamp{top:auto;bottom:6px;right:10px;font-size:17px}
  .rt-inv{padding:16px}
  .rt-inv-row small{font-size:11px}
  .rt-inv .btn-label{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .rt-caret,.rt-w.rt-cur::after{animation:none}
  .rt-end-t.in em{animation:none}
}