/* ════════════════════════════════════════════════════════════════════
   NEW LIGHTWEIGHT HERO — replaces the 121-frame canvas system.
   --------------------------------------------------------------------
   Pure-CSS animated mesh gradient + radial glow + grain. Zero network
   requests, GPU-accelerated, looks cinematic on every device.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the legacy video — frames are back. */
#cineHeroVideo {
  display: none !important;
}

/* Canvas sits OVER the mesh gradient — the gradient shows through while
   frames are loading, eliminating the "black screen" period. */
#heroFrameCanvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  filter: brightness(0.92) contrast(1.10) saturate(1.08);
  transition: filter 0.6s ease;
}

/* Loader bar above everything until done. */
.hero-frame-loader { z-index: 25; }
.hero-frame-loader.is-done { opacity: 0; pointer-events: none; transition: opacity .6s ease; }

/* Overlay/grain/vignette stay handled by cinematic.css — no duplicates here. */

.cine-hero.cine-hero-css {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* The animated mesh-gradient base — uses brand variables so theme
   changes ripple through automatically. */
.cine-hero.cine-hero-css .cine-hero-stage {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,
      rgba(var(--brand-primary-rgb, 99,102,241), 0.45) 0%,
      transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 20%,
      rgba(var(--brand-secondary-rgb, 236,72,153), 0.38) 0%,
      transparent 55%),
    radial-gradient(ellipse 60% 50% at 60% 80%,
      rgba(var(--brand-accent-rgb, 6,182,212), 0.40) 0%,
      transparent 55%),
    radial-gradient(ellipse 90% 70% at 10% 90%,
      rgba(168, 85, 247, 0.30) 0%,
      transparent 60%),
    linear-gradient(135deg, #02040c 0%, #060a18 50%, #0a0e22 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position: 0% 50%, 100% 0%, 50% 100%, 0% 100%, 0% 0%;
  animation: cine-mesh-drift 22s ease-in-out infinite;
}

@keyframes cine-mesh-drift {
  0%,   100% {
    background-position: 0% 50%, 100% 0%, 50% 100%, 0% 100%, 0% 0%;
  }
  25% {
    background-position: 30% 70%, 70% 30%, 80% 60%, 30% 70%, 0% 0%;
  }
  50% {
    background-position: 100% 50%, 0% 100%, 30% 30%, 100% 30%, 0% 0%;
  }
  75% {
    background-position: 70% 30%, 30% 70%, 60% 80%, 70% 50%, 0% 0%;
  }
}

/* When the hero scrolls offscreen we let the browser skip the CSS animation. */
body.hero-offscreen .cine-hero.cine-hero-css .cine-hero-stage {
  animation-play-state: paused;
}

/* Lite mode — keep the gradient but freeze the animation. */
body.tm-no-bgfx .cine-hero.cine-hero-css .cine-hero-stage,
body.tm-data-lite .cine-hero.cine-hero-css .cine-hero-stage {
  animation: none !important;
}

/* Respect user OS preference. */
@media (prefers-reduced-motion: reduce) {
  .cine-hero.cine-hero-css .cine-hero-stage {
    animation: none !important;
  }
}

/* Light theme — softer, brighter mesh. */
body.light .cine-hero.cine-hero-css .cine-hero-stage {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,
      rgba(var(--brand-primary-rgb, 99,102,241), 0.22) 0%,
      transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 20%,
      rgba(var(--brand-secondary-rgb, 236,72,153), 0.18) 0%,
      transparent 55%),
    radial-gradient(ellipse 60% 50% at 60% 80%,
      rgba(var(--brand-accent-rgb, 6,182,212), 0.22) 0%,
      transparent 55%),
    linear-gradient(135deg, #f8faff 0%, #eef2ff 50%, #e6ecff 100%);
}

/* Legacy retained — original canvas filter rules below kept untouched
   for backward compatibility but they target a hidden element now. */

.cine-hero[data-active-scene="0"] #heroFrameCanvas { filter: brightness(0.85) contrast(1.10) saturate(1.05); }
.cine-hero[data-active-scene="1"] #heroFrameCanvas { filter: brightness(0.90) contrast(1.12) saturate(1.10) hue-rotate(-3deg); }
.cine-hero[data-active-scene="2"] #heroFrameCanvas { filter: brightness(0.92) contrast(1.08) saturate(1.00); }
.cine-hero[data-active-scene="3"] #heroFrameCanvas { filter: brightness(0.95) contrast(1.14) saturate(1.15) hue-rotate(5deg); }

.hero-frame-loader {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  animation: hfl-show 0.4s 0.3s ease forwards;
}
@keyframes hfl-show { to { opacity: 1; } }

.hero-frame-loader-bar {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.hero-frame-loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
[dir="rtl"] .hero-frame-loader-bar-fill { transform-origin: right; }

.hero-frame-loader-text {
  font-family: 'Inter', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
.hero-frame-loader.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.cine-port-gallery {

  transform-style: flat !important;
}
.cine-port-gallery .cine-card,
.cine-card {
  position: relative;
  z-index: 1;

  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) !important;
}
.cine-port-gallery .cine-card:hover {
  z-index: 10 !important;
  transform: translateY(-6px) rotateY(0) rotateX(0) scale(1.03) !important;
}

.cine-card-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer !important;
  z-index: 100 !important;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  pointer-events: auto !important;
  border-radius: inherit;
  display: block;
}
.cine-card-hit:focus-visible {
  outline: 2px solid rgba(var(--brand-primary-rgb, 230, 16, 28), 0.7);
  outline-offset: -2px;
}

#cineModalMedia {
  position: relative;
  background: #0a0508;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cine-modal-video,
.cine-modal-img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  background: #000;
}
.cine-modal-video {
  outline: none;
}
.cine-modal-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cine-modal-spinner-ring {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--brand-primary, #e6101c);
  border-radius: 50%;
  animation: cine-modal-spin 0.85s linear infinite;
}
@keyframes cine-modal-spin {
  to { transform: rotate(360deg); }
}
.cine-modal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 30px;
  min-height: 50vh;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
}
.cine-modal-empty i {
  font-size: 3rem;
  opacity: 0.45;
  color: var(--brand-primary, #e6101c);
}
@media (prefers-reduced-motion: reduce) {
  .cine-modal-spinner-ring { animation-duration: 1.6s; }
}

.cine-card .cine-card-media,
.cine-card .cine-card-media * {
  pointer-events: none !important;
}

.cine-card { animation: none !important; opacity: 1 !important; }

body.hero-offscreen .hv3-fog-layer,
body.hero-offscreen .hv3-beam,
body.hero-offscreen .cine-top-shine::after,
body.hero-offscreen .cine-title-grad,
body.hero-offscreen .cine-eyebrow-dot,
body.hero-offscreen .hslot-media img,
body.hero-offscreen .hslot-media video,
body.hero-offscreen .hslot-play,
body.hero-offscreen .hslot-header .dot,
body.hero-offscreen .cine-scroll-line {
  animation-play-state: paused !important;
}

body.hero-offscreen .hslot video {  }

.cine-title-grad,
.cine-hero-title > span,
.cine-hero-title > span[class*="grad"] {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.cine-scene {
  height: 100vh !important;
  height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: var(--nav-h, 80px) 28px 0 !important;
  box-sizing: border-box;
}
.cine-scene-content {
  width: 100%;
  max-width: 1100px;

  margin-top: -6vh;
}

.cine-scenes {
  z-index: 20 !important;
  position: relative;
}
.cine-scene-content {
  position: relative;
  z-index: 21;
  max-width: 1100px !important;
}

.cine-scene.cine-scene-active .cine-scene-content,
.cine-scene.cine-scene-active .cine-scene-content > *,
.cine-scene.cine-scene-active .cine-hero-title > span,
.cine-scene.cine-scene-active .cine-hero-ctas > * {
  opacity: 1 !important;
  visibility: visible !important;
}

.cine-scene-content::before {
  content: '';
  position: absolute;
  inset: -8% -15% -8% -15%;
  z-index: -1;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%,
      rgba(0, 0, 0, 0.40) 0%,
      rgba(0, 0, 0, 0.18) 50%,
      transparent 75%);
  filter: blur(36px);
  pointer-events: none;
}

.cine-hero[data-active-scene="3"] .hv3-floats {
  filter: blur(2px);
  opacity: 0.6;
  transition: filter 1.2s ease, opacity 1.2s ease;
}

.hv3-float-1, .hv3-float-3, .hv3-float-5 { max-width: 200px !important; }
.hv3-float-2, .hv3-float-4, .hv3-float-6 { max-width: 220px !important; }
@media (max-width: 1100px) {
  .hv3-float-5, .hv3-float-6 { display: none !important; }
}

.cine-hero-title {
  font-size: clamp(2.4rem, 5.6vw, 5rem) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 28px !important;
  position: relative;
  z-index: 25;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
}
.cine-hero-title > br { display: none; }

.cine-hero-title > span {
  display: inline-block;
}

.cine-hero-title > span:first-child {
  font-weight: 300 !important;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, #f4f0e8 0%, #cfc9bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.cine-title-grad {
  font-weight: 800 !important;
  letter-spacing: -0.024em;
  background: linear-gradient(135deg,
    #ffffff 0%,
    #faece2 30%,
    var(--brand-primary-h, #ff3b47) 75%,
    var(--brand-primary, #e6101c) 100%) !important;
  background-size: 180% 180% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter:
    drop-shadow(0 4px 24px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.32))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  animation: cine-title-shift 12s ease-in-out infinite;
}

.cine-title-grad::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--brand-primary-rgb, 230, 16, 28), 0.55) 50%,
    transparent 100%);
}

