/* ==========================================================================
   FirasMovies — visual identity layer. Loaded LAST (after styles.css, ui.css).

   PERFORMANCE FIRST. An earlier version animated a huge blurred backdrop and
   put backdrop-filter on every card and panel; that was smooth on paper and a
   slideshow in practice. This version uses static gradients, cheap solid
   surfaces, and reserves motion/glow for hover only — no always-on animation,
   no full-screen blur, backdrop-filter only on the handful of truly floating
   surfaces (nav, modals).
   ========================================================================== */
:root {
  --grad-a:#ff2d55; --grad-b:#e50914; --grad-c:#8b1fd8; --grad-d:#2e6bff;
  --brand-grad:linear-gradient(120deg,var(--grad-a),var(--grad-b) 40%,var(--grad-c) 78%,var(--grad-d));
  --surface-1:#14141c; --surface-2:#1b1b26; --hair:rgba(255,255,255,0.08);
  --glow-red:rgba(229,9,20,.30);
}
html[data-theme="light"]{
  --surface-1:#ffffff; --surface-2:#f3f4f8; --hair:rgba(10,12,20,0.09);
  --glow-red:rgba(229,9,20,.18);
}

/* 1. Background — a STATIC gradient on a fixed, GPU-composited layer.
   No filter, no animation, and crucially NOT background-attachment:fixed
   (which repaints on every scroll frame). A position:fixed pseudo-element
   is promoted to its own layer, so scrolling over it costs nothing. */
body { background: var(--bg); }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  background:
    radial-gradient(60vmax 50vmax at 85% -10%, rgba(139,31,216,0.12), transparent 60%),
    radial-gradient(55vmax 45vmax at -10% 8%, rgba(229,9,20,0.12), transparent 55%),
    radial-gradient(60vmax 60vmax at 50% 118%, rgba(46,107,255,0.09), transparent 60%);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(60vmax 50vmax at 85% -10%, rgba(139,31,216,0.08), transparent 60%),
    radial-gradient(55vmax 45vmax at -10% 8%, rgba(229,9,20,0.06), transparent 55%);
}

/* 2. Nav — the one place a blur reads as premium and only renders once. */
#nav>*{ background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand span{
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-avatar{ background: var(--brand-grad) !important; box-shadow: 0 3px 14px var(--glow-red); transition: transform .18s var(--ease), box-shadow .2s var(--ease); }
.nav-avatar:hover{ transform: scale(1.06); box-shadow: 0 5px 20px rgba(229,9,20,.5); }

/* 3. Surfaces — solid, cheap. A hairline + soft shadow gives depth without blur. */
.panel, .stat-strip, .chat-box, .lb-preview{
  background: var(--surface-1);
  border: 1px solid var(--hair);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.stat-cell{ background: transparent; }
.panel{ position: relative; overflow: hidden; }
/* static gradient hairline along the top of panels */
.panel::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--brand-grad); opacity:.85; }

