:root {
    --tlc-cine-red: #e12635;
    --tlc-cine-cyan: #49cfff;
    --tlc-cine-violet: #8c70ff;
    --tlc-cine-ink: #05070b;
}

body.tlc-cinematic-page #main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--tlc-cine-ink);
}

.tlc-cinematic-stage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 6;
    height: clamp(620px, 68vw, 940px);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    contain: layout paint style;
    transition: opacity 700ms ease;
}

/* The shared polish layer positions every direct #main child. On cinematic
 * pages, the stage is the actual opener and contains the existing WordPress H1. */
body.tlc-cinematic-page:not(.home) #main > .tlc-cinematic-stage {
    position: relative;
    z-index: 1;
    height: clamp(380px, 32vw, 460px);
}

body.tlc-cinematic-page:not(.home) #main > #content {
    z-index: 2;
}

body.tlc-cinematic-page .tlc-cinematic-stage > .tlc-cinematic-title {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

body.tlc-cinematic-page .tlc-cinematic-title .page-title-bg {
    opacity: 0.2;
}

body.tlc-cinematic-page .tlc-cinematic-title .page-title-inner {
    position: relative;
    z-index: 102;
}

body.tlc-cinematic-page .tlc-cinematic-title .title-overlay {
    background: linear-gradient(90deg, rgba(3, 6, 10, 0.9), rgba(3, 6, 10, 0.16) 68%, rgba(3, 6, 10, 0.34));
}

body.tlc-cinematic-production .tlc-cinematic-title .title-overlay {
    background: linear-gradient(90deg, rgba(3, 6, 10, 0.94) 0%, rgba(3, 6, 10, 0.72) 38%, rgba(3, 6, 10, 0.1) 62%, rgba(3, 6, 10, 0.14) 100%);
}

.tlc-cinematic-stage.is-ready {
    opacity: 1;
}

/* Preserve the exact visible frame while preventing offscreen cinematic
 * layers from consuming paint/compositor time during the page scroll. */
.tlc-cinematic-stage.is-paused *,
.tlc-cinematic-stage.is-paused *::before,
.tlc-cinematic-stage.is-paused *::after {
    animation-play-state: paused !important;
    will-change: auto !important;
}

.tlc-cinematic-stage *,
.tlc-cinematic-stage *::before,
.tlc-cinematic-stage *::after {
    box-sizing: border-box;
}

.tlc-cinematic-stage::after {
    position: absolute;
    inset: 0;
    z-index: 90;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4, 7, 11, 0.68), transparent 18%, transparent 82%, rgba(4, 7, 11, 0.42)),
        linear-gradient(180deg, transparent 60%, var(--tlc-cine-ink) 100%);
}

body.tlc-cinematic-production .tlc-cinematic-stage::after {
    background:
        linear-gradient(90deg, rgba(4, 7, 11, 0.58), transparent 22%, transparent 90%, rgba(4, 7, 11, 0.18)),
        linear-gradient(180deg, transparent 68%, var(--tlc-cine-ink) 100%);
}

/* Special Effects overview */
.tlc-cine-overview {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(73, 207, 255, 0.12), transparent 34%),
        linear-gradient(30deg, transparent 47%, rgba(73, 207, 255, 0.045) 48%, rgba(73, 207, 255, 0.045) 49%, transparent 50%);
    background-size: auto, 72px 126px;
}

.tlc-cine-overview__cell {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 140px;
    aspect-ratio: 1;
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
    background: linear-gradient(145deg, rgba(73, 207, 255, 0.09), rgba(225, 38, 53, 0.035));
    border: 1px solid rgba(178, 231, 255, 0.58);
    opacity: 0.38;
    filter: drop-shadow(0 0 18px rgba(73, 207, 255, 0.16));
    transform: scale(var(--s));
    animation: tlcCineHexPulse 5.4s ease-in-out var(--d) infinite;
}

/* Atmospheric fog, smoke and snow */
.tlc-cine-atmosphere__wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(163, 214, 255, 0.16), transparent 25%),
        radial-gradient(circle at 20% 58%, rgba(255, 255, 255, 0.12), transparent 28%);
    mix-blend-mode: screen;
}

