:root {

  --cine-deep:      #050307;
  --cine-charcoal:  #0c0a10;
  --cine-silver:    #e6e3df;
  --cine-fog:       rgba(20, 8, 12, 0.6);


  --cine-red:       var(--brand-primary, #e6101c);
  --cine-red-soft:  var(--brand-primary-h, #ff3b47);
  --cine-amber:     var(--brand-accent, #ff9466);
  --cine-red-rgb:   var(--brand-primary-rgb, 230, 16, 28);
  --cine-amber-rgb: var(--brand-accent-rgb, 255, 148, 102);
  --cine-red-glow:  rgba(var(--cine-red-rgb), 0.55);
}

body.light .cine-hero-overlay,
body.light .cine-port {
  --cine-fog: rgba(8, 8, 14, 0.5);
}

.hero-legacy-hidden { display: none !important; }

.cine-hero {
  position: relative;
  width: 100%;
  background: #000;
  isolation: isolate;
  margin-top: calc(var(--nav-h, 80px) * -1);
  overflow: visible;
}

.cine-hero-stage {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 1;
}

.cine-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  filter: brightness(0.85) contrast(1.10) saturate(1.05);
  transition: filter 1.2s ease, transform 2s ease;
  will-change: filter, transform;
}

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

.cine-hero-overlay {
  position: absolute;
  inset: 0;
  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%);
  z-index: 1;
}

.cine-hero-stage::before,
.cine-hero-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 70px;
  background: linear-gradient(180deg, #000 0%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
.cine-hero-stage::after {
  bottom: 0; top: auto;
  background: linear-gradient(0deg, #000 0%, transparent 100%);
  height: 180px;
}
.cine-hero-stage::before { top: 0; height: 100px; }

.cine-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.cine-hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 2;
}
.cine-hero-glow-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--cine-red-glow) 0%, transparent 70%);
  top: 15%; inset-inline-end: -10%;
  animation: cine-glow-drift-1 18s ease-in-out infinite;
}
.cine-hero-glow-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(var(--cine-amber-rgb),0.35) 0%, transparent 70%);
  bottom: 10%; inset-inline-start: -8%;
  animation: cine-glow-drift-2 22s ease-in-out infinite;
}
@keyframes cine-glow-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.65; }
  50%      { transform: translate(-40px, 30px) scale(1.2); opacity: 0.95; }
}
@keyframes cine-glow-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate(50px, -40px) scale(1.15); opacity: 0.8; }
}

.cine-hero-streak {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cine-red-soft), transparent);
  filter: blur(2px);
  opacity: 0.45;
}
.streak-1 {
  width: 70%;
  top: 28%; left: 15%;
  transform: rotate(-12deg);
  animation: cine-streak-fade 8s ease-in-out infinite;
}
.streak-2 {
  width: 55%;
  bottom: 32%; right: 10%;
  transform: rotate(8deg);
  animation: cine-streak-fade 11s ease-in-out infinite 3s;
}
@keyframes cine-streak-fade {
  0%, 100% { opacity: 0; transform: translateX(-50px) rotate(-12deg); }
  50%      { opacity: 0.45; transform: translateX(50px) rotate(-12deg); }
}

