/* ============================================================
   TTR CINEMATIC v9 — All fixes
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .ttr-cin-loader,.ttr-cin-grain,.ttr-cin-cursor,.ttr-cin-tick-tape{display:none!important}
}

.ttr-cin-loader{position:fixed;inset:0;z-index:100000;background:#08090c;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.ttr-cin-loader-mark{font-family:'Bebas Neue',sans-serif;font-size:72px;color:#D4AF37;letter-spacing:10px;opacity:0;text-shadow:0 0 40px rgba(212,175,55,.3)}
.ttr-cin-loader-bar{width:140px;height:1px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;opacity:0}
.ttr-cin-loader-fill{width:0;height:100%;background:#D4AF37}

.ttr-cin-grain{position:fixed;inset:0;z-index:99990;pointer-events:none;opacity:.018;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
.ttr-cin-cursor{position:fixed;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:99989;background:radial-gradient(circle,rgba(212,175,55,.04) 0%,transparent 55%);transform:translate(-250px,-250px);will-change:transform}

.ttr-cin-tick-tape{position:absolute;bottom:0;left:0;right:0;height:36px;z-index:3;overflow:hidden;border-top:1px solid rgba(212,175,55,.08);background:rgba(10,11,14,.7);backdrop-filter:blur(10px)}
.ttr-cin-tick-inner{display:flex;gap:48px;align-items:center;height:100%;white-space:nowrap;will-change:transform;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.5px;color:#888}
.ttr-cin-tick-inner span{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.ttr-cin-tick-inner .ttr-cin-g{color:#4CAF50}
.ttr-cin-tick-inner .ttr-cin-r{color:#E53935}
.ttr-cin-tick-inner .ttr-cin-sym{color:#D0D0C8;font-weight:600}

.ttr-cin-sweep{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.12) 48%,rgba(255,255,255,.06) 50%,rgba(212,175,55,.12) 52%,transparent 100%);transform:translateX(-120%);will-change:transform}

.ttr-cin-active .ttr-nav{backdrop-filter:blur(24px) saturate(180%)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;background:rgba(28,31,38,.78)!important}
.ttr-cin-active .ttr-nav-links a:not(.ttr-nav-btn){position:relative}
.ttr-cin-active .ttr-nav-links a:not(.ttr-nav-btn)::after{content:'';position:absolute;bottom:5px;left:16px;right:16px;height:1px;background:#D4AF37;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.19,1,.22,1)}
.ttr-cin-active .ttr-nav-links a:not(.ttr-nav-btn):hover::after{transform:scaleX(1);transform-origin:left}

.ttr-cin-active .ttr-btn-gold{transition:box-shadow .35s ease,transform .25s cubic-bezier(.34,1.56,.64,1)!important;will-change:transform}
.ttr-cin-active .ttr-btn-gold:hover{box-shadow:0 0 12px rgba(212,175,55,.25),0 4px 24px rgba(212,175,55,.15)!important}
.ttr-cin-active .ttr-btn-ghost{transition:border-color .3s ease,box-shadow .3s ease,transform .25s cubic-bezier(.34,1.56,.64,1)!important;will-change:transform}
.ttr-cin-active .ttr-btn-ghost:hover{border-color:#D4AF37!important;box-shadow:0 0 15px rgba(212,175,55,.08)!important}

.ttr-cin-active .ttr-sig-row{transition:background .2s ease}
.ttr-cin-active .ttr-sig-row:hover{background:rgba(212,175,55,.03)}
.ttr-cin-active .ttr-sig-row:hover .ttr-sig-gain{text-shadow:0 0 16px rgba(76,175,80,.4)!important}
.ttr-cin-active .ttr-stat-num{text-shadow:0 0 20px rgba(212,175,55,.15)}

.ttr-cin-active .ttr-pc{transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s ease,border-color .3s ease!important}
.ttr-cin-active .ttr-pc:hover{transform:translateY(-8px)!important;box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 20px rgba(212,175,55,.04)!important}
.ttr-cin-active .ttr-pc.hot:hover{box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 35px rgba(212,175,55,.08)!important;border-color:rgba(212,175,55,.7)!important}

.ttr-cin-active .ttr-tm{transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s ease,border-color .3s ease!important}
.ttr-cin-active .ttr-tm:hover{transform:translateY(-5px)!important;box-shadow:0 14px 40px rgba(0,0,0,.25),0 0 15px rgba(212,175,55,.04)!important}

.ttr-cin-active .ttr-foot-col a{transition:color .2s ease,transform .2s ease!important}
.ttr-cin-active .ttr-foot-col a:hover{transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   NUCLEAR FIX: Kill ALL layout-thrashing animations on panels
   The inline HTML has .ttr-panel::after with left:-100% animated
   to left:150% via @keyframes ttr-siren-gold. This causes the
   panel to recalculate layout every frame = visible resize.
   Also kill ttr-num-glow which pulses text-shadow on gains.
   ══════════════════════════════════════════════════════════════ */
.ttr-cin-active .ttr-panel::after,
.ttr-cin-active .ttr-discord-perks::after{
  left:0!important;
  width:50%!important;
  animation:ttr-cin-clean-sweep 3s linear infinite!important;
}
@keyframes ttr-cin-clean-sweep{
  0%{transform:translateX(-200%) translateZ(0)!important}
  100%{transform:translateX(400%) translateZ(0)!important}
}

/* Kill the inline ttr-siren-gold keyframes from ever applying */
.ttr-cin-active .ttr-panel,
.ttr-cin-active .ttr-discord-perks{
  overflow:hidden!important;
}

/* Kill ttr-num-glow on gains — we handle glow ourselves */
.ttr-cin-active .ttr-sig-gain{
  animation:none!important;
  text-shadow:0 0 8px rgba(76,175,80,.2)!important;
  transition:text-shadow .3s ease!important;
  min-width:110px!important;
  text-align:right!important;
  display:inline-block!important;
}

@media(max-width:900px){
  .ttr-cin-cursor,.ttr-cin-tick-tape{display:none!important}
  .ttr-cin-loader-mark{font-size:52px;letter-spacing:8px}
}