.tlc-cine-fog {
    position: absolute;
    right: -28%;
    left: -28%;
    height: 34%;
    opacity: 0.26;
    filter: blur(34px);
    background:
        radial-gradient(ellipse at 18% 50%, rgba(245, 251, 255, 0.75), transparent 28%),
        radial-gradient(ellipse at 48% 36%, rgba(193, 224, 239, 0.62), transparent 31%),
        radial-gradient(ellipse at 78% 60%, rgba(255, 255, 255, 0.68), transparent 28%);
    animation: tlcCineFog 12s ease-in-out var(--delay) infinite alternate;
}

.tlc-cine-fog--1 { top: 16%; }
.tlc-cine-fog--2 { top: 38%; transform: scaleX(-1); }
.tlc-cine-fog--3 { top: 58%; opacity: 0.2; }
.tlc-cine-fog--4 { top: 72%; transform: scaleX(-1); opacity: 0.18; }

.tlc-cine-snow {
    position: absolute;
    inset: 0;
}

.tlc-cine-snow__flake {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    height: var(--size);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(204, 239, 255, 0.9);
    opacity: 0.72;
    animation: tlcCineSnow var(--dur) linear var(--delay) infinite;
}

/* Confetti and streamers */
.tlc-cine-confetti {
    position: absolute;
    inset: 0;
    perspective: 900px;
}

.tlc-cine-confetti__piece {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 8px;
    height: 18px;
    background: var(--color);
    border-radius: 2px;
    box-shadow: 0 0 9px color-mix(in srgb, var(--color) 66%, transparent);
    transform: rotate(var(--r));
    animation: tlcCineConfetti var(--dur) cubic-bezier(0.35, 0.05, 0.55, 0.95) var(--delay) infinite;
}

.tlc-cine-confetti__ribbon {
    position: absolute;
    top: -140px;
    left: var(--x);
    width: 12px;
    height: 260px;
    border: 5px solid var(--color);
    border-top: 0;
    border-bottom: 0;
    border-radius: 50%;
    opacity: 0.72;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color) 50%, transparent));
    animation: tlcCineRibbon 7.2s ease-in-out var(--delay) infinite;
}

/* Drone */
.tlc-cine-drone__radar {
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(64vw, 780px);
    aspect-ratio: 1;
    border: 1px solid rgba(73, 207, 255, 0.16);
    border-radius: 50%;
    opacity: 0.35;
    background: repeating-radial-gradient(circle, transparent 0 54px, rgba(73, 207, 255, 0.09) 55px 56px);
    transform: translateX(-50%) rotateX(68deg);
    animation: tlcCineRadar 8s linear infinite;
}

.tlc-cine-drone__image {
    position: absolute;
    top: clamp(95px, 11vw, 170px);
    left: 0;
    z-index: 5;
    width: clamp(260px, 38vw, 620px);
    height: auto;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 20px rgba(73, 207, 255, 0.18));
    will-change: transform;
    animation: tlcCineDrone 14s ease-in-out infinite;
}

.tlc-cine-drone__shadow {
    position: absolute;
    top: 68%;
    left: 50%;
    width: 260px;
    height: 28px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.66), transparent 68%);
    filter: blur(10px);
    animation: tlcCineDroneShadow 14s ease-in-out infinite;
}

/* Cinematic hologram */
.tlc-cine-hologram {
    position: absolute;
    top: 78px;
    right: clamp(24px, 8vw, 150px);
    width: clamp(260px, 34vw, 520px);
    height: clamp(420px, 52vw, 720px);
    opacity: 0.76;
    filter: drop-shadow(0 0 30px rgba(73, 207, 255, 0.42));
}

.tlc-cine-hologram__beam {
    position: absolute;
    right: 8%;
    bottom: 12%;
    left: 8%;
    height: 78%;
    clip-path: polygon(42% 100%, 58% 100%, 96% 0, 4% 0);
    background: linear-gradient(180deg, rgba(73, 207, 255, 0.02), rgba(73, 207, 255, 0.18));
    mix-blend-mode: screen;
    animation: tlcCineHoloFlicker 4.2s steps(2, end) infinite;
}

