/* ============================================================
   CASIO × RASTRO — Creative Pitch Site v2 (fluid scrollytelling)
   Fonts: Michroma / Syne / Instrument Serif / Questrial / Work Sans
   ============================================================ */

:root{
  --black:#000000;
  --near-black:#0a0a0a;
  --white:#f4f4f2;
  --pure-white:#ffffff;
  --paper:#f2f1ec;
  --ink:#111111;
  --muted:#6a6a6a;
  --muted-2:#3a3a3a;
  --line:rgba(255,255,255,.16);
  --line-ink:rgba(0,0,0,.18);
  --gshock-red:#d11f2d;
  --pervinca:#8f9dff;
  --edge: clamp(20px, 4.4vw, 84px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--black);
  color:var(--white);
  font-family:"Questrial",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gshock-red);color:#fff}

/* ---- Type ---- */
.f-mich{font-family:"Michroma",sans-serif}
.f-syne{font-family:"Syne",sans-serif;font-weight:800}
.serif{font-family:"Instrument Serif",serif}
.serif-it{font-family:"Instrument Serif",serif;font-style:italic}
.wk{font-family:"Work Sans",sans-serif;font-size:clamp(14px,1.12vw,18px);line-height:1.6}
.dim{color:var(--muted)}
.u{text-decoration:underline;text-underline-offset:3px}

.display{font-family:"Syne",sans-serif;font-weight:800;line-height:.92;text-transform:uppercase;letter-spacing:-.005em}
.display.xl{font-size:clamp(40px,7vw,120px)}
.display.lg{font-size:clamp(30px,4.6vw,72px)}
.mtitle{font-family:"Michroma",sans-serif;line-height:1.08;letter-spacing:-.01em}
.mtitle.xl{font-size:clamp(30px,3.6vw,56px)}
.mtitle.lg{font-size:clamp(22px,2.5vw,38px)}
.mtitle.md{font-size:clamp(17px,1.75vw,26px)}
.serif.xl{font-size:clamp(44px,6vw,100px);line-height:.98}
.serif.lg{font-size:clamp(30px,3.8vw,60px);line-height:1.02}
.body{font-family:"Questrial",sans-serif;font-size:clamp(15px,1.32vw,21px);line-height:1.55;letter-spacing:.005em}
.body.lg{font-size:clamp(18px,1.75vw,28px);line-height:1.42}
.stack>*+*{margin-top:1em}
.mt-s{margin-top:.6em}.mt-m{margin-top:1.4em}.mt-l{margin-top:2.4em}

/* ============================================================
   DECKS — free continuous scroll (no snap)
   ============================================================ */
.deck{
  height:100vh;height:100dvh;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--black);
}
.deck::-webkit-scrollbar{display:none}
.deck[hidden]{display:none}

/* section primitives — varied rhythm, not slides */
.sec{position:relative;padding:16vh var(--edge);overflow-x:clip} /* clip: contém bgwords sem quebrar sticky */
.sec.tight{padding:9vh var(--edge)}
.sec.full{min-height:100vh;padding:0;display:flex}
.sec.hero{min-height:100vh;display:flex;align-items:center;padding:0 var(--edge)}
.sec.nopad{padding:0}
.sec.paper{background:var(--paper);color:var(--ink)}
.sec.paper ::selection{background:#111;color:#fff}

/* reveals */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.15s var(--ease)}
.sec.in .reveal{opacity:1;transform:none}
.sec.in .reveal.d1{transition-delay:.09s}
.sec.in .reveal.d2{transition-delay:.2s}
.sec.in .reveal.d3{transition-delay:.33s}
.sec.in .reveal.d4{transition-delay:.48s}
.reveal.slide-l{transform:translateX(-46px)}
.reveal.slide-r{transform:translateX(46px)}
.sec.in .reveal.slide-l,.sec.in .reveal.slide-r{transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}}

/* clip reveal for images */
.clip{clip-path:inset(12% 6% 12% 6% round 14px);transition:clip-path 1.3s var(--ease-io)}
.sec.in .clip{clip-path:inset(0 0 0 0 round 0px)}