.cine-hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.cine-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cine-silver);
  box-shadow: 0 0 8px rgba(230, 227, 223, 0.6);
  opacity: 0;
  animation: cine-particle-rise 12s linear infinite;
}
.cine-particle.p1 { left:  8%; animation-delay:  0s; animation-duration: 14s; }
.cine-particle.p2 { left: 22%; animation-delay:  2s; animation-duration: 11s; }
.cine-particle.p3 { left: 35%; animation-delay:  5s; animation-duration: 13s; width: 3px; height: 3px; }
.cine-particle.p4 { left: 48%; animation-delay:  1s; animation-duration: 15s; }
.cine-particle.p5 { left: 62%; animation-delay:  7s; animation-duration: 12s; width: 5px; height: 5px; background: var(--cine-amber); box-shadow: 0 0 12px var(--cine-amber); }
.cine-particle.p6 { left: 75%; animation-delay:  3s; animation-duration: 14s; }
.cine-particle.p7 { left: 88%; animation-delay:  6s; animation-duration: 10s; width: 3px; height: 3px; }
.cine-particle.p8 { left: 95%; animation-delay:  9s; animation-duration: 13s; background: var(--cine-red-soft); box-shadow: 0 0 14px var(--cine-red-soft); }
@keyframes cine-particle-rise {
  0%   { transform: translateY(110vh) translateX(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}

.cine-scenes {
  position: relative;
  z-index: 5;

  margin-top: -100vh;
  margin-top: -100svh;
}

.cine-scene {
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 90px 24px 40px;
  position: relative;
}

.cine-scene-content {
  max-width: 920px;
  text-align: center;
  color: var(--cine-silver);
  opacity: 0;
  pointer-events: none;

  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cine-scene.cine-scene-active .cine-scene-content {
  opacity: 1;
  pointer-events: auto;
}

.cine-scene-content > *,
.cine-scene-content .cine-hero-title > span,
.cine-scene-content .cine-hero-ctas > * {
  opacity: 0;
  will-change: transform, opacity, filter;
}

.cine-scene[data-scene="0"].cine-scene-active .cine-hero-logo        { animation: cine-rise-blur 1.1s 0.15s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="0"].cine-scene-active .cine-hero-eyebrow     { animation: cine-rise-blur 1.1s 0.35s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="0"].cine-scene-active .cine-hero-title > span:first-child { animation: cine-rise-blur 1.3s 0.55s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="0"].cine-scene-active .cine-hero-title > span:last-child  { animation: cine-rise-glow 1.5s 0.85s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="0"].cine-scene-active .cine-hero-subtitle    { animation: cine-rise-blur 1.1s 1.15s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="0"].cine-scene-active .cine-hero-scroll-hint { animation: cine-rise-blur 1.0s 1.45s cubic-bezier(.16,1,.3,1) both; }

@keyframes cine-rise-blur {
  0%   { opacity: 0; transform: translateY(40px) scale(0.96); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes cine-rise-glow {
  0%   { opacity: 0; transform: translateY(40px) scale(0.94); filter: blur(10px) brightness(0.6); }
  60%  { opacity: 1; filter: blur(0) brightness(1.3); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}

.cine-scene[data-scene="1"].cine-scene-active .cine-hero-eyebrow     { animation: cine-slide-in-right 0.9s 0.15s cubic-bezier(.22,1,.36,1) both; }
.cine-scene[data-scene="1"].cine-scene-active .cine-hero-title > span:first-child { animation: cine-slide-chroma-r 1.1s 0.4s cubic-bezier(.22,1,.36,1) both; }
.cine-scene[data-scene="1"].cine-scene-active .cine-hero-title > span:last-child  { animation: cine-slide-chroma-l 1.2s 0.65s cubic-bezier(.22,1,.36,1) both; }
.cine-scene[data-scene="1"].cine-scene-active .cine-hero-desc        { animation: cine-slide-in-right 1.0s 0.95s cubic-bezier(.22,1,.36,1) both; }

@keyframes cine-slide-in-right {
  0%   { opacity: 0; transform: translateX(-80px); filter: blur(6px); }
  100% { opacity: 1; transform: translateX(0);     filter: blur(0); }
}
@keyframes cine-slide-chroma-r {

  0%   { opacity: 0; transform: translateX(120px); filter: blur(8px); text-shadow: -8px 0 rgba(255,80,80,0.7), 8px 0 rgba(80,200,255,0.7); }
  60%  { opacity: 1; filter: blur(0); text-shadow: -2px 0 rgba(255,80,80,0.4), 2px 0 rgba(80,200,255,0.4); }
  100% { opacity: 1; transform: translateX(0);    filter: blur(0); text-shadow: 0 4px 40px rgba(0,0,0,0.55); }
}
@keyframes cine-slide-chroma-l {
  0%   { opacity: 0; transform: translateX(-120px); filter: blur(8px); text-shadow: -8px 0 rgba(255,80,80,0.7), 8px 0 rgba(80,200,255,0.7); }
  60%  { opacity: 1; filter: blur(0); text-shadow: -2px 0 rgba(255,80,80,0.4), 2px 0 rgba(80,200,255,0.4); }
  100% { opacity: 1; transform: translateX(0);     filter: blur(0); text-shadow: 0 4px 40px rgba(0,0,0,0.55); }
}

.cine-scene[data-scene="2"].cine-scene-active .cine-hero-eyebrow     { animation: cine-fade-down 0.9s 0.15s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="2"].cine-scene-active .cine-hero-title > span:first-child { animation: cine-zoom-reveal 1.3s 0.4s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="2"].cine-scene-active .cine-hero-title > span:last-child  { animation: cine-zoom-reveal-rotate 1.4s 0.7s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="2"].cine-scene-active .cine-hero-desc        { animation: cine-fade-down 0.9s 1.15s cubic-bezier(.16,1,.3,1) both; }

@keyframes cine-zoom-reveal {
  0%   { opacity: 0; transform: scale(0.4) translateY(-20px); filter: blur(20px); letter-spacing: 0.5em; }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); letter-spacing: -0.02em; }
}
@keyframes cine-zoom-reveal-rotate {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); filter: blur(24px) brightness(2); }
  50%  { opacity: 1; filter: blur(2px) brightness(1.4); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) brightness(1); }
}
@keyframes cine-fade-down {
  0%   { opacity: 0; transform: translateY(-30px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

.cine-scene[data-scene="3"].cine-scene-active .cine-hero-eyebrow     { animation: cine-fade-down 0.9s 0.15s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="3"].cine-scene-active .cine-hero-title > span:first-child { animation: cine-drop-impact 1.0s 0.4s cubic-bezier(.5,2,.3,1) both; }
.cine-scene[data-scene="3"].cine-scene-active .cine-hero-title > span:last-child  { animation: cine-drop-impact 1.0s 0.65s cubic-bezier(.5,2,.3,1) both; }
.cine-scene[data-scene="3"].cine-scene-active .cine-hero-desc        { animation: cine-rise-blur 1.0s 1.0s cubic-bezier(.16,1,.3,1) both; }
.cine-scene[data-scene="3"].cine-scene-active .cine-hero-ctas > *:nth-child(1) { animation: cine-cta-spring 0.9s 1.35s cubic-bezier(.34,1.56,.64,1) both; }
.cine-scene[data-scene="3"].cine-scene-active .cine-hero-ctas > *:nth-child(2) { animation: cine-cta-spring 0.9s 1.55s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes cine-drop-impact {
  0%   { opacity: 0; transform: translateY(-100px) scale(1.3); filter: blur(12px); }
  40%  { opacity: 1; transform: translateY(8px) scale(1.05); filter: blur(0); }
  70%  { transform: translateY(-3px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes cine-cta-spring {
  0%   { opacity: 0; transform: translateY(40px) scale(0.7); }
  60%  { transform: translateY(-6px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cine-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 245, 230, 0.0) 0%,
    rgba(255, 220, 200, 0.0) 50%,
    rgba(var(--cine-red-rgb), 0.0) 100%);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cine-flash.cine-flash-on {
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(255, 245, 230, 0.18) 0%,
    rgba(255, 220, 200, 0.08) 40%,
    rgba(var(--cine-red-rgb), 0.10) 100%);
  animation: cine-flash-pulse 0.7s ease-out;
}
@keyframes cine-flash-pulse {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

.cine-progress { display: none !important; }

.cine-hero-content {
  position: relative;
  z-index: 10;
  max-width: 960px;
  text-align: center;
  color: var(--cine-silver);
}

.cine-hero-logo {
  margin: 0 auto 28px;
}
.cine-logo-text {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--cine-silver);
  display: inline-flex;
  align-items: center;
  gap: 4px;

  background: linear-gradient(180deg, #fff 0%, #d4d0cb 50%, #8e8a85 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 30px rgba(255, 255, 255, 0.1);
}
.cine-logo-text i {
  font-style: normal;
  background: linear-gradient(180deg, var(--cine-red-soft) 0%, var(--cine-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.cine-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(230, 227, 223, 0.8);
  font-weight: 600;
  margin-bottom: 26px;
}
.cine-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cine-red);
  box-shadow: 0 0 12px var(--cine-red);
  animation: cine-dot-pulse 2s ease-in-out infinite;
}
@keyframes cine-dot-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--cine-red); }
  50%      { box-shadow: 0 0 24px var(--cine-red), 0 0 4px var(--cine-red-soft); }
}

.cine-hero-title {
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow:
    0 4px 40px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.4);

  transform-style: preserve-3d;
}
.cine-hero-title > span:first-child {
  display: inline-block;

  background: linear-gradient(180deg, #fff 0%, #d4d0cb 70%, #a8a39c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cine-title-grad {
  display: inline-block;
  background: linear-gradient(135deg,
    #fff 0%,
    #ffd6cb 25%,
    var(--cine-amber) 55%,
    var(--cine-red-soft) 80%,
    var(--cine-red) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: cine-title-shift 8s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(var(--cine-red-rgb),0.25));
}
@keyframes cine-title-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.cine-hero-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(230, 227, 223, 0.85);
  margin: 0 0 24px;
}
.cine-hero-subtitle em {
  font-style: normal;
  color: var(--cine-red-soft);
  font-weight: 700;
  position: relative;
}

.cine-hero-desc {
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  line-height: 1.85;
  color: rgba(230, 227, 223, 0.7);
  max-width: 620px;
  margin: 0 auto 38px;
}

.cine-hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.cine-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.35s,
              background 0.3s;
  will-change: transform;
}

.cine-cta-primary {
  background: linear-gradient(135deg, var(--cine-red) 0%, var(--cine-red-soft) 100%);
  color: #fff;
  box-shadow:
    0 14px 40px rgba(var(--cine-red-rgb),0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cine-cta-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.7s;
}
.cine-cta-primary:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 22px 55px rgba(var(--cine-red-rgb),0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cine-cta-primary:hover::before { left: 160%; }
.cine-cta-arrow { transition: transform 0.3s; }
.cine-cta-primary:hover .cine-cta-arrow { transform: translateX(-4px); }
html[dir="ltr"] .cine-cta-primary:hover .cine-cta-arrow { transform: translateX(4px) rotate(180deg); }
html[dir="ltr"] .cine-cta-arrow { transform: rotate(180deg); }

.cine-cta-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
}
.cine-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}
.cine-cta-ghost i {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cine-red), var(--cine-red-soft));
  font-size: 0.7rem;
  color: #fff;
}

.cine-hero-scroll-hint {
  margin-top: 50px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cine-scroll-line {
  width: 1.5px;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: cine-scroll-line 2.2s ease-in-out infinite;
}
@keyframes cine-scroll-line {
  0%   { transform: scaleY(0.3); transform-origin: top; }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0.3); transform-origin: bottom; }
}
.cine-scroll-text {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.cine-hero-bottom-fade {
  position: relative;
  height: 120px;
  margin-top: -120px;
  background: linear-gradient(180deg, transparent, var(--cine-deep) 90%);
  z-index: 8;
  pointer-events: none;
}

@keyframes cine-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cine-blur-reveal {
  from { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.cine-portfolio {
  position: relative;
  padding: 130px 24px 150px;
  background: var(--cine-deep);
  overflow: hidden;
  isolation: isolate;
}
.cine-portfolio::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(var(--cine-red-rgb),0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(var(--cine-amber-rgb),0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: cine-port-glow 14s ease-in-out infinite alternate;
}
@keyframes cine-port-glow {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-3%, 2%); }
}
.cine-portfolio::after {

  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.cine-port-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.cine-port-sweep::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 30%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(var(--cine-amber-rgb),0.06) 40%,
    rgba(var(--cine-red-rgb),0.1) 50%,
    rgba(var(--cine-amber-rgb),0.06) 60%,
    transparent 100%);
  transform: skewX(-12deg);
  filter: blur(40px);
}
.cine-port-sweep.run::before {
  animation: cine-sweep-run 2.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cine-sweep-run {
  from { left: -30%; }
  to   { left: 130%; }
}

.cine-port-head {
  max-width: 1100px;
  margin: 0 auto 80px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.cine-port-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  color: rgba(var(--cine-red-rgb),0.9);
  font-weight: 700;
  margin-bottom: 22px;

  text-transform: uppercase;
}
.cine-port-eyebrow::before, .cine-port-eyebrow::after {
  content: '';
  width: 50px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--cine-red), transparent);
}
.cine-port-title {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 900;
  margin: 0 0 20px;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.cine-port-title > span:first-child {
  background: linear-gradient(180deg, #fff 0%, #d4d0cb 65%, #a8a39c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-inline-end: 12px;
}
.cine-port-title em {
  font-style: normal;
  background: linear-gradient(135deg,
    #fff 0%,
    #ffd6cb 25%,
    var(--cine-amber) 55%,
    var(--cine-red-soft) 80%,
    var(--cine-red) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 18px rgba(var(--cine-red-rgb),0.3));
  animation: cine-title-shift 8s ease-in-out infinite;
}
.cine-port-sub {
  color: rgba(230, 227, 223, 0.7);
  font-size: 1.05rem;
  line-height: 1.85;
  max-width: 640px;
  margin: 0 auto;
}

.cine-port-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px auto 0;
  max-width: 800px;
}
.cine-port-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(230, 227, 223, 0.75);
  padding: 8px 18px;
  border-radius: 100px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.25s;
}
.cine-port-chip:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.cine-port-chip.active {
  background: linear-gradient(135deg, var(--cine-red), var(--cine-red-soft));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(var(--cine-red-rgb),0.4);
}

.cine-port-gallery {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 70px;
  gap: 14px;
  perspective: 1800px;
  perspective-origin: 50% 35%;
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;

  --mx: 0; --my: 0;
  transform:
    rotateY(calc(var(--mx) * 4deg))
    rotateX(calc(var(--my) * -3deg));
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}

.cine-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cine-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(var(--depth, 0px)) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform 0.5s cubic-bezier(.22,1,.36,1),
              box-shadow 0.5s,
              filter 0.4s;
  opacity: 0;
  animation: cine-card-rise 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.cine-card[data-delay="1"] { animation-delay: 0.1s; }
.cine-card[data-delay="2"] { animation-delay: 0.22s; }
.cine-card[data-delay="3"] { animation-delay: 0.34s; }
.cine-card[data-delay="4"] { animation-delay: 0.46s; }
.cine-card[data-delay="5"] { animation-delay: 0.58s; }
.cine-card[data-delay="6"] { animation-delay: 0.70s; }
.cine-card[data-delay="7"] { animation-delay: 0.82s; }
@keyframes cine-card-rise {
  from { opacity: 0; transform: translateZ(-100px) translateY(60px) rotateX(20deg); filter: blur(10px); }
  to   { opacity: 1; transform: translateZ(var(--depth, 0px)) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); filter: blur(0); }
}