.tlc-cine-hologram__orb {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 70%;
    aspect-ratio: 1;
    border: 2px solid rgba(151, 231, 255, 0.78);
    border-radius: 50%;
    background:
        repeating-linear-gradient(0deg, rgba(73, 207, 255, 0.12) 0 1px, transparent 1px 8px),
        radial-gradient(circle, rgba(73, 207, 255, 0.22), transparent 65%);
    transform: translateX(-50%);
    animation: tlcCineHoloFloat 5.8s ease-in-out infinite;
}

.tlc-cine-hologram__ring {
    position: absolute;
    inset: 14%;
    border: 2px solid rgba(132, 229, 255, 0.72);
    border-radius: 50%;
    transform: rotateX(72deg) rotateZ(calc(var(--ring, 1) * 24deg));
    animation: tlcCineHoloRing 7s linear infinite;
}

.tlc-cine-hologram__ring--2 { inset: 25%; animation-direction: reverse; animation-duration: 5s; }
.tlc-cine-hologram__ring--3 { inset: 37%; animation-duration: 3.8s; }
.tlc-cine-hologram__ring--4 { inset: 7%; transform: rotateY(70deg); animation-direction: reverse; }

.tlc-cine-hologram__core {
    position: absolute;
    inset: 34%;
    clip-path: polygon(50% 0, 61% 35%, 100% 35%, 69% 57%, 80% 100%, 50% 73%, 20% 100%, 31% 57%, 0 35%, 39% 35%);
    background: #b9f1ff;
    box-shadow: 0 0 30px #49cfff;
    animation: tlcCineHoloCore 2.8s ease-in-out infinite;
}

.tlc-cine-hologram__base {
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 52%;
    height: 54px;
    border: 2px solid rgba(133, 225, 255, 0.7);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(73, 207, 255, 0.44), rgba(6, 14, 25, 0.88) 68%);
    transform: translateX(-50%);
}

.tlc-cine-hologram__scan {
    position: absolute;
    top: 10%;
    right: 12%;
    left: 12%;
    height: 3px;
    background: #c8f6ff;
    box-shadow: 0 0 18px #49cfff;
    animation: tlcCineHoloScan 4s linear infinite;
}

/* Lasers */
.tlc-cine-lasers {
    position: absolute;
    inset: 0;
    transform-origin: 50% 22%;
}

.tlc-cine-lasers__beam {
    position: absolute;
    top: var(--y);
    left: -15%;
    width: 135%;
    height: 2px;
    opacity: 0.68;
    background: linear-gradient(90deg, transparent, var(--color) 15%, #fff 52%, var(--color) 84%, transparent);
    box-shadow: 0 0 7px var(--color), 0 0 18px color-mix(in srgb, var(--color) 55%, transparent);
    transform: rotate(var(--angle)) scaleX(0.04);
    transform-origin: center;
    animation: tlcCineLaser var(--dur) cubic-bezier(0.4, 0, 0.2, 1) var(--delay) infinite;
}

/* LED wall */
.tlc-cine-led {
    position: absolute;
    top: 76px;
    right: 4%;
    left: 4%;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: clamp(8px, 1vw, 18px);
    height: 68%;
    padding: 4%;
    perspective: 1000px;
    opacity: 0.52;
    transform: rotateX(58deg);
    transform-origin: center top;
}

.tlc-cine-led__pixel {
    aspect-ratio: 1;
    border-radius: 50%;
    background: hsl(var(--hue) 90% 62%);
    box-shadow: 0 0 8px hsl(var(--hue) 90% 62%);
    animation: tlcCineLed 2.1s ease-in-out var(--delay) infinite alternate;
}

.tlc-cine-led__wave {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, 0.34) 48%, transparent 68%);
    animation: tlcCineLedWave 4.6s linear infinite;
}

/* Projection mapping */
.tlc-cine-projection {
    position: absolute;
    inset: 0;
    perspective: 1100px;
}