.cine-hero-eyebrow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.48em !important;
  text-transform: uppercase;
  color: rgba(232, 228, 221, 0.65) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 25;
}
.cine-eyebrow-dot {
  width: 4px !important;
  height: 4px !important;
  background: var(--brand-primary, #e6101c) !important;
  box-shadow: 0 0 8px var(--brand-primary, #e6101c);
  border-radius: 50%;
}

.cine-hero-eyebrow::before,
.cine-hero-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.cine-hero-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.92rem, 1.3vw, 1.1rem) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: rgba(232, 228, 221, 0.55) !important;
  margin: 22px 0 0 !important;
}
.cine-hero-subtitle em {
  font-style: normal;
  color: rgba(255, 220, 200, 0.85);
  font-weight: 400;
  letter-spacing: 0.18em;
}

.cine-hero-desc {
  font-size: clamp(0.96rem, 1.25vw, 1.08rem) !important;
  line-height: 1.9 !important;
  color: rgba(232, 228, 221, 0.72) !important;
  max-width: 620px !important;
  margin: 0 auto 40px !important;
  font-weight: 300 !important;
  letter-spacing: 0.005em;
}

.cine-cta {
  padding: 15px 32px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  border-radius: 100px;
}
.cine-cta-primary {
  background: linear-gradient(135deg,
    var(--brand-primary, #e6101c) 0%,
    var(--brand-primary-h, #ff3b47) 100%) !important;
  box-shadow:
    0 12px 32px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.cine-cta-primary:hover {
  box-shadow:
    0 18px 44px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
.cine-cta-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(16px);
}
.cine-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.cine-hero-logo {
  margin: 0 auto 36px !important;
}
.cine-logo-text {
  font-size: clamp(1.0rem, 1.4vw, 1.25rem) !important;
  letter-spacing: 0.4em !important;
  font-weight: 600 !important;

  background: linear-gradient(180deg, #fafafa 0%, #c8c4ba 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 0.85;
}
.cine-logo-text i {
  font-weight: 600 !important;
}

.cine-hero::before,
.cine-hero::after {
  position: absolute;
  z-index: 18;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  pointer-events: none;
  font-weight: 500;
}
.cine-hero::before {
  content: 'TM · 01 / 04';
  bottom: 32px;
  inset-inline-start: 38px;
}
.cine-hero::after {
  content: '© ' attr(data-year) ' · TECHNO MEDIA';
  bottom: 32px;
  inset-inline-end: 38px;
}
.cine-hero[data-active-scene="0"]::before { content: 'TM · 01 / 04'; }
.cine-hero[data-active-scene="1"]::before { content: 'TM · 02 / 04'; }
.cine-hero[data-active-scene="2"]::before { content: 'TM · 03 / 04'; }
.cine-hero[data-active-scene="3"]::before { content: 'TM · 04 / 04'; }

@media (max-width: 700px) {
  .cine-hero::before,
  .cine-hero::after { font-size: 0.5rem; bottom: 20px; }
  .cine-hero::before { inset-inline-start: 18px; }
  .cine-hero::after  { inset-inline-end: 18px; }
}

.cine-hero-scroll-hint {
  margin-top: 60px !important;
}
.cine-scroll-line {
  height: 60px !important;
}
.cine-scroll-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.55em !important;
}

.cine-hero-overlay {

  background:
    radial-gradient(ellipse 100% 75% at 50% 50%,
      transparent 35%,
      rgba(0, 0, 0, 0.18) 65%,
      rgba(0, 0, 0, 0.55) 90%,
      rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg,
      rgba(5, 3, 7, 0.78) 0%,
      rgba(5, 3, 7, 0.12) 20%,
      rgba(5, 3, 7, 0.05) 50%,
      rgba(5, 3, 7, 0.25) 78%,
      rgba(5, 3, 7, 0.88) 100%) !important;
}

.cine-hero-stage::before {
  height: 110px !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background:

    linear-gradient(180deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0) 100%),

    linear-gradient(90deg,
      rgba(var(--brand-primary-rgb, 230, 16, 28), 0) 0%,
      rgba(var(--brand-primary-rgb, 230, 16, 28), 0.18) 20%,
      rgba(var(--brand-accent-rgb, 255, 148, 102), 0.28) 50%,
      rgba(var(--brand-primary-rgb, 230, 16, 28), 0.18) 80%,
      rgba(var(--brand-primary-rgb, 230, 16, 28), 0) 100%) !important;
}
.cine-hero-stage::after  { height: 200px !important; }

.cine-hero::before {

  display: none !important;
}
.cine-hero-stage > .cine-top-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--brand-primary-rgb, 230, 16, 28), 0.4) 18%,
    rgba(var(--brand-accent-rgb,  255, 148, 102), 0.7) 50%,
    rgba(var(--brand-primary-rgb, 230, 16, 28), 0.4) 82%,
    transparent 100%);
  box-shadow:
    0 0 24px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.35),
    0 0 60px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.18);
  opacity: 0.85;
}