/* Smaller cards — more per row. 12-col grid:
   • reel/design/square/narrow → 3 cols = 4 cards per row
   • wide                     → 4 cols = 3 cards per row
   • feature                  → 4 cols = 3 cards per row (still stands out via row span) */
.cine-card-reel    { grid-column: span 3; grid-row: span 5; --depth: 0px;   --ry:  -2deg; }
.cine-card-design  { grid-column: span 3; grid-row: span 4; --depth: -40px; --ry:  3deg; }
.cine-card-wide    { grid-column: span 4; grid-row: span 4; --depth: -20px; --ry:  -1deg; }
.cine-card-square  { grid-column: span 3; grid-row: span 3; --depth: -60px; --ry:  2deg; }
.cine-card-feature { grid-column: span 4; grid-row: span 5; --depth: 20px;  --ry:  -1.5deg; }
.cine-card-narrow  { grid-column: span 3; grid-row: span 4; --depth: -30px; --ry:  1.5deg; }

.cine-card-media,
.cine-card-media video,
.cine-card-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;

  filter: contrast(1.05) saturate(1.08);
}
.cine-card-media {
  background: linear-gradient(135deg, var(--cine-charcoal), #18121a);
}

.cine-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 65%,
    rgba(5,3,7,0.55) 100%);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.5s;
  z-index: 2;
}
.cine-card:hover::after { opacity: 0.85; }