.tlc-cine-projection__plane {
    position: absolute;
    top: 100px;
    right: 6%;
    width: clamp(340px, 46vw, 760px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    clip-path: polygon(7% 5%, 94% 0, 100% 86%, 10% 100%, 0 38%);
    background:
        radial-gradient(circle at 70% 25%, rgba(225, 38, 53, 0.48), transparent 30%),
        linear-gradient(135deg, #102337, #080b12 65%);
    box-shadow: 0 0 0 2px rgba(73, 207, 255, 0.72), 0 0 50px rgba(73, 207, 255, 0.22);
    transform: rotateY(-14deg) rotateX(4deg);
    animation: tlcCineProjection 8s ease-in-out infinite;
}

.tlc-cine-projection__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    filter: saturate(1.25) contrast(1.15);
    mix-blend-mode: screen;
}

.tlc-cine-projection__mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(73, 207, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 207, 255, 0.18) 1px, transparent 1px);
    background-size: 38px 38px;
    mix-blend-mode: screen;
}

.tlc-cine-projection__projector {
    position: absolute;
    bottom: 17%;
    left: 6%;
    width: 90px;
    height: 58px;
    border: 1px solid rgba(157, 228, 255, 0.5);
    border-radius: 12px;
    background: linear-gradient(145deg, #252c35, #07090d);
    box-shadow: 0 10px 26px #000;
}

.tlc-cine-projection__projector::after {
    position: absolute;
    top: 12px;
    right: -18px;
    width: 36px;
    height: 36px;
    content: "";
    border: 3px solid #80deff;
    border-radius: 50%;
    background: #d4f7ff;
    box-shadow: 0 0 22px #49cfff;
}

.tlc-cine-projection__cone {
    position: absolute;
    bottom: 17%;
    left: 11%;
    width: 54%;
    height: 48%;
    clip-path: polygon(0 72%, 100% 0, 100% 100%);
    opacity: 0.16;
    background: linear-gradient(135deg, #86e4ff, transparent 64%);
    mix-blend-mode: screen;
}

/* Pyro and cold spark */
.tlc-cine-pyro {
    position: absolute;
    inset: 0;
}

.tlc-cine-pyro__fountain {
    position: absolute;
    bottom: 70px;
    left: var(--x);
    width: 4px;
    height: 4px;
}

.tlc-cine-pyro__fountain::after {
    position: absolute;
    top: -8px;
    left: -9px;
    width: 22px;
    height: 22px;
    content: "";
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 18px #fff, 0 0 38px #ffbf4b, 0 0 60px #e12635;
}

.tlc-cine-pyro__spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(#fff, #ffd05c, transparent);
    box-shadow: 0 0 8px #ffbd44;
    transform-origin: center bottom;
    animation: tlcCineSpark 2.2s cubic-bezier(0.1, 0.55, 0.3, 1) var(--delay) infinite;
}

.tlc-cine-pyro__heat {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34%;
    opacity: 0.3;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 95, 35, 0.5), transparent 68%);
    filter: blur(18px);
    animation: tlcCineHeat 2.8s ease-in-out infinite;
}

/* Water */
.tlc-cine-water {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(180deg, transparent 44%, rgba(21, 118, 165, 0.12));
}

.tlc-cine-water__wave {
    position: absolute;
    right: -12%;
    bottom: calc(3% + var(--offset, 0px));
    left: -12%;
    height: 34%;
    border-radius: 48% 52% 0 0 / 100% 100% 0 0;
    background:
        radial-gradient(ellipse at 50% 0, rgba(211, 247, 255, 0.72), transparent 12%),
        linear-gradient(180deg, rgba(72, 204, 255, 0.38), rgba(4, 46, 74, 0.5));
    filter: blur(0.4px);
    transform-origin: center bottom;
    animation: tlcCineWave 6s ease-in-out infinite alternate;
}

.tlc-cine-water__wave--2 { --offset: 42px; opacity: 0.62; animation-delay: -2s; transform: scaleX(-1); }
.tlc-cine-water__wave--3 { --offset: 86px; opacity: 0.4; animation-delay: -4s; }
.tlc-cine-water__wave--4 { --offset: 132px; opacity: 0.22; animation-delay: -1s; transform: scaleX(-1); }