.cine-hero-stage > .cine-top-shine::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 35%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 245, 230, 0.95) 50%,
    transparent 100%);
  filter: blur(1px);
  animation: cine-top-sweep 9s ease-in-out infinite;
}
@keyframes cine-top-sweep {
  0%, 100% { transform: translateX(-50%);  opacity: 0; }
  20%      { opacity: 0.7; }
  50%      { transform: translateX(290%);  opacity: 1; }
  80%      { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-hero-stage > .cine-top-shine::after { animation: none !important; }
}

@media (max-width: 700px) {
  .cine-hero-title { font-size: clamp(2.2rem, 9vw, 4rem) !important; }
  .cine-hero-eyebrow { font-size: 0.66rem !important; padding: 8px 18px !important; }
  .hv3-float-1, .hv3-float-2, .hv3-float-3, .hv3-float-4, .hv3-float-5, .hv3-float-6 {
    display: none !important;
  }
}

body.light .cine-hero,
body.light .cine-hero-stage,
body.light .cine-hero-overlay,
body.light .cine-portfolio,
body.light .cine-port {

  background: #000 !important;
}
body.light .cine-hero-overlay {
  background:
    radial-gradient(ellipse 110% 85% at 50% 50%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.20) 55%,
      rgba(0, 0, 0, 0.55) 85%,
      rgba(0, 0, 0, 0.75) 100%),
    linear-gradient(180deg,
      rgba(5, 3, 7, 0.70) 0%,
      rgba(5, 3, 7, 0.10) 18%,
      rgba(5, 3, 7, 0.05) 45%,
      rgba(5, 3, 7, 0.20) 75%,
      rgba(5, 3, 7, 0.85) 100%) !important;
}
body.light .cine-hero-stage::before,
body.light .cine-hero-stage::after,
body.light .cine-hero-bottom-fade {

  background: revert-layer !important;
}

