/* ============================================
   TONO · motion layer
   Subtle, monochrome, brand-strict.
   Only color exception: the REC red used sparingly
   on the cursor + timecode dot (camera reference).
   ============================================ */

:root{
  --rec:#c4332b;
}

/* ---------- 12. top playhead progress ---------- */
.playhead{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;background:transparent}
.playhead .bar{height:100%;width:0%;background:var(--paper);position:relative;transition:width .12s linear}
.playhead .knob{position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--paper);transform:translateY(-50%);box-shadow:0 0 0 4px rgba(248,248,248,.12)}
.playhead .knob::before{content:"";position:absolute;inset:3px;background:var(--ink);border-radius:50%}

/* ---------- 1. REC cursor ---------- */
.rec-cursor{position:fixed;z-index:90;pointer-events:none;width:74px;height:24px;transform:translate(-50%,-50%) scale(.4);opacity:0;transition:opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);mix-blend-mode:difference;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#fff;font-weight:500}
.rec-cursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rec-cursor .dot{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 var(--rec);animation:recPulse 1.4s ease-out infinite}
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(196,51,43,.6)}100%{box-shadow:0 0 0 10px rgba(196,51,43,0)}}
@media(hover:none){.rec-cursor{display:none}}

/* ---------- 6. live timecode ---------- */
.timecode{position:absolute;left:40px;bottom:40px;z-index:3;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.timecode .rdot{width:7px;height:7px;border-radius:50%;background:var(--rec);box-shadow:0 0 8px rgba(196,51,43,.6);animation:tcBlink 1.4s steps(1) infinite}
.timecode .lbl{color:var(--paper);font-weight:500}
.timecode .v{color:var(--paper);font-weight:500;font-variant-numeric:tabular-nums}
@keyframes tcBlink{50%{opacity:.25}}
@media(max-width:720px){.timecode{left:22px;bottom:24px}}

/* ---------- 5. stutter reveal on section headings ---------- */
.stutter{display:inline-block;opacity:0}
.stutter.run{animation:stutterIn .7s steps(1) forwards}
@keyframes stutterIn{
  0%{opacity:0;transform:translateX(-8px) skewX(-4deg)}
  12%{opacity:1;transform:translateX(0)}
  20%{opacity:.2}
  32%{opacity:1;transform:translateX(2px)}
  46%{opacity:.4}
  62%{opacity:1;transform:translateX(-1px)}
  78%{opacity:.8}
  100%{opacity:1;transform:translateX(0) skewX(0)}
}

/* ---------- 9. wipe transition between sections ---------- */
.section-wipe{position:fixed;left:0;right:0;height:100vh;top:0;background:var(--paper);z-index:75;pointer-events:none;transform:translateY(-100%);opacity:0}
.section-wipe.dark{background:var(--ink)}
.section-wipe.fire{animation:wipeRun .55s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wipeRun{
  0%{transform:translateY(-100%);opacity:1}
  45%{transform:translateY(0);opacity:1}
  55%{transform:translateY(0);opacity:1}
  100%{transform:translateY(100%);opacity:1}
}

/* ---------- 10. ticker glitch ---------- */
.ticker.glitch .track{animation:scroll 32s linear infinite}
.ticker.glitch{animation:tickerGlitch 12s steps(1) infinite}
@keyframes tickerGlitch{
  0%, 92%, 100%{filter:none}
  93%{filter:contrast(1.4) hue-rotate(2deg)}
  94%{filter:none}
  95%{filter:contrast(1.2)}
}

/* ---------- 11. button play-ripple ---------- */
.btn{position:relative;overflow:hidden}
.btn .ripple{position:absolute;pointer-events:none;border-radius:50%;background:currentColor;opacity:.18;transform:translate(-50%,-50%) scale(0);animation:rip .65s ease-out forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(20);opacity:0}}

/* ---------- 14. breathing "tom." ---------- */
.tom-wrap.breathe{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}

/* ---------- 4. parallax helpers ---------- */
.hero-wave,.hero .headline,.hero-vignette{will-change:transform}

/* ---------- 3. reels marquee strip ---------- */
.reels-strip{position:relative;background:var(--ink);padding:56px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);overflow:hidden}
.reels-strip .strip-label{display:flex;justify-content:space-between;align-items:center;padding:0 40px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.reels-strip .strip-label .lbl b{color:var(--paper);font-weight:500}
.reels-strip .strip-label .meter{display:flex;gap:5px}
.reels-strip .strip-label .meter span{display:inline-block;width:3px;height:14px;background:var(--paper);opacity:.2;animation:meter 1.6s ease-in-out infinite}
.reels-strip .strip-label .meter span:nth-child(2){animation-delay:.15s}
.reels-strip .strip-label .meter span:nth-child(3){animation-delay:.3s}
.reels-strip .strip-label .meter span:nth-child(4){animation-delay:.45s}
.reels-strip .strip-label .meter span:nth-child(5){animation-delay:.6s}
@keyframes meter{0%,100%{opacity:.2;transform:scaleY(.6)}50%{opacity:.95;transform:scaleY(1.4)}}

.reels-strip .strip-track{display:flex;gap:18px;animation:strip 50s linear infinite;width:max-content;padding:0 18px}
.reels-strip.paused .strip-track{animation-play-state:paused}
@keyframes strip{to{transform:translateX(-50%)}}
.reels-strip .mini-reel{position:relative;width:210px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#0a0a0a;border:1px solid var(--line);flex-shrink:0;cursor:pointer;transition:transform .35s ease, border-color .35s}
.reels-strip .mini-reel:hover{transform:translateY(-6px) scale(1.02);border-color:var(--paper)}
.reels-strip .mini-reel .reel-inner{position:absolute;inset:0;background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px),
  linear-gradient(180deg,#222 0%,#0a0a0a 100%);
  transition:opacity .4s ease
}
.reels-strip .mini-reel .reel-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.6) 100%)}
.reels-strip .mini-reel .reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none;background:#0a0a0a}
.reels-strip .mini-reel.has-video .reel-vid{opacity:1}
.reels-strip .mini-reel.has-video .reel-inner{opacity:0}
.reels-strip .mini-reel.has-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:1}
.reels-strip .mini-reel .ml{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);opacity:.85;z-index:2}
.reels-strip .mini-reel .ml b{display:block;font-weight:500}
.reels-strip .mini-reel .ml .seg{color:var(--muted);font-size:8px}
.reels-strip .mini-reel.has-video .ml{opacity:.95}
.reels-strip .mini-reel.has-video .ml .seg{color:rgba(255,255,255,.7)}
.reels-strip .mini-reel .play-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(248,248,248,.9);display:grid;place-items:center;color:#111;transition:.3s;z-index:2}
.reels-strip .mini-reel.has-video .play-ic{opacity:0}
.reels-strip .mini-reel:hover .play-ic{transform:translate(-50%,-50%) scale(1.1);background:var(--paper)}
.reels-strip .mini-reel .play-ic svg{width:12px;height:12px}
.reels-strip .mini-reel .scrub{position:absolute;left:10px;right:10px;bottom:10px;height:2px;background:rgba(255,255,255,.18);overflow:hidden;z-index:2}
.reels-strip .mini-reel .scrub::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,30%);background:var(--paper)}
.reels-strip .mini-reel .tc{position:absolute;right:10px;bottom:18px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--paper);opacity:.8;z-index:2}