.tlc-cine-water__drop {
    position: absolute;
    top: -30px;
    left: var(--x);
    width: 4px;
    height: 24px;
    border-radius: 60% 60% 72% 72%;
    background: linear-gradient(#e7fbff, rgba(73, 207, 255, 0.28));
    box-shadow: 0 0 8px rgba(104, 219, 255, 0.7);
    animation: tlcCineDrop var(--dur) linear var(--delay) infinite;
}

.tlc-cine-water__ripple {
    position: absolute;
    bottom: 12%;
    left: var(--x);
    width: 30px;
    height: 10px;
    border: 2px solid rgba(183, 239, 255, 0.82);
    border-radius: 50%;
    animation: tlcCineRipple 5.4s ease-out var(--delay) infinite;
}

/* Curtain reveal */
.tlc-cine-reveal {
    position: absolute;
    inset: 0;
    z-index: 70;
    overflow: hidden;
}

.tlc-cine-reveal__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52%;
    background:
        repeating-linear-gradient(90deg, rgba(45, 0, 8, 0.18) 0 3%, rgba(230, 32, 54, 0.18) 4% 7%, rgba(70, 0, 13, 0.28) 8% 12%),
        linear-gradient(90deg, #31030a, #b41429 48%, #4d0712);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.62), 0 0 46px #000;
}

.tlc-cine-reveal__curtain--left { left: 0; transform-origin: left center; }
.tlc-cine-reveal__curtain--right { right: 0; transform-origin: right center; transform: scaleX(-1); }

.tlc-cinematic-stage.is-ready .tlc-cine-reveal__curtain--left {
    animation: tlcCineCurtainLeft 3.4s cubic-bezier(0.65, 0, 0.2, 1) 550ms forwards;
}

.tlc-cinematic-stage.is-ready .tlc-cine-reveal__curtain--right {
    animation: tlcCineCurtainRight 3.4s cubic-bezier(0.65, 0, 0.2, 1) 550ms forwards;
}

.tlc-cine-reveal__valance {
    position: absolute;
    top: -2px;
    right: -2%;
    left: -2%;
    height: 94px;
    background: repeating-radial-gradient(ellipse at 50% 0, #b4162c 0 34px, #510812 36px 52px);
    filter: drop-shadow(0 15px 14px rgba(0, 0, 0, 0.65));
    animation: tlcCineValance 3s ease 3s forwards;
}

.tlc-cine-reveal__spotlight {
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 85%;
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    opacity: 0;
    background: linear-gradient(180deg, rgba(255, 252, 227, 0.48), transparent 68%);
    transform: translateX(-50%);
    animation: tlcCineRevealLight 3.2s ease 2s forwards;
}

/* Robotics */
.tlc-cine-robotics {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(73, 207, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 207, 255, 0.05) 1px, transparent 1px);
    background-size: 52px 52px;
}

.tlc-cine-robotics__arm {
    position: absolute;
    right: clamp(-36px, -2vw, -12px);
    bottom: -28px;
    z-index: 5;
    width: clamp(250px, 25vw, 360px);
    height: auto;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 22px rgba(73, 207, 255, 0.16));
    transform-origin: 48% 88%;
    animation: tlcCineRobotArm 7s ease-in-out infinite;
}

.tlc-cine-robotics__scan {
    position: absolute;
    top: 16%;
    right: 12%;
    width: 38%;
    height: 2px;
    z-index: 6;
    background: #9deaff;
    box-shadow: 0 0 15px #49cfff, 0 0 42px #49cfff;
    animation: tlcCineRobotScan 4.8s ease-in-out infinite;
}

.tlc-cine-robotics__block {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: clamp(38px, 5vw, 74px);
    aspect-ratio: 1;
    border: 1px solid rgba(154, 231, 255, 0.75);
    background: linear-gradient(145deg, rgba(73, 207, 255, 0.25), rgba(7, 16, 27, 0.78));
    box-shadow: 0 0 22px rgba(73, 207, 255, 0.2);
    transform: translateY(80px) rotate(35deg) scale(0.4);
    animation: tlcCineRobotBlock 4.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay) infinite;
}

body.tlc-cinematic-robotics #main .tlc-robot-fleet .box {
    animation: tlcCineFleetFloat 5.6s ease-in-out calc(var(--tlc-card-order, 0) * -0.45s) infinite alternate;
}

body.tlc-cinematic-robotics #main .tlc-robot-fleet .box-image::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: "";
    pointer-events: none;
    opacity: 0.24;
    background: linear-gradient(180deg, transparent, rgba(73, 207, 255, 0.38), transparent);
    transform: translateY(-120%);
    animation: tlcCineFleetScan 4.8s ease-in-out infinite;
}