/* full-bleed media w/ parallax room
   overscan calibrado: speeds ≤.22 movem ±22px → 108% basta (era 118% = cortava demais) */
.bleed{position:absolute;inset:0;overflow:hidden}
.bleed img{width:100%;height:108%;object-fit:cover;margin-top:-4%}
.bleed.contain img{object-fit:contain;height:100%;margin:0}
.scrim{position:absolute;inset:0;z-index:1}
.scrim.b{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.75))}
.scrim.l{background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 72%)}

/* zoom-settle images */
[data-zoom]{will-change:transform;transform-origin:center center}
[data-prl]{will-change:transform}

/* huge outline background words — device do deck (cf. "VISÃO" outline serif, Camo p.5) */
.bgword{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(130px,24vw,380px);line-height:.8;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
  white-space:nowrap;will-change:transform;
}
.sec.paper .bgword{-webkit-text-stroke:1px rgba(0,0,0,.1)}

/* ============================================================
   PINNED HORIZONTAL GALLERY (scroll-driven filmstrip)
   ============================================================ */
.hpin{position:relative;padding:0}
.hpin .pinbox{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.htrack{display:flex;gap:clamp(14px,2vw,34px);padding:0 var(--edge);will-change:transform;align-items:center}
.htrack .hitem{flex:0 0 auto;height:66vh;position:relative;overflow:hidden;border-radius:10px;background:#101010}
.htrack .hitem img{height:100%;width:auto;object-fit:cover}
.htrack .hitem.big{height:78vh}
.htrack .hitem .cap{position:absolute;left:18px;bottom:14px;font-family:"Michroma";font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hpin .hhint{position:absolute;top:calc(100vh - 52px);left:50%;transform:translateX(-50%);font-family:"Michroma";font-size:9px;letter-spacing:.22em;text-transform:uppercase;opacity:.45;z-index:4}
/* touch fallback: natural horizontal scroll */
@media (pointer:coarse){
  .hpin .pinbox{position:relative;height:auto;overflow-x:auto;padding:8vh 0}
  .htrack{transform:none!important}
  .htrack .hitem{height:56vh}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marq{overflow:hidden;position:relative}
.marq-track{display:flex;gap:18px;width:max-content;animation:marq 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq .card{flex:0 0 auto;border-radius:16px;overflow:hidden}

/* ============================================================
   CHAPTER META (fixed, website-like chrome)
   ============================================================ */
.chapbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:none;justify-content:space-between;align-items:center;
  padding:16px var(--edge);
  font-family:"Michroma",sans-serif;font-size:clamp(9px,.75vw,11px);
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  mix-blend-mode:difference;pointer-events:none;
}
body.in-chapter .chapbar{display:flex}
.chapbar #chapmid{position:absolute;left:50%;transform:translateX(-50%);opacity:.85;transition:opacity .3s}
.chapbar .right{opacity:.85}
.botbar{
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  display:none;justify-content:space-between;align-items:center;
  padding:14px var(--edge);
  font-family:"Questrial",sans-serif;font-size:11px;color:#fff;opacity:.85;
  mix-blend-mode:difference;pointer-events:none;letter-spacing:.02em;
}
body.in-chapter .botbar{display:flex}

/* home button (vertical, left) */
.homebtn{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:75;
  writing-mode:vertical-rl;
  pointer-events:auto;cursor:pointer;mix-blend-mode:difference;display:none;
  font-family:"Michroma",sans-serif;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;opacity:.7;transition:opacity .3s;border:none;background:none;
}
.homebtn:hover{opacity:1}
body.in-chapter .homebtn{display:block}

/* progress bar */
.pbar{position:fixed;top:0;left:0;height:2px;background:#fff;width:0;z-index:80;mix-blend-mode:difference}

/* anchor rail — few section anchors, labeled */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:65;display:none;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:auto;mix-blend-mode:difference}
body.in-chapter .rail{display:flex}
.rail button{position:relative;display:block;background:none;border:none;cursor:pointer;padding:4px 0;width:34px}
.rail button i{display:block;width:18px;height:1.5px;background:rgba(255,255,255,.45);transition:all .35s var(--ease);margin-left:auto}
.rail button:hover i,.rail button.active i{background:#fff;width:34px}
.rail button .lbl{position:absolute;right:42px;top:50%;transform:translateY(-50%);font-family:"Michroma";font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s;white-space:nowrap;pointer-events:none}
.rail button:hover .lbl,.rail button.active .lbl{opacity:.9}
@media (max-width:820px){.rail{display:none!important}}

/* ============================================================
   PORTAL TRANSITION — clique expande a imagem do portal (FLIP)
   ============================================================ */
#transveil{
  position:fixed;inset:0;z-index:150;pointer-events:none;visibility:hidden;
}
#transveil.on{visibility:visible}
#transveil img{
  width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 0 0 0);
  filter:grayscale(.85) brightness(.22); /* véu escuro: não enviesa a expectativa */
  transition:clip-path .75s var(--ease-io), opacity .5s var(--ease);
}
#transveil.fade img{opacity:0}

/* ============================================================
   LIGHTBOX — fotos/pôsteres em tela cheia
   ============================================================ */
#lightbox{
  position:fixed;inset:0;z-index:160;background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
#lightbox.on{opacity:1;visibility:visible}
#lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:4px;box-shadow:0 40px 120px rgba(0,0,0,.8)}
#lightbox .lb-count{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);font-family:"Michroma";font-size:12px;letter-spacing:.14em;color:#fff}
#lightbox .lb-count .tot{opacity:.45}
#lightbox .lb-x{position:absolute;top:22px;right:26px;background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:.7;font-family:"Questrial"}
#lightbox .lb-x:hover{opacity:1}
#lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:22px;opacity:.6;transition:opacity .25s}
#lightbox .lb-nav:hover{opacity:1}
#lightbox .lb-nav.prev{left:8px}
#lightbox .lb-nav.next{right:8px}
#lightbox .lb-nav i{display:block;width:15px;height:15px;border-top:1.5px solid #fff;border-right:1.5px solid #fff}
#lightbox .lb-nav.prev i{transform:rotate(-135deg)}
#lightbox .lb-nav.next i{transform:rotate(45deg)}
@media (max-width:760px){#lightbox .lb-nav{display:none}}

/* zoom affordance nas imagens clicáveis */
.hitem{cursor:zoom-in}
.cluster img{cursor:zoom-in}

/* drag nos filmstrips */
.hpin .pinbox{cursor:grab}
.hpin .pinbox.dragging{cursor:grabbing}
.hpin .pinbox.dragging .hitem{cursor:grabbing}

/* film grain — textura analógica (Kodak Gold do próprio conceito) */
.grain::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* filmstrip counter + progress line */
.hcount{
  position:absolute;right:var(--edge);bottom:5vh;z-index:5;
  font-family:"Michroma",sans-serif;font-size:clamp(11px,1vw,14px);letter-spacing:.14em;
}
.hcount .tot{opacity:.45}
.hline{position:absolute;left:var(--edge);right:var(--edge);bottom:calc(5vh - 14px);height:1px;background:rgba(127,127,127,.3);z-index:5}
.hline i{display:block;height:100%;width:0;background:currentColor;transition:width .2s linear}

/* scroll hint */
.scrollhint{position:absolute;left:var(--edge);bottom:7vh;z-index:6;font-family:"Michroma",sans-serif;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:12px}
.scrollhint::after{content:"";width:1px;height:44px;background:linear-gradient(#fff,transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   HOME + INTRO
   ============================================================ */
#home{position:fixed;inset:0;z-index:50;background:var(--black);transition:opacity .8s var(--ease),visibility .8s}
#home[hidden]{display:block;opacity:0;visibility:hidden;pointer-events:none}
.home-grid{display:grid;grid-template-columns:1fr 1fr;height:100vh;height:100dvh}
.portal{position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;border-right:1px solid var(--line)}
.portal:last-child{border-right:none}
.portal .pbg{position:absolute;inset:0;z-index:0;transition:transform 1.2s var(--ease),filter .9s var(--ease);filter:grayscale(.4) brightness(.5)}
.portal .pbg img{width:100%;height:100%;object-fit:cover}
.portal .pscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.12) 45%,rgba(0,0,0,.86))}
.portal:hover .pbg{transform:scale(1.07);filter:grayscale(0) brightness(.75)}
.portal .pcontent{position:relative;z-index:2;padding:clamp(28px,5vw,72px);width:100%}
.portal .plabel{font-family:"Michroma",sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-bottom:14px}
.portal h2{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(30px,4.2vw,64px);line-height:.94;letter-spacing:-.01em;text-transform:uppercase}
.portal .psub{font-family:"Instrument Serif",serif;font-style:italic;font-size:clamp(18px,1.7vw,27px);opacity:.82;margin-top:10px}
.portal .penter{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-family:"Michroma",sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:.5s var(--ease)}
.portal:hover .penter{opacity:.95;transform:none}
.penter .arw{width:34px;height:1px;background:#fff;position:relative}
.penter .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)}
.home-head{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:26px var(--edge);pointer-events:none}
.home-head .rlogo{font-family:"Syne",sans-serif;font-weight:800;font-size:16px;letter-spacing:.04em}
.home-head .meta{font-family:"Michroma",sans-serif;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;text-align:right}
.home-foot{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;padding:22px var(--edge);pointer-events:none;font-family:"Questrial",sans-serif;font-size:11px;opacity:.55}
.home-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;text-align:center;pointer-events:none;mix-blend-mode:difference}
.home-center .k{font-family:"Michroma",sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
@media (max-width:820px){
  .home-grid{grid-template-columns:1fr}
  .portal{border-right:none;border-bottom:1px solid var(--line)}
}
#intro{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease)}
#intro.gone{opacity:0;pointer-events:none}
#intro img{width:clamp(160px,15vw,220px);animation:intropulse 2.4s var(--ease) infinite}
@keyframes intropulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);align-items:center}
.two.top{align-items:flex-start}
.maxw{max-width:1100px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.offgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,22px)}