/* 4. Buttons — static gradient fill, glow only on hover. */
.btn:not(.btn-ghost):not(.btn-glass){
  background: var(--brand-grad);
  border: none; color: #fff;
  box-shadow: 0 4px 16px var(--glow-red);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:not(.btn-ghost):not(.btn-glass):hover{ box-shadow: 0 8px 26px rgba(229,9,20,.46); filter: brightness(1.06); }
.btn-ghost{ background: var(--surface-2); border: 1px solid var(--hair); transition: background .18s var(--ease), border-color .18s var(--ease), transform .16s var(--ease); }
.btn-ghost:hover{ border-color: rgba(229,9,20,.5); }

/* 5. Hero — gradient wash on the title, tasteful. Ken Burns only on the ACTIVE
   slide and only for a while (it is one element, so it is affordable). */
.hero-title{
  background: linear-gradient(180deg,#fff 34%, rgba(255,255,255,.78));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-eyebrow{ background: var(--brand-grad); box-shadow: 0 3px 14px var(--glow-red); }
.hero-slide.on{ animation: tk-kenburns 20s ease-out both; }
@keyframes tk-kenburns{ from{ transform: scale(1.03); } to{ transform: scale(1.11); } }

/* 6. Poster cards — glow + gradient ring on HOVER only (no idle animation). */
@media (hover:hover){
  .pcard:hover .pcard-art{ box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px var(--glow-red); border-color: rgba(229,9,20,.55); }
  .card:hover{ box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 22px var(--glow-red); }
}
.pcard-score{ background: linear-gradient(135deg, #ffc43c, #ff8c00); color:#1a1205; font-weight: 800; }
.pcard-badge.new{ background: var(--brand-grad); }

/* 7. Inputs — focus glow, no blur. */
.search-input, .sort-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], textarea, select{
  background: var(--surface-1); border: 1px solid var(--hair);
  transition: border-color .18s var(--ease), box-shadow .2s var(--ease);
}
.search-input:focus, .sort-select:focus, input:focus, textarea:focus, select:focus{
  outline: none; border-color: rgba(229,9,20,.6);
  box-shadow: 0 0 0 3px rgba(229,9,20,.14);
}

/* 8. Active chips — solid gradient, no animation. */
.chip.active{ background: var(--brand-grad) !important; border-color: transparent !important; color:#fff !important; box-shadow: 0 3px 12px var(--glow-red); }

/* 9. Section headings — static gradient underline. */
.row-head h2, .section-head h2, .row-title{ position: relative; display: inline-block; padding-bottom: 6px; }
.row-head h2::after, .section-head h2::after, .row-title::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:40px; border-radius:2px; background: var(--brand-grad);
}

/* 10. Scrollbar / selection */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.24); background-clip:padding-box; }
::-webkit-scrollbar-track{ background: transparent; }
::selection{ background: var(--grad-b); color:#fff; }

/* 11. Page transition — a single cheap fade, no transform-heavy stagger. */
main{ animation: tk-page-in .35s ease both; }
@keyframes tk-page-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* 12. Top loading bar */
.tk-loadbar{ position: fixed; top:0; left:0; height:3px; width:0; z-index: 2147483000; background: var(--brand-grad); box-shadow: 0 0 12px rgba(229,9,20,.6); transition: width .3s var(--ease), opacity .4s var(--ease); }

/* 13. Modals — blur is fine here (rare, on top of a dimmed page). */
.modal, .vmodal, .gate-card{ background: var(--surface-1); border: 1px solid var(--hair); box-shadow: 0 30px 80px rgba(0,0,0,.6); }

/* 14. Player frame */
.player-wrap{ border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px var(--hair); }

/* 15. Footer */
footer, .footer{ border-top: 1px solid var(--hair); }

/* 16. Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-slide.on{ animation: none; }
  main{ animation: none; }
}


/* ===== Corner-to-corner nav (was capped at a centred 1200px column) ===== */
html { overflow-x: hidden; }
.nav-inner { max-width: none !important; padding-left: clamp(18px, 3.4vw, 54px) !important; padding-right: clamp(18px, 3.4vw, 54px) !important; }

/* ===== Mobile tab bar ===== */
.tabbar { background: rgba(10,10,15,.9) !important; border-top: 1px solid var(--hair) !important; box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
html[data-theme="light"] .tabbar { background: rgba(255,255,255,.92) !important; }
.tabbar a { gap: 4px !important; font-size: 0.64rem !important; font-weight: 600; }
.tabbar a .tb-ico {
  width: 44px !important; height: 28px !important; font-size: 1.18rem !important;
  border-radius: 99px !important; background: transparent !important;
  transition: transform .22s var(--ease), background .22s var(--ease);
}
/* Active tab: keep the icon visible, add a soft accent halo, a gradient label,
   and a small top accent bar. No solid gradient blob over the icon. */
.tabbar a.on { color: var(--accent-hover) !important; }
.tabbar a.on .tb-ico {
  background: rgba(229,9,20,.14) !important;
  transform: translateY(-2px) scale(1.06);
}
.tabbar a.on span:not(.tb-ico) {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 800;
}
.tabbar a.on::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand-grad);
}
.tabbar a:active .tb-ico { transform: scale(.9); }