/* Video display wall */
.tlc-cine-video-wall {
    position: absolute;
    top: 70px;
    right: 4%;
    left: 4%;
    display: grid;
    grid-template-columns: 0.65fr 0.85fr 1.5fr 0.85fr 0.65fr;
    align-items: center;
    gap: 1.2vw;
    height: 64%;
    perspective: 1300px;
}

.tlc-cine-video-wall__panel {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid rgba(144, 229, 255, 0.62);
    border-radius: 8px;
    opacity: 0.62;
    background:
        radial-gradient(circle at 50% 30%, rgba(140, 112, 255, 0.48), transparent 34%),
        linear-gradient(160deg, #10243a, #080b12 62%);
    box-shadow: 0 0 30px rgba(73, 207, 255, 0.15);
    animation: tlcCineVideoPanel 5s ease-in-out infinite alternate;
}

.tlc-cine-video-wall__panel--1 { transform: rotateY(32deg); }
.tlc-cine-video-wall__panel--2 { transform: rotateY(20deg); animation-delay: -1s; }
.tlc-cine-video-wall__panel--3 { aspect-ratio: 16 / 10; opacity: 0.82; animation-delay: -2s; }
.tlc-cine-video-wall__panel--4 { transform: rotateY(-20deg); animation-delay: -3s; }
.tlc-cine-video-wall__panel--5 { transform: rotateY(-32deg); animation-delay: -4s; }

.tlc-cine-video-wall__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.35) contrast(1.15);
}

.tlc-cine-video-wall__scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, 0.06) 7px 8px);
    mix-blend-mode: screen;
}

/* Event production */
.tlc-cine-production {
    position: absolute;
    inset: 0;
}

.tlc-cine-production__rig {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0;
    filter: saturate(1.08) contrast(1.1) brightness(0.98);
    pointer-events: none;
}

.tlc-cine-production__rig--base {
    animation: tlcCineProductionRigBase 9s ease-in-out infinite alternate;
}

.tlc-cine-production__rig--alt {
    animation: tlcCineProductionRigAlt 9s ease-in-out infinite alternate;
}

.tlc-cine-production__gear {
    position: absolute;
    right: -1%;
    bottom: 1%;
    z-index: 3;
    width: clamp(430px, 52vw, 760px);
    height: auto;
    opacity: 0.76;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.76)) drop-shadow(0 0 20px rgba(73, 207, 255, 0.12));
    animation: tlcCineGear 6.8s ease-in-out infinite alternate;
}

/* Motion */
@keyframes tlcCineHexPulse {
    0%, 100% { opacity: 0.2; filter: drop-shadow(0 0 8px rgba(73, 207, 255, 0.08)); }
    50% { opacity: 0.58; filter: drop-shadow(0 0 28px rgba(73, 207, 255, 0.32)); }
}

@keyframes tlcCineFog {
    0% { transform: translate3d(-8%, -3%, 0) scale(1.03); }
    100% { transform: translate3d(9%, 4%, 0) scale(1.18); }
}

@keyframes tlcCineSnow {
    0% { transform: translate3d(0, -80px, 0) rotate(0); opacity: 0; }
    15% { opacity: 0.75; }
    100% { transform: translate3d(58px, 680px, 0) rotate(380deg); opacity: 0; }
}

@keyframes tlcCineConfetti {
    0% { transform: translate3d(0, -120px, 0) rotate(var(--r)) rotateY(0); opacity: 0; }
    12% { opacity: 0.92; }
    100% { transform: translate3d(var(--drift), 760px, 0) rotate(620deg) rotateY(880deg); opacity: 0; }
}

@keyframes tlcCineRibbon {
    0% { transform: translateY(-160px) rotate(0); opacity: 0; }
    15% { opacity: 0.75; }
    100% { transform: translateY(820px) rotate(360deg); opacity: 0; }
}

@keyframes tlcCineRadar { to { transform: translateX(-50%) rotateX(68deg) rotateZ(360deg); } }