body.light .cine-hero-eyebrow,
body.light .cine-hero-subtitle,
body.light .cine-hero-desc,
body.light .cine-scroll-text {
  color: rgba(232, 228, 221, 0.78) !important;
  text-shadow: none !important;
}
/* Light mode hero text — use `background-image` (not `background` shorthand)
   so background-clip:text can never be reset. Use dark, brand-colored
   gradients so the text actually READS on a light viewport. */
body.light .cine-hero-title,
body.light .cine-hero-title > span:first-child,
body.light .cine-logo-text {
  background: none !important;
  background-image: linear-gradient(180deg, #0f172a 0%, #1e293b 65%, #334155 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.18)) !important;
}
body.light .cine-title-grad {
  background: none !important;
  background-image: linear-gradient(135deg,
    var(--brand-primary, #e6101c) 0%,
    var(--brand-accent,  #ff9466) 55%,
    var(--brand-primary-h, #ff3b47) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 2px 12px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.25))
    drop-shadow(0 1px 2px rgba(15, 23, 42, 0.15)) !important;
}

/* Final safety net: any element wearing the gradient classes MUST clip
   its background to the text — nothing else can re-paint the whole box. */
body.light .cine-hero-title,
body.light .cine-hero-title > span,
body.light .cine-logo-text,
body.light .cine-title-grad,
body.light .grad-text {
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body.light #heroFrameCanvas {
  filter: brightness(0.85) contrast(1.10) saturate(1.05) !important;
}
body.light .cine-hero[data-active-scene="0"] #heroFrameCanvas { filter: brightness(0.85) contrast(1.10) saturate(1.05) !important; }
body.light .cine-hero[data-active-scene="1"] #heroFrameCanvas { filter: brightness(0.90) contrast(1.12) saturate(1.10) hue-rotate(-3deg) !important; }
body.light .cine-hero[data-active-scene="2"] #heroFrameCanvas { filter: brightness(0.92) contrast(1.08) saturate(1.00) !important; }
body.light .cine-hero[data-active-scene="3"] #heroFrameCanvas { filter: brightness(0.95) contrast(1.14) saturate(1.15) hue-rotate(5deg) !important; }

body.light .cine-scene-content::before {
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%,
      rgba(0, 0, 0, 0.40) 0%,
      rgba(0, 0, 0, 0.18) 50%,
      transparent 75%) !important;
  display: block !important;
}

body.light .cine-hero::before,
body.light .cine-hero::after {
  color: rgba(255, 255, 255, 0.32) !important;
}

body.light .cine-cta-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #fff !important;
  text-shadow: none !important;
}
body.light .cine-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

body.light .cine-top-shine {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--brand-primary-rgb, 230, 16, 28), 0.4) 18%,
    rgba(var(--brand-accent-rgb,  255, 148, 102), 0.7) 50%,
    rgba(var(--brand-primary-rgb, 230, 16, 28), 0.4) 82%,
    transparent 100%) !important;
}
body.light .cine-top-shine::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 245, 230, 0.95) 50%,
    transparent 100%) !important;
}