/* editorial image cluster */
.cluster{position:relative}
.cluster img{border-radius:10px}

/* sticky text column pattern */
.sticky-side{position:sticky;top:14vh;align-self:start}

/* search no-results cards */
.searchcard{border:1px solid var(--line);border-radius:26px;padding:clamp(24px,3vw,44px);background:rgba(255,255,255,.015)}
.searchcard h4{font-family:"Work Sans",sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,34px);line-height:1.08;margin-bottom:14px}
.searchcard p{font-family:"Work Sans";font-size:clamp(13px,1.05vw,16px);line-height:1.55;color:#c9c9c9}
.searchcard .lk{color:var(--pervinca);text-decoration:underline}
.searchbar{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:40px;padding:13px 22px;font-family:"Work Sans";font-size:15px;color:#bbb;max-width:520px}
.searchbar .cursor{display:inline-block;width:1px;height:18px;background:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* poem box */
.poembox{border:1px dashed rgba(255,255,255,.4);padding:clamp(20px,2.2vw,34px);font-family:"Questrial";font-size:clamp(13px,1.15vw,18px);line-height:1.4}

/* manifesto progressive lines */
[data-linefade] .ln{display:block;opacity:.13;will-change:opacity}

/* @gshockdoL7 reveal tag */
.reveal-tag{position:relative;cursor:pointer;overflow:hidden;border-radius:8px;background:#111}
.tagchip{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.8);background:rgba(18,18,18,.94);color:#fff;font-family:"Michroma",sans-serif;font-size:clamp(10px,1vw,13px);padding:9px 15px;border-radius:9px;opacity:0;transition:.45s var(--ease);pointer-events:none;white-space:nowrap;z-index:3}
.tagchip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:inherit}
.reveal-tag.shown .tagchip{opacity:1;transform:translate(-50%,-50%) scale(1)}
.reveal-tag::before{content:"toque para revelar ↗";position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-family:"Michroma",sans-serif;font-size:9px;letter-spacing:.12em;color:#fff;opacity:.65;transition:.3s;z-index:3;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.reveal-tag.shown::before{opacity:0}
.reveal-tag img{transition:transform .8s var(--ease)}
.reveal-tag:hover img{transform:scale(1.03)}

/* posts grid */
.posts3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);align-items:end}
@media (max-width:900px){.posts3{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* idea numerals */
.numeral{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(300px,52vw,760px);line-height:.75;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.45);user-select:none}

/* image hover lift (editorial) */
.lift{transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.5)}

/* next-chapter footer card */
.nextchap{
  position:relative;min-height:64vh;display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;border-top:1px solid var(--line);
}
.nextchap .nbg{position:absolute;inset:0;filter:grayscale(.5) brightness(.4);transition:filter .8s var(--ease),transform 1.1s var(--ease)}
.nextchap:hover .nbg{filter:grayscale(0) brightness(.65);transform:scale(1.05)}
.nextchap .nbg img{width:100%;height:100%;object-fit:cover}
.nextchap .ncontent{position:relative;z-index:2;text-align:center}
.nextchap .nk{font-family:"Michroma";font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.75;margin-bottom:14px}

@media (max-width:760px){
  .two{grid-template-columns:1fr;gap:26px}
  .sec{padding:12vh 20px}
  .sticky-side{position:static}
  .homebtn{writing-mode:horizontal-tb;left:50%;right:auto;top:auto;bottom:12px;transform:translateX(-50%);
    mix-blend-mode:normal;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:8px 18px;border-radius:30px;opacity:1}
  .chapbar #chapmid{display:none}
  .numeral{font-size:clamp(180px,60vw,300px)}
}

/* ============================================================
   V2 — pitch ao vivo: anti-spoiler, reveals, broadcast, cursor
   ============================================================ */

/* portais às cegas: textura, não KV */
.portal .pbg.blind{filter:grayscale(.85) brightness(.2)}
.portal:hover .pbg.blind{filter:grayscale(.6) brightness(.3);transform:scale(1.07)}
.nextchap .nbg.blind{filter:grayscale(.85) brightness(.18)}
.nextchap:hover .nbg.blind{filter:grayscale(.6) brightness(.26)}

/* masked line reveal — título nasce cortado pela baseline */
.lm{display:block;overflow:hidden}
.lm .li{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease-io)}
.lm .li.d1{transition-delay:.12s}
.sec.in .lm .li{transform:none}
@media (prefers-reduced-motion:reduce){.lm .li{transform:none;transition:none}}

/* foco puxando — 1ª foto do shooting */
.hitem img.blurstart{filter:blur(16px) saturate(.85);transition:filter 1.4s var(--ease-io)}
.hpin.unblurred .hitem img.blurstart{filter:none}

/* BLEND IN. STAND OUT. encenado */
[data-biso] .bi{
  color:transparent;-webkit-text-stroke:1.2px rgba(244,244,242,.16);
  transition:-webkit-text-stroke-color .4s;
}
[data-biso] .so{
  color:transparent;-webkit-text-stroke:1.2px rgba(244,244,242,.16);
}
body.broadcast [data-biso] .bi, body.broadcast [data-biso] .so{-webkit-text-stroke-width:2px}

/* pixel-reveal camaleão */
.pixwrap{position:relative}
.pixwrap .pix{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transition:opacity .25s steps(2)}
.pixwrap .pix1{opacity:1}
.pixwrap .pix2{opacity:0}
.pixwrap.st1 .pix1{opacity:0}
.pixwrap.st1 .pix2{opacity:1}
.pixwrap.st2 .pix1,.pixwrap.st2 .pix2{opacity:0}

/* cursor custom removido — mouse nativo */

/* ============================================================
   MODO TRANSMISSÃO (tecla T) — sobrevive ao codec do Meet
   ============================================================ */
body.broadcast .bgword{-webkit-text-stroke-width:2px}
body.broadcast .sec.paper .bgword{-webkit-text-stroke-width:2px}
body.broadcast .numeral{-webkit-text-stroke-width:2.2px}
body.broadcast .grain::after{opacity:.26;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.broadcast .hhint,body.broadcast .scrollhint{display:none}
body.broadcast .hitem .cap{font-size:12px;opacity:.9}
body.broadcast .hcount{font-size:15px}
body.broadcast .rail .lbl{font-size:11px}
/* chrome sólido (mix-blend difference vira sopa no stream) */
body.broadcast .chapbar,body.broadcast .botbar,body.broadcast .homebtn,body.broadcast .rail,body.broadcast .pbar{mix-blend-mode:normal;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.65)}
body.broadcast.overpaper .chapbar,body.broadcast.overpaper .botbar,body.broadcast.overpaper .homebtn{color:#111;text-shadow:0 1px 8px rgba(242,241,236,.65)}
body.broadcast .pbar{background:#fff}
body.broadcast.overpaper .pbar{background:#111}
/* indicador TX */
#txind{position:fixed;left:var(--edge);bottom:44px;z-index:75;font-family:"Michroma";font-size:9px;letter-spacing:.2em;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s;mix-blend-mode:difference}
body.broadcast #txind{opacity:.65}

/* ajuda de atalhos (tecla ?) */
#kbhelp{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
#kbhelp.on{display:flex}
#kbhelp .box{max-width:560px;width:92%;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,44px)}
#kbhelp h5{font-family:"Michroma";font-size:13px;letter-spacing:.18em;margin-bottom:22px;text-transform:uppercase}
#kbhelp table{width:100%;border-collapse:collapse;font-family:"Questrial";font-size:15px}
#kbhelp td{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
#kbhelp td:first-child{font-family:"Michroma";font-size:11px;letter-spacing:.1em;width:130px;opacity:.8}

/* vídeo em placa contain (camaleão animado) */
.bleed.contain video{width:100%;height:100%;object-fit:contain}

/* BLEND IN. STAND OUT. — explicação interativa: hover num parágrafo camufla a outra metade do título */
.biso-explain .w-bi,.biso-explain .w-so{
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
  -webkit-text-stroke:1.2px transparent;
}
.biso-explain .bcol{border-top:1px solid rgba(255,255,255,.32);padding-top:26px;transition:opacity .45s var(--ease),border-color .45s var(--ease)}
.biso-explain.hl-bi .w-so,
.biso-explain.hl-so .w-bi{color:transparent;-webkit-text-stroke-color:rgba(244,244,242,.22)}
.biso-explain.hl-bi .bcol-so,
.biso-explain.hl-so .bcol-bi{opacity:.32}
.biso-explain.hl-bi .bcol-bi,
.biso-explain.hl-so .bcol-so{border-top-color:#fff}
body.broadcast .biso-explain .w-bi,body.broadcast .biso-explain .w-so{-webkit-text-stroke-width:2px}

/* saída pro site da proposta — discreta no hub, invisível nos capítulos */
.backlink{display:inline-block;margin-top:12px;font-family:"Michroma",sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.55;pointer-events:auto;transition:opacity .3s}
.backlink:hover{opacity:1}
.botbar a,.home-foot a{color:inherit;pointer-events:auto;text-decoration:none;border-bottom:1px solid transparent;transition:border-bottom-color .3s}
.botbar a:hover,.home-foot a:hover{border-bottom-color:currentColor}

/* vídeo com som opcional (clique alterna) */
.vid-sound{cursor:pointer}

/* player mínimo (conteúdo, não loop): botão circular fino + progresso 2px */
.tkplayer{position:relative;height:72vh;border-radius:10px;overflow:hidden;cursor:pointer;background:#111}
.tkplayer video{height:100%;width:auto;display:block}
.tk-btn{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);background:rgba(0,0,0,.28);backdrop-filter:blur(5px);
  cursor:pointer;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tk-btn i{display:block;width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin:0 auto 0 calc(50% - 5px)}
.tkplayer:hover .tk-btn{transform:scale(1.06)}
.tkplayer.playing .tk-btn{opacity:0;transform:scale(.85);pointer-events:none}
.tk-prog{position:absolute;left:14px;right:14px;bottom:12px;height:2px;background:rgba(255,255,255,.25);border-radius:2px;opacity:0;transition:opacity .3s}
.tkplayer.started .tk-prog{opacity:1}
.tk-prog i{display:block;height:100%;width:0;background:#fff;border-radius:2px}