@keyframes tlcCineDrone {
    0%, 100% { transform: translate3d(58vw, 10px, 0) rotate(2deg); }
    12% { transform: translate3d(60vw, 28px, 0) rotate(-1deg); }
    48% { transform: translate3d(10vw, 44px, 0) rotate(-2deg); }
    58% { transform: translate3d(8vw, 22px, 0) rotate(1deg); }
    88% { transform: translate3d(58vw, 52px, 0) rotate(-3deg); }
}

@keyframes tlcCineDroneShadow {
    0%, 100% { transform: translateX(80vw) scale(0.6); opacity: 0; }
    50% { transform: translateX(-20%) scale(1); opacity: 0.48; }
    92% { transform: translateX(-78vw) scale(0.7); opacity: 0.18; }
}

@keyframes tlcCineHoloFlicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.35; } }
@keyframes tlcCineHoloFloat { 0%, 100% { transform: translateX(-50%) translateY(-8px); } 50% { transform: translateX(-50%) translateY(12px); } }
@keyframes tlcCineHoloRing { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes tlcCineHoloCore { 50% { transform: scale(1.13); filter: brightness(1.6); } }
@keyframes tlcCineHoloScan { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 0.9; } 100% { transform: translateY(520px); opacity: 0; } }

@keyframes tlcCineLaser {
    0%, 100% { transform: rotate(var(--angle)) scaleX(0.03); opacity: 0; }
    25%, 68% { transform: rotate(var(--angle)) scaleX(1); opacity: 0.76; }
}

@keyframes tlcCineLed { 0% { transform: scale(0.35); opacity: 0.18; } 100% { transform: scale(1.15); opacity: 0.85; filter: brightness(1.6); } }
@keyframes tlcCineLedWave { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes tlcCineProjection { 0%, 100% { transform: rotateY(-14deg) rotateX(4deg) scale(0.98); } 50% { transform: rotateY(-8deg) rotateX(1deg) scale(1.03); } }

@keyframes tlcCineSpark {
    0% { transform: rotate(var(--angle)) translateY(0) scaleY(0.2); opacity: 0; }
    12% { opacity: 1; }
    82% { opacity: 0.8; }
    100% { transform: rotate(var(--angle)) translateY(calc(var(--reach) * -1)) scaleY(1); opacity: 0; }
}

@keyframes tlcCineHeat { 50% { transform: scaleY(1.15); opacity: 0.42; } }
@keyframes tlcCineWave { 0% { transform: translateX(-4%) scaleY(0.82); } 100% { transform: translateX(4%) scaleY(1.08); } }
@keyframes tlcCineDrop { from { transform: translateY(-30px) scaleY(0.6); opacity: 0; } 12% { opacity: 0.76; } to { transform: translateY(720px) scaleY(1.2); opacity: 0; } }
@keyframes tlcCineRipple { 0% { transform: translateX(-50%) scale(0.2); opacity: 0.9; } 100% { transform: translateX(-50%) scale(8); opacity: 0; } }

@keyframes tlcCineCurtainLeft { to { transform: translateX(-91%) scaleX(0.58); filter: brightness(0.55); } }
@keyframes tlcCineCurtainRight { to { transform: translateX(91%) scaleX(-0.58); filter: brightness(0.55); } }
@keyframes tlcCineValance { to { transform: translateY(-84%); opacity: 0.7; } }
@keyframes tlcCineRevealLight { to { opacity: 0.34; } }

@keyframes tlcCineRobotArm { 0%, 100% { transform: rotate(-1deg) translateY(5px); } 42% { transform: rotate(2.5deg) translateY(-18px); } 65% { transform: rotate(0.5deg) translateY(-5px); } }
@keyframes tlcCineRobotScan { 0%, 100% { transform: translateY(0); opacity: 0; } 18%, 82% { opacity: 0.8; } 50% { transform: translateY(390px); } }
@keyframes tlcCineRobotBlock { 0%, 16% { transform: translateY(100px) rotate(40deg) scale(0.2); opacity: 0; } 45%, 78% { transform: translateY(0) rotate(0) scale(1); opacity: 0.75; } 100% { transform: translateY(-60px) scale(0.6); opacity: 0; } }
@keyframes tlcCineFleetFloat { to { transform: translateY(-9px); filter: drop-shadow(0 18px 26px rgba(73, 207, 255, 0.11)); } }
@keyframes tlcCineFleetScan { 45%, 100% { transform: translateY(120%); } }
@keyframes tlcCineVideoPanel { to { filter: brightness(1.3) saturate(1.25); box-shadow: 0 0 48px rgba(73, 207, 255, 0.28); } }
@keyframes tlcCineGear { to { transform: translateY(-10px) scale(1.015); filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 24px rgba(73, 207, 255, 0.18)); } }
@keyframes tlcCineProductionRigBase { 0%, 35% { opacity: 0.86; } 65%, 100% { opacity: 0; } }
@keyframes tlcCineProductionRigAlt { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 0.86; } }