/* "Em roteirização" placeholder reel */
.reels-strip .mini-reel-soon{cursor:default;opacity:.55}
.reels-strip .mini-reel-soon:hover{transform:none;border-color:var(--line)}
.reels-strip .mini-reel-soon .play-ic{display:none}
.reels-strip .mini-reel-soon .soon-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--paper);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:2;text-align:center;white-space:nowrap}

/* ---------- 7. scrubbable mini-reels ---------- */
.reels-strip .mini-reel .scrub::after{transition:width .08s linear}

/* ---------- clients marquee ---------- */
.clients-strip{background:var(--paper);color:var(--ink);padding:54px 0;border-top:1px solid rgba(27,27,27,.1);border-bottom:1px solid rgba(27,27,27,.1);overflow:hidden;position:relative}
.clients-strip .strip-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 40px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(27,27,27,.55)}
.clients-strip .strip-head b{color:var(--ink);font-weight:500}
.clients-strip .clients-track{display:flex;gap:80px;animation:strip 38s linear infinite;width:max-content;align-items:center;padding:0 40px}
.clients-strip .client{font-family:var(--serif);font-weight:600;font-size:38px;letter-spacing:-.025em;color:var(--ink);opacity:.85;white-space:nowrap;display:flex;align-items:center;gap:18px;transition:opacity .3s}
.clients-strip .client:hover{opacity:1}
.clients-strip .client::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.3}
.clients-strip .client:last-child::after{display:none}

/* ---------- 15. CTA particles ---------- */
.cta-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cta-particles span{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--paper);opacity:0;animation:partRise linear infinite}
@keyframes partRise{
  0%{transform:translateY(20px) translateX(0);opacity:0}
  10%{opacity:.65}
  90%{opacity:.4}
  100%{transform:translateY(-100vh) translateX(var(--dx,0));opacity:0}
}

/* ---------- 8. scroll-velocity wave ---------- */
.hero-wave,.cta-wave{transition:filter .3s ease}
.hero-wave.fast svg,.cta-wave.fast svg{filter:url(#none)}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .stutter.run,.tom-wrap.breathe,.rec-cursor .dot,.timecode .rdot,
  .reels-strip .strip-track,.clients-strip .clients-track,.ticker .track,
  .cta-particles span{animation:none!important}
  .rec-cursor{display:none}
  .section-wipe.fire{display:none}
}