.cine-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(var(--cine-red-rgb),0.15) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 4;
  pointer-events: none;
}
.cine-card:hover::before { opacity: 1; }

.cine-card:hover {
  transform: translateZ(40px) translateY(-6px) rotateY(0deg) rotateX(0deg) scale(1.025);

  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(var(--cine-amber-rgb),0.25),
    0 0 80px rgba(var(--cine-red-rgb),0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 10;
}

.cine-port-gallery:hover .cine-card:not(:hover) {
  filter: brightness(0.75) saturate(0.85);
  transform: translateZ(var(--depth, 0px)) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(0.99);
}

.cine-port-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: rgba(230, 227, 223, 0.5);
  font-size: 0.95rem;
}
.cine-port-empty i { font-size: 3rem; opacity: 0.3; display: block; margin-bottom: 16px; }

.cine-port-more-wrap {
  max-width: 1280px;
  margin: 50px auto 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}
.cine-port-more[hidden] { display: none; }
.cine-port-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  border-radius: 100px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(.16,1,.3,1);
}
.cine-port-more::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.3) 0%,
    transparent 50%,
    rgba(var(--cine-red-rgb),0.4) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
}
.cine-port-more::after {

  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.7s;
  pointer-events: none;
}
.cine-port-more:hover {
  background: linear-gradient(135deg,
    rgba(var(--cine-red-rgb),0.15) 0%,
    rgba(var(--cine-amber-rgb),0.08) 100%);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow:
    0 24px 50px rgba(var(--cine-red-rgb),0.3),
    0 0 30px rgba(var(--cine-amber-rgb),0.15);
}
.cine-port-more:hover::before { opacity: 1; }
.cine-port-more:hover::after { left: 140%; }