@media (max-width: 849px) {
    .tlc-cinematic-stage {
        height: 430px;
        opacity: 0;
    }

    .tlc-cinematic-stage.is-ready {
        opacity: 0.82;
    }

    .tlc-cine-drone__image { width: min(64vw, 360px); top: 140px; }
    .tlc-cine-hologram { right: -50px; opacity: 0.58; }
    .tlc-cine-projection__plane { top: 130px; right: -8%; width: 62vw; }
    .tlc-cine-robotics__arm { right: -48px; bottom: -24px; width: min(42vw, 320px); opacity: 0.72; }
    .tlc-cine-production__gear { right: -18%; width: 76vw; opacity: 0.48; }
    .tlc-cine-video-wall { right: -9%; left: -9%; }
}

@media (max-width: 549px) {
    .tlc-cinematic-stage {
        height: 390px;
    }

    .tlc-cinematic-stage::after {
        background:
            linear-gradient(90deg, rgba(4, 7, 11, 0.6), transparent 28%, transparent 72%, rgba(4, 7, 11, 0.48)),
            linear-gradient(180deg, transparent 58%, var(--tlc-cine-ink) 100%);
    }

    .tlc-cine-confetti__piece { width: 6px; height: 13px; }
    .tlc-cine-drone__image { width: 210px; top: 150px; }
    .tlc-cine-drone__radar { width: 110vw; left: 54%; }
    .tlc-cine-hologram { top: 92px; right: -92px; width: 330px; height: 470px; }
    .tlc-cine-led { grid-template-columns: repeat(8, 1fr); gap: 9px; opacity: 0.38; }
    .tlc-cine-projection__plane { top: 150px; right: -30%; width: 92vw; opacity: 0.62; }
    .tlc-cine-projection__projector,
    .tlc-cine-projection__cone { display: none; }
    .tlc-cine-pyro__fountain { bottom: 66px; }
    .tlc-cine-water__wave { height: 29%; }
    .tlc-cine-reveal__valance { height: 66px; }
    .tlc-cine-robotics__arm { right: -76px; bottom: -24px; width: 245px; opacity: 0.58; }
    .tlc-cine-robotics__block:nth-of-type(n + 5) { display: none; }
    .tlc-cine-video-wall { top: 120px; right: -24%; left: -24%; grid-template-columns: 0.7fr 1fr 1.5fr 1fr 0.7fr; opacity: 0.66; }
    .tlc-cine-production__rig { object-position: 72% center; }
    .tlc-cine-production__gear { right: -42%; bottom: 7%; width: 108vw; opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
    .tlc-cinematic-stage *,
    .tlc-cinematic-stage *::before,
    .tlc-cinematic-stage *::after,
    body.tlc-cinematic-robotics #main .tlc-robot-fleet .box,
    body.tlc-cinematic-robotics #main .tlc-robot-fleet .box-image::after {
        animation: none !important;
        transition: none !important;
    }

    .tlc-cinematic-stage {
        opacity: 0.35;
    }

    .tlc-cine-production__rig--base { opacity: 0.86; }
    .tlc-cine-production__rig--alt { display: none; }

    .tlc-cine-reveal__curtain--left { transform: translateX(-91%) scaleX(0.58); }
    .tlc-cine-reveal__curtain--right { transform: translateX(91%) scaleX(-0.58); }
    .tlc-cine-reveal__valance { transform: translateY(-84%); }
    .tlc-cine-drone__image { right: -6%; left: auto; transform: none; }
}