body.light .hero-frame-loader-text { color: rgba(255, 255, 255, 0.55) !important; }
body.light .hero-frame-loader-bar  { background: rgba(255, 255, 255, 0.12) !important; }

body.light .hslot {
  background: linear-gradient(145deg, #1a0a14 0%, #2a0e1a 100%) !important;
  border-color: rgba(var(--brand-primary-rgb, 230, 16, 28), 0.45) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(var(--brand-primary-rgb, 230, 16, 28), 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
body.light .hslot-header { color: rgba(255, 255, 255, 0.55) !important; }
body.light .hslot-label  { color: #ffffff !important; }
body.light .hslot-play   { background: rgba(255, 255, 255, 0.18) !important; }
body.light .hslot-play::before { border-left-color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════════════
   "NEXT" BUTTON — sits FIXED at the bottom of the viewport while the
   hero is visible. One click = same as the user scrolling to the next
   scene anchor. Natural scroll still works perfectly alongside it.
   ════════════════════════════════════════════════════════════════════ */
.cine-hero-down {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
}
.cine-hero-down:hover {
  transform: translateX(-50%) translateY(-3px);
  background: rgba(var(--brand-primary-rgb, 99,102,241), 0.92);
  border-color: rgba(255,255,255,0.30);
}
.cine-hero-down:active { transform: translateX(-50%) translateY(-1px) scale(.98); }

.cine-hero-down-label {
  display: inline-block;
}
.cine-hero-down-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  display: grid;
  place-items: center;
  font-size: 12px;
  animation: cine-hero-down-bounce 1.8s ease-in-out infinite;
}
@keyframes cine-hero-down-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

body.tm-no-bgfx .cine-hero-down,
body.tm-data-lite .cine-hero-down {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0,0,0,0.75);
}
@media (prefers-reduced-motion: reduce) {
  .cine-hero-down-icon { animation: none; }
}

@media (max-width: 640px) {
  .cine-hero-down {
    bottom: 22px;
    padding: 8px 14px 8px 16px;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 1px;
  }
  .cine-hero-down-icon { width: 26px; height: 26px; font-size: 11px; }
}

.cine-hero-down.is-hidden {
  opacity: 0;
  pointer-events: none;
}