.cine-port-more-text { position: relative; z-index: 1; }
.cine-port-more-count {
  position: relative; z-index: 1;
  padding: 3px 11px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--cine-red), var(--cine-red-soft));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(var(--cine-red-rgb),0.4);
}
.cine-port-more-arrow {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cine-red), var(--cine-red-soft));
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 12px rgba(var(--cine-red-rgb),0.4);
}
.cine-port-more:hover .cine-port-more-arrow {
  transform: translateY(3px);
  animation: cine-arrow-bob 1s ease-in-out infinite;
}
@keyframes cine-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.cine-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5, 3, 7, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.08s linear;
}
.cine-modal.open {
  display: flex;
  opacity: 1;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.cine-modal-frame {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  background: var(--cine-charcoal);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.8),
    0 0 80px rgba(var(--cine-red-rgb),0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: scale(0.98);
  transition: transform 0.1s ease-out;
  display: flex;
  flex-direction: column;
}
.cine-modal.open .cine-modal-frame { transform: scale(1); }
.cine-modal-media {
  flex: 1;
  display: grid;
  place-items: center;
  background: #000;
  max-width: 92vw;
}
.cine-modal-media video,
.cine-modal-media img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}
.cine-modal-info {
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cine-modal-info-text strong { display: block; font-size: 1rem; }
.cine-modal-info-text small { color: rgba(230, 227, 223, 0.55); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cine-modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 10;
  transition: all 0.25s;
}
.cine-modal-close:hover {
  background: var(--cine-red);
  transform: rotate(90deg) scale(1.1);
}

@media (max-width: 900px) {

  .cine-scene { padding: 80px 18px 30px; }
  .cine-hero-eyebrow { font-size: 0.65rem; padding: 7px 14px; }
  .cine-hero-glow-1 { width: 320px; height: 320px; }
  .cine-hero-glow-2 { width: 260px; height: 260px; }


  .cine-progress { inset-inline-end: 12px; gap: 8px; }
  .cine-progress-dot { width: 3px; height: 16px; }
  .cine-progress-dot.active { height: 28px; }

  .cine-cta { padding: 14px 24px; font-size: 0.9rem; }
  .cine-cta-ghost i { width: 26px; height: 26px; font-size: 0.62rem; }


  .cine-portfolio { padding: 80px 18px 90px; }
  .cine-port-head { margin-bottom: 36px; }
  .cine-port-eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; }
  .cine-port-eyebrow::before, .cine-port-eyebrow::after { width: 28px; }
  .cine-port-chip { padding: 7px 14px; font-size: 0.74rem; }


  .cine-port-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 50px;
    gap: 12px;
    perspective: 1400px;

    transform: none !important;
  }

  .cine-card-reel    { grid-column: span 1; grid-row: span 5; }
  .cine-card-design  { grid-column: span 1; grid-row: span 4; }
  .cine-card-wide    { grid-column: span 2; grid-row: span 4; }
  .cine-card-square  { grid-column: span 1; grid-row: span 3; }
  .cine-card-feature { grid-column: span 2; grid-row: span 5; }
  .cine-card-narrow  { grid-column: span 1; grid-row: span 4; }


  .cine-card:hover {
    transform: translateZ(15px) translateY(-3px) scale(1.01);
  }
  .cine-port-gallery:hover .cine-card:not(:hover) {
    filter: brightness(0.85);
    transform: translateZ(var(--depth, 0px)) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(1);
  }
}

@media (max-width: 600px) {
  .cine-hero-eyebrow { letter-spacing: 0.14em; padding: 6px 12px; font-size: 0.6rem; }
  .cine-hero-glow-1, .cine-hero-glow-2 { width: 220px; height: 220px; }
  .cine-hero-streak { display: none; }

  .cine-hero-video { animation: none; transform: scale(1.05); }


  .cine-portfolio { padding: 60px 14px 80px; }
  .cine-port-title { font-size: 1.8rem; }
  .cine-port-sub { font-size: 0.92rem; }
  .cine-port-eyebrow { font-size: 0.6rem; letter-spacing: 0.32em; gap: 10px; }
  .cine-port-eyebrow::before, .cine-port-eyebrow::after { width: 20px; }
  .cine-port-filters { gap: 6px; }
  .cine-port-chip { padding: 6px 12px; font-size: 0.7rem; }

  .cine-port-gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 45px;
    gap: 10px;
  }
  .cine-card-reel    { grid-column: span 1; grid-row: span 5; }
  .cine-card-design  { grid-column: span 1; grid-row: span 4; }
  .cine-card-wide    { grid-column: span 2; grid-row: span 4; }
  .cine-card-square  { grid-column: span 1; grid-row: span 3; }
  .cine-card-feature { grid-column: span 2; grid-row: span 5; }
  .cine-card-narrow  { grid-column: span 1; grid-row: span 4; }
}

@media (max-width: 480px) {
  .cine-hero-ctas { flex-direction: column; width: 100%; gap: 10px; }
  .cine-hero-ctas .cine-cta { width: 100%; justify-content: center; }
  .cine-hero-scroll-hint { display: none; }
}

body.light .cine-hero {
  background: #f5f7fb;
}
body.light .cine-hero-video {

  filter: brightness(0.65) contrast(1.10) saturate(1.0);
}
body.light .cine-hero-overlay {
  background:
    radial-gradient(ellipse 100% 75% at 50% 50%,
      rgba(245, 247, 251, 0.10) 0%,
      rgba(245, 247, 251, 0.40) 55%,
      rgba(245, 247, 251, 0.75) 85%,
      rgba(245, 247, 251, 0.92) 100%),
    linear-gradient(180deg,
      rgba(245, 247, 251, 0.65) 0%,
      rgba(245, 247, 251, 0.15) 25%,
      rgba(245, 247, 251, 0.25) 55%,
      rgba(245, 247, 251, 0.55) 80%,
      rgba(245, 247, 251, 0.92) 100%);
}
body.light .cine-hero-stage::before { background: linear-gradient(180deg, rgba(245,247,251,0.95) 0%, transparent 100%); }
body.light .cine-hero-stage::after  { background: linear-gradient(0deg,   rgba(245,247,251,0.98) 0%, transparent 100%); }
body.light .cine-hero-bottom-fade   { background: linear-gradient(180deg, transparent, rgba(245,247,251,0.95) 60%, #f5f7fb 100%); }

body.light .cine-hero-eyebrow,
body.light .cine-hero-subtitle,
body.light .cine-hero-desc,
body.light .cine-scroll-text,
body.light .cine-port-eyebrow,
body.light .cine-port-sub,
body.light .cine-port-chip,
body.light .cine-modal-info-text small {
  color: rgba(15, 23, 42, 0.75) !important;
}
body.light .cine-hero-title,
body.light .cine-port-title,
body.light .cine-logo-text {
  color: #0f172a !important;
}

body.light .cine-title-grad {
  background: linear-gradient(135deg,
    #0f172a 0%,
    var(--cine-amber) 40%,
    var(--cine-red-soft) 70%,
    var(--cine-red) 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

body.light .cine-portfolio { background: #ffffff; }
body.light .cine-portfolio::before { background: linear-gradient(180deg, #f5f7fb 0%, transparent 100%); }
body.light .cine-portfolio::after  { background: linear-gradient(0deg,   #f5f7fb 0%, transparent 100%); }
body.light .cine-port-chip {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
}
body.light .cine-port-chip:hover {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.25);
}
body.light .cine-card {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  border-color: rgba(15, 23, 42, 0.08);
}
body.light .cine-card:hover {
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.2),
    0 0 40px rgba(var(--cine-red-rgb), 0.18),
    0 0 70px rgba(var(--cine-amber-rgb), 0.12);
}

body.light .cine-port-more {
  background: rgba(255,255,255,0.7);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
  backdrop-filter: blur(12px);
}
body.light .cine-port-more:hover {
  background: linear-gradient(135deg,
    rgba(var(--cine-red-rgb), 0.1) 0%,
    rgba(var(--cine-amber-rgb), 0.06) 100%);
}
body.light .cine-port-more-text { color: #0f172a; }
body.light .cine-port-empty p { color: rgba(15, 23, 42, 0.55); }
body.light .cine-port-empty i { color: rgba(15, 23, 42, 0.3); }

@media (prefers-reduced-motion: reduce) {

  .cine-hero-glow,
  .cine-particle,
  .cine-hero-streak,
  .cine-eyebrow-dot,
  .cine-hero-grain {
    animation: none !important;
  }

  .cine-title-grad { animation: none !important; }

  .cine-port-sweep::before { animation: none !important; }
  .cine-port-more-arrow i { animation: none !important; }
}

body.cine-lite .cine-hero-video {
  display: none !important;
}
body.cine-lite .cine-hero-stage {
  background:
    radial-gradient(ellipse 60% 80% at 50% 60%, rgba(var(--cine-red-rgb),0.25), transparent 70%),
    linear-gradient(180deg, var(--cine-deep) 0%, var(--cine-charcoal) 100%);
}
body.light.cine-lite .cine-hero-stage {
  background:
    radial-gradient(ellipse 60% 80% at 50% 60%, rgba(var(--cine-red-rgb), 0.15), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f0f2f7 100%);
}
body.cine-lite .cine-particle,
body.cine-lite .cine-hero-streak,
body.cine-lite .cine-hero-grain { display: none !important; }
body.cine-lite .cine-card video { display: none !important; }
body.cine-lite .cine-card-media::after {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.4);
  font-size: 2.5rem;
  pointer-events: none;
}

.cine-card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.cine-card-vfallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(236,72,153,.10));
  color: rgba(255,255,255,.35);
  font-size: 2.4rem;
}

.cine-card-play {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: #fff;
  font-size: 14px;
  padding-left: 3px;
  z-index: 4;
  pointer-events: none;
  transition: transform .25s ease, background .25s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.cine-card:hover .cine-card-play {
  transform: scale(1.1);
  background: rgba(var(--brand-primary-rgb, 99,102,241), 0.95);
}
[dir="rtl"] .cine-card-play {
  right: auto; left: 14px;
}

body.tm-no-bgfx .cine-card-play { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,0.7); }

.cine-card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
  pointer-events: none;
  background: transparent;
}
.cine-card-preview-video.is-ready {
  opacity: 1;
}
.cine-card-media {
  position: relative;
  isolation: isolate;
}

/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO MODAL — navigation polish + card hover overlay refresh
   ════════════════════════════════════════════════════════════════════ */

/* Prev/Next arrow buttons. */
.cine-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 18px;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 11;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.cine-modal-nav:hover {
  background: rgba(var(--brand-primary-rgb, 99,102,241), 0.85);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-50%) scale(1.08);
}
.cine-modal-nav:active { transform: translateY(-50%) scale(0.96); }
.cine-modal-prev { left: 24px; }
.cine-modal-next { right: 24px; }
[dir="rtl"] .cine-modal-prev { left: auto; right: 24px; }
[dir="rtl"] .cine-modal-next { right: auto; left: 24px; }

@media (max-width: 640px) {
  .cine-modal-nav { width: 44px; height: 44px; font-size: 15px; }
  .cine-modal-prev { left: 12px; }
  .cine-modal-next { right: 12px; }
  [dir="rtl"] .cine-modal-prev { right: 12px; }
  [dir="rtl"] .cine-modal-next { left: 12px; }
}

/* Counter badge. */
.cine-modal-counter {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 11;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
  min-width: 70px;
  text-align: center;
}

/* Lite mode — drop the backdrop blur. */
body.tm-no-bgfx .cine-modal-nav,
body.tm-no-bgfx .cine-modal-counter,
body.tm-data-lite .cine-modal-nav,
body.tm-data-lite .cine-modal-counter {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0,0,0,0.78);
}

/* Card hover overlay — show title + category on hover. */
.cine-card {
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.cine-card:hover {
  transform: translateY(-4px) scale(1.015);
}
.cine-card.is-open {
  outline: 2px solid rgba(var(--brand-primary-rgb, 99,102,241), 0.7);
  outline-offset: 2px;
}

.cine-card-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 18px 16px;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.65) 60%,
    transparent 100%
  );
  color: #fff;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.cine-card:hover .cine-card-info,
.cine-card:focus-visible .cine-card-info { opacity: 1; transform: none; }

.cine-card-info-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(var(--brand-accent-rgb, 6,182,212), 1);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.cine-card-info-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  max-width: 90%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

@media (max-width: 640px) {
  .cine-card-info { padding: 14px 12px 10px; opacity: 1; transform: none; }
  .cine-card-info-cat { font-size: 10px; margin-bottom: 3px; }
  .cine-card-info-title { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS MODE — when the reel modal opens, freeze the rest of the page
   so the modal video gets full CPU/GPU/network resources.
   ════════════════════════════════════════════════════════════════════ */
body.tm-focus-mode {
  /* Pause every CSS animation on the page (mesh gradient, marquee, etc.) */
}
body.tm-focus-mode *:not(.cine-modal):not(.cine-modal *) {
  animation-play-state: paused !important;
  transition: none !important;
}
body.tm-focus-mode #heroFrameCanvas,
body.tm-focus-mode .bg-orb,
body.tm-focus-mode .grid-overlay,
body.tm-focus-mode #hv3Particles,
body.tm-focus-mode .cine-hero-particles,
body.tm-focus-mode .cine-hero-glow,
body.tm-focus-mode .cine-hero-streak,
body.tm-focus-mode .hv3-fog-wrap,
body.tm-focus-mode .hv3-beams,
body.tm-focus-mode .cine-port-sweep {
  visibility: hidden !important;
}
body.tm-focus-mode .trust-strip-track,
body.tm-focus-mode .cine-mesh-drift {
  animation: none !important;
}
body.tm-focus-mode .cine-card-preview-video,
body.tm-focus-mode .reel-preview-video {
  display: none !important;
}

/* Modal itself fully animated/transitioned — the rule above excludes it. */
.cine-modal,
.cine-modal * { animation-play-state: running !important; }

/* ════════════════════════════════════════════════════════════════════
   ANIMATED CARD COVER — 4 frames captured client-side from the start
   of the video, crossfading on a 4-second loop. Pure CSS, no decoder.
   ════════════════════════════════════════════════════════════════════ */
.tm-anim-cover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(236,72,153,.08));
}
.tm-anim-cover-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  will-change: opacity;
  /* Each frame is on screen for (1/N) of the cycle, with a short fade. */
  --tm-cover-duration: 4s;
  animation: tm-cover-cycle var(--tm-cover-duration) linear infinite;
  animation-delay: calc(var(--tm-cover-i) * var(--tm-cover-duration) / var(--tm-cover-count));
}
@keyframes tm-cover-cycle {
  /* Each frame is visible for ~50% of the cycle. With staggered delays
     equal to (duration / N), the next frame fades IN while the current
     one fades OUT — buttery crossfade, no flashes. */
  0%    { opacity: 0; }
  12.5% { opacity: 1; }
  37.5% { opacity: 1; }
  50%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* Pause when offscreen, in focus mode, or user prefers reduced motion. */
body.hero-offscreen .tm-anim-cover-frame,
body.tm-focus-mode  .tm-anim-cover-frame {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .tm-anim-cover-frame { animation: none; }
  .tm-anim-cover-frame:first-child { opacity: 1; }
}
body.tm-no-bgfx .tm-anim-cover-frame:not(:first-child) { display: none; }
body.tm-no-bgfx .tm-anim-cover-frame:first-child { opacity: 1; animation: none; }

/* ════════════════════════════════════════════════════════════════════
   CINEMATIC CARD COVER VIDEO — looping video as the card thumbnail.
   Replaces frame-extraction approach. Native <video>, no CORS, no canvas.
   ════════════════════════════════════════════════════════════════════ */
.cine-card-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.10));
  z-index: 0;
}
/* Poster fallback sits behind the video. */
.cine-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  display: block;
}
.cine-card-media video + img { z-index: -1; }

body.tm-focus-mode .cine-card-cover-video { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO FILTER + LIMIT — pure CSS hide/show, no DOM rebuild
   ════════════════════════════════════════════════════════════════════ */

/* Hide cards whose category doesn't match the active filter. */
.cine-port-gallery[data-filter="reel"]   .cine-card:not([data-cat="reel"]),
.cine-port-gallery[data-filter="design"] .cine-card:not([data-cat="design"]),
.cine-port-gallery[data-filter="brand"]  .cine-card:not([data-cat="brand"]) {
  display: none;
}

/* Hide cards above the "show more" limit. */
.cine-port-gallery .cine-card.is-over-limit {
  display: none;
}