/* Film composition. State transitions, actor motion and camera paths are owned by Velora. */ @layer velora.reset { html:has(#vl-film-native),body:has(>#vl-film-native) {margin:0;padding:0;} } @layer velora.tokens { #vl-film-native { --vl-film-height:100svh; --vl-film-title:clamp(2.4rem,5.8cqi,5rem); --vl-film-character:clamp(10rem,24cqi,22rem); --vl-film-line:color-mix(in oklab,var(--vl-color-accent) 26%,transparent); --vl-film-border:1px; --vl-film-v-shape:polygon(83.46% .08%,86.32% .02%,58.09% 81.35%,59.7% 86.11%,90.37% .07%,93.11% .05%,60.99% 90.8%,62.49% 95.33%,97.25% .1%,100% .07%,63.87% 99.98%,31.88% 100%,0% .01%,32.56% 0%,50.35% 56.65%,69.41% .05%,72.24% .05%,51.78% 61.27%,53.72% 67.26%,76.59% .04%,79.42% .05%,55.12% 71.93%,56.64% 76.45%); --vl-state-duration:calc(var(--vl-duration-slower)*1.3); --vl-state-distance:0rem; --vl-state-exit-scale:1; --vl-state-ease:var(--vl-ease-cinematic); } } @layer velora.components { #vl-film-native {position:relative;container:vl-film / inline-size;inline-size:100%;block-size:var(--vl-film-height);background:var(--vl-bg-main);color:var(--vl-text-primary);font-family:var(--vl-font-family);overflow:clip;isolation:isolate;} #vl-film-native * {box-sizing:border-box;} #vl-film-native .vl-film-brand {position:absolute;left:var(--vl-space-lg);top:var(--vl-space-lg);z-index:20;pointer-events:none;} #vl-film-native .vl-film-wordmark {display:block;inline-size:6rem;aspect-ratio:218.79 / 54.05;background:var(--vl-text-primary);mask:var(--vl-footer-mark) center / contain no-repeat;} #vl-film-native .vl-film-backstage {position:absolute;right:var(--vl-space-lg);top:var(--vl-space-lg);z-index:21;background:transparent;border:0;color:var(--vl-text-muted);font:var(--vl-font-size-xs)/var(--vl-leading-normal) var(--vl-font-family-mono);padding:var(--vl-space-sm);min-block-size:2.75rem;} #vl-film-native .vl-film-reel,#vl-film-native .vl-film-frame {position:absolute;inset:0;} #vl-film-native .vl-film-frame {pointer-events:none;} #vl-film-native .vl-film-radio {position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} #vl-film-native .vl-film-shot {--vl-state-duration:calc(var(--vl-duration-slower)*1.3);--vl-state-distance:0rem;--vl-state-exit-scale:1;--vl-state-ease:var(--vl-ease-cinematic);position:absolute;inset:0;background:var(--vl-bg-main);pointer-events:auto;} #vl-film-native .vl-film-scene {block-size:100%;--vl-beat:1.2s;--vl-beats:4;} #vl-film-native .vl-film-screen {position:relative;min-block-size:var(--vl-film-height);block-size:100%;overflow:clip;} #vl-film-native .vl-film-copy {position:absolute;inset:30% 46% auto 8%;z-index:5;pointer-events:none;margin:0;} #vl-film-native .vl-film-kicker {font:var(--vl-font-size-xs)/var(--vl-leading-normal) var(--vl-font-family-mono);letter-spacing:var(--vl-tracking-wide);color:var(--vl-color-accent);margin:0 0 var(--vl-space-lg);} #vl-film-native h1,#vl-film-native h2 {font-family:var(--vl-font-family-display);font-size:var(--vl-film-title);font-weight:var(--vl-font-weight-bold);line-height:1;letter-spacing:-.055em;margin:0;color:var(--vl-text-primary);text-wrap:balance;} #vl-film-native .vl-film-copy>p:last-child {font-size:var(--vl-font-size-sm);line-height:var(--vl-leading-relaxed);margin:var(--vl-space-lg) 0 0;color:var(--vl-text-muted);max-inline-size:33ch;} #vl-film-native .vl-film-actor {position:absolute;left:62%;top:27%;z-index:3;} #vl-film-native .vl-film-v {inline-size:var(--vl-film-character);aspect-ratio:429.23 / 455.73;clip-path:var(--vl-film-v-shape);background:linear-gradient(125deg,color-mix(in oklab,var(--vl-color-accent) 35%,var(--vl-text-primary)),var(--vl-color-accent) 35%,color-mix(in oklab,var(--vl-color-accent) 58%,var(--vl-bg-main)) 65%,var(--vl-color-accent));} #vl-film-native .vl-film-actor-intro {left:61%;top:25%;} #vl-film-native .vl-film-actor-intro .vl-film-v {inline-size:clamp(12rem,30cqi,27rem);} #vl-film-native .vl-film-city {position:absolute;inset:0;} #vl-film-native .vl-film-city i {position:absolute;left:47%;bottom:23%;inline-size:12%;block-size:41%;background:var(--vl-bg-surface);border:var(--vl-film-border) solid var(--vl-film-line);} #vl-film-native .vl-film-city i:nth-child(2){left:61%;block-size:63%}#vl-film-native .vl-film-city i:nth-child(3){left:75%;block-size:38%}#vl-film-native .vl-film-city i:nth-child(4){left:89%;block-size:70%}#vl-film-native .vl-film-city i:nth-child(5){left:33%;block-size:26%}#vl-film-native .vl-film-city i:nth-child(6){left:19%;block-size:16%} #vl-film-native .vl-film-beam {position:absolute;left:64%;top:-20%;inline-size:var(--vl-film-border);block-size:140%;background:var(--vl-color-accent);transform:rotate(var(--vl-cut-angle));opacity:.45;} #vl-film-native .vl-film-action {position:absolute;left:8%;bottom:16%;z-index:10;} #vl-film-native .vl-film-action>p {font-size:var(--vl-font-size-xs);line-height:var(--vl-leading-normal);color:var(--vl-text-muted);margin:var(--vl-space-md) 0 0;} #vl-film-native .vl-film-continue {display:inline-flex;align-items:center;justify-content:space-between;gap:var(--vl-space-lg);padding:var(--vl-space-md) 0;min-block-size:2.75rem;border-bottom:var(--vl-film-border) solid var(--vl-color-accent);font-size:var(--vl-font-size-sm);color:var(--vl-text-primary);cursor:pointer;} #vl-film-native .vl-film-continue>span {color:var(--vl-color-accent);} #vl-film-native .vl-film-grid {position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.9%,var(--vl-film-line) 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,var(--vl-film-line) 50%,transparent 50.1%);background-size:var(--vl-space-3xl) var(--vl-space-3xl);opacity:.18;} #vl-film-native .vl-film-barrier {position:absolute;left:58%;right:9%;top:27%;z-index:5;} #vl-film-native .vl-film-wall {position:absolute;inset:0;pointer-events:none;} #vl-film-native .vl-film-wall i {position:absolute;inset:var(--vl-space-md) calc(-1*var(--vl-space-md)) calc(-1*var(--vl-space-md)) var(--vl-space-md);border:var(--vl-film-border) solid var(--vl-film-line);background:var(--vl-bg-main);} #vl-film-native .vl-film-wall i:last-child {inset:calc(var(--vl-space-md)*2) calc(-2*var(--vl-space-md)) calc(-2*var(--vl-space-md)) calc(var(--vl-space-md)*2);} #vl-film-native .vl-film-cut-target {position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--vl-space-lg);min-block-size:13rem;padding:var(--vl-space-lg);background:var(--vl-bg-surface);border:var(--vl-film-border) solid var(--vl-film-line);cursor:pointer;--vl-slice-gap:.28;} #vl-film-native .vl-film-cut-target>span,#vl-film-native .vl-film-cut-target small {font-size:var(--vl-font-size-xs);color:var(--vl-text-muted);line-height:var(--vl-leading-relaxed);} #vl-film-native .vl-film-cut-target strong {font-size:var(--vl-font-size-xl);font-family:var(--vl-font-family-display);font-weight:var(--vl-font-weight-semibold);} #vl-film-native .vl-film-passage {position:relative;margin-top:var(--vl-space-lg);color:var(--vl-color-accent);font-size:var(--vl-font-size-sm);} #vl-film-native .vl-film-passage p {margin:0;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) .vl-film-cut-target {border-color:var(--vl-color-accent);} #vl-film-native .vl-film-actor-barrier {top:66%;left:78%;--vl-film-character:5rem;} #vl-film-native .vl-film-camera-scroll {position:absolute;inset:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;} #vl-film-native .vl-film-world {--vl-world-w:1100;--vl-world-h:620;--vl-world-d:3500;--vl-world-act-length:24rem;--vl-world-perspective:700px;--vl-world-weave:0;--vl-world-rest:0;--vl-world-plane:color-mix(in oklab,var(--vl-color-accent) 4%,transparent);--vl-lights-color:var(--vl-color-accent);--vl-lights-dark:var(--vl-bg-main);--vl-lights-vignette:25;--vl-lights-glow:9;block-size:calc(var(--vl-film-height) + var(--vl-world-act-length)*4);} #vl-film-native .vl-world__stage {block-size:var(--vl-film-height);} #vl-film-native .vl-film-corridor {--vl-world-travel:2400;--vl-world-near:-40;--vl-world-far:4300;--vl-lights-from:0;--vl-lights-to:15;} #vl-film-native .vl-film-portal {--vl-w:1050;--vl-h:650;border:var(--vl-film-border) solid var(--vl-film-line);} #vl-film-native .vl-film-portal-a {--vl-z:-300;}#vl-film-native .vl-film-portal-b {--vl-z:-900;}#vl-film-native .vl-film-portal-c {--vl-z:-1500;}#vl-film-native .vl-film-portal-d {--vl-z:-2100;}#vl-film-native .vl-film-portal-e {--vl-z:-2850;} #vl-film-native .vl-film-world-v {--vl-z:-3000;--vl-w:400;--vl-h:425;--vl-x:650;--vl-y:0;--vl-from:-1;--vl-to:100;} #vl-film-native .vl-film-world-v .vl-film-v,#vl-film-native .vl-film-orbit-v .vl-film-v {inline-size:100%;block-size:100%;} #vl-film-native .vl-film-overlay {position:absolute;inset:0;pointer-events:none;} #vl-film-native .vl-film-overlay .vl-film-action {pointer-events:auto;} #vl-film-native .vl-film-atelier {--vl-world-turn:65;--vl-world-pivot:-800;--vl-world-fov:90;--vl-world-rest:.1;} #vl-film-native .vl-film-orbit-v {--vl-z:-800;--vl-x:460;--vl-w:490;--vl-h:520;--vl-from:-1;--vl-to:100;} #vl-film-native .vl-film-orbit-panel {--vl-w:450;--vl-h:600;border:var(--vl-film-border) solid var(--vl-film-line);} #vl-film-native .vl-film-orbit-panel-a {--vl-x:540;--vl-z:-1100;--vl-ry:-40deg;--vl-heading:25;} #vl-film-native .vl-film-orbit-panel-b {--vl-x:-540;--vl-z:-1100;--vl-ry:40deg;--vl-heading:65;} #vl-film-native .vl-film-swatches {border:0;padding:0;margin:0 0 var(--vl-space-lg);display:flex;flex-wrap:wrap;gap:var(--vl-space-lg);font-size:var(--vl-font-size-sm);} #vl-film-native .vl-film-swatches legend {font-size:var(--vl-font-size-xs);color:var(--vl-text-muted);margin-bottom:var(--vl-space-sm);} #vl-film-native .vl-film-swatches label {display:flex;align-items:center;gap:var(--vl-space-xs);min-block-size:2.75rem;} #vl-film-native .vl-film-swatches input {accent-color:var(--vl-color-accent);} #vl-film-native .vl-film-ending-mark {position:absolute;left:61%;top:39%;inline-size:clamp(10rem,25cqi,25rem);aspect-ratio:218.79 / 54.05;background:var(--vl-color-accent);mask:var(--vl-footer-mark) center / contain no-repeat;} #vl-film-native .vl-film-motto {font-size:var(--vl-font-size-sm);color:var(--vl-text-secondary);margin:0 0 var(--vl-space-lg);} #vl-film-native .vl-film-replay {font-size:var(--vl-font-size-xs);color:var(--vl-text-muted);cursor:pointer;display:inline-block;padding-block:var(--vl-space-md);} #vl-film-native .vl-film-matte {position:absolute;inset:0;z-index:15;pointer-events:none;background:linear-gradient(var(--vl-bg-main) 0 9%,transparent 9% 91%,var(--vl-bg-main) 91%),radial-gradient(ellipse at 62% 47%,transparent 37%,color-mix(in oklab,var(--vl-bg-main) 65%,transparent));} #vl-film-native .vl-film-chapters {position:absolute;right:var(--vl-space-lg);bottom:var(--vl-space-md);display:flex;gap:var(--vl-space-xs);z-index:20;} #vl-film-native .vl-film-chapters label {display:grid;place-items:center;inline-size:2.75rem;min-block-size:2.75rem;font:var(--vl-font-size-xs) var(--vl-font-family-mono);color:var(--vl-text-muted);border-bottom:var(--vl-film-border) solid transparent;cursor:pointer;} #vl-film-native:has(#film-scene-1:checked) .vl-film-chapters label[for="film-scene-1"],#vl-film-native:has(#film-scene-2:checked) .vl-film-chapters label[for="film-scene-2"],#vl-film-native:has(#film-scene-3:checked) .vl-film-chapters label[for="film-scene-3"],#vl-film-native:has(#film-scene-4:checked) .vl-film-chapters label[for="film-scene-4"],#vl-film-native:has(#film-scene-5:checked) .vl-film-chapters label[for="film-scene-5"] {color:var(--vl-color-accent);border-color:var(--vl-color-accent);} #vl-film-native .vl-film-filmname {position:absolute;left:var(--vl-space-lg);bottom:var(--vl-space-lg);z-index:20;font:var(--vl-font-size-xs)/var(--vl-leading-normal) var(--vl-font-family-mono);letter-spacing:var(--vl-tracking-wide);color:var(--vl-text-muted);} #vl-film-native:has(.vl-film-radio:focus-visible) .vl-film-chapters {outline:var(--vl-film-border) solid var(--vl-color-accent);outline-offset:var(--vl-space-xs);} #vl-film-native .vl-film-popover {background:var(--vl-bg-main);color:var(--vl-text-primary);border:var(--vl-film-border) solid var(--vl-border-subtle);padding:var(--vl-space-xl);max-inline-size:min(90%,35rem);max-block-size:85svh;overflow:auto;} #vl-film-native .vl-film-popover h2 {font-size:var(--vl-font-size-4xl);} #vl-film-native .vl-film-popover p,#vl-film-native .vl-film-popover li {font-size:var(--vl-font-size-sm);line-height:var(--vl-leading-relaxed);} #vl-film-native .vl-film-popover details {margin-block:var(--vl-space-lg);font-size:var(--vl-font-size-sm);} #vl-film-native .vl-film-popover button {padding:var(--vl-space-md);background:var(--vl-color-accent);color:var(--vl-bg-main);border:0;font:inherit;} @media(max-width:560px) { #vl-film-native {--vl-film-title:2.1rem;--vl-film-character:9rem;} #vl-film-native .vl-film-brand {left:var(--vl-space-md);top:var(--vl-space-md);} #vl-film-native .vl-film-wordmark {inline-size:5rem;} #vl-film-native .vl-film-backstage {right:var(--vl-space-md);top:var(--vl-space-sm);} #vl-film-native .vl-film-copy {inset:17% 8% auto;} #vl-film-native .vl-film-copy>p:last-child {margin-top:var(--vl-space-md);} #vl-film-native .vl-film-copy .vl-film-kicker {margin-bottom:var(--vl-space-md);} #vl-film-native .vl-film-actor-intro {left:48%;top:46%;} #vl-film-native .vl-film-actor-intro .vl-film-v {inline-size:9rem;} #vl-film-native .vl-film-action {left:8%;right:8%;bottom:15%;} #vl-film-native .vl-film-action>p {margin-top:var(--vl-space-sm);} #vl-film-native .vl-film-barrier {left:14%;right:14%;top:46%;} #vl-film-native .vl-film-cut-target {min-block-size:8rem;padding:var(--vl-space-md);gap:var(--vl-space-sm);} #vl-film-native .vl-film-cut-target strong {font-size:var(--vl-font-size-lg);} #vl-film-native .vl-film-passage {margin-top:var(--vl-space-md);} #vl-film-native .vl-film-actor-barrier {left:77%;top:71%;--vl-film-character:3rem;} #vl-film-native .vl-film-world {--vl-world-perspective:450px;} #vl-film-native .vl-film-world-v {--vl-x:120;--vl-y:550;} #vl-film-native .vl-film-orbit-v {--vl-x:0;--vl-y:100;--vl-w:360;--vl-h:382;} #vl-film-native .vl-film-action-colors {bottom:13%;} #vl-film-native .vl-film-swatches {gap:var(--vl-space-sm);margin-bottom:var(--vl-space-sm);font-size:var(--vl-font-size-xs);} #vl-film-native .vl-film-swatches legend {margin-bottom:0;} #vl-film-native .vl-film-ending-mark {left:25%;top:51%;inline-size:50%;} #vl-film-native .vl-film-chapters {right:var(--vl-space-sm);bottom:var(--vl-space-sm);gap:0;} #vl-film-native .vl-film-chapters label {inline-size:2.4rem;} #vl-film-native .vl-film-filmname {left:var(--vl-space-md);bottom:var(--vl-space-lg);max-inline-size:6rem;font-size:var(--vl-font-size-xs);} } @media(prefers-reduced-motion:reduce) { #vl-film-native .vl-film-world {block-size:var(--vl-film-height);} #vl-film-native .vl-film-world .vl-world__stage {position:relative;} } @supports not (animation-timeline:view()) { #vl-film-native .vl-film-world {block-size:var(--vl-film-height);} #vl-film-native .vl-film-world .vl-world__stage {position:relative;} } } /* Art direction: physical sets, atmosphere and static material geometry. Timelines, animation channels and camera interpolation remain canonical Velora. */ @layer velora.tokens { #vl-film-native { --vl-film-ink:var(--vl-bg-main); --vl-film-lit:color-mix(in oklab,var(--vl-color-accent) 48%,var(--vl-text-primary)); --vl-film-shadow:color-mix(in oklab,var(--vl-bg-main) 94%,transparent); --vl-film-glow:color-mix(in oklab,var(--vl-color-accent) 26%,transparent); --vl-film-rim:color-mix(in oklab,var(--vl-text-primary) 56%,var(--vl-color-accent)); } } @layer velora.components { #vl-film-native .vl-film-shot {background:radial-gradient(ellipse at 78% 40%,color-mix(in oklab,var(--vl-color-accent) 9%,var(--vl-bg-main)),var(--vl-bg-main) 66%);} #vl-film-native .vl-film-atmosphere {position:absolute;inset:0;pointer-events:none;overflow:clip;perspective:700px;} #vl-film-native .vl-film-light-cone {position:absolute;left:52%;top:-22%;inline-size:62%;block-size:126%;transform:rotate(-23deg);transform-origin:50% 0;background:linear-gradient(180deg,color-mix(in oklab,var(--vl-film-lit) 20%,transparent),color-mix(in oklab,var(--vl-color-accent) 5%,transparent) 75%,transparent);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);filter:blur(12px);} #vl-film-native .vl-film-haze {position:absolute;inset:20% -20% 4% 25%;background:radial-gradient(ellipse 60% 12% at 65% 66%,var(--vl-film-glow),transparent),radial-gradient(ellipse 48% 22% at 60% 25%,color-mix(in oklab,var(--vl-color-accent) 10%,transparent),transparent);filter:blur(20px);} #vl-film-native .vl-film-horizon {position:absolute;left:43%;right:-10%;top:72%;height:1px;background:linear-gradient(90deg,transparent,var(--vl-film-lit),transparent);box-shadow:0 0 25px 3px var(--vl-film-glow);opacity:.7;} #vl-film-native .vl-film-set-floor {position:absolute;left:30%;top:65%;width:100%;height:90%;transform:rotateX(72deg);transform-origin:center top;background:repeating-linear-gradient(90deg,transparent 0 95px,var(--vl-film-line) 96px 97px),repeating-linear-gradient(0deg,transparent 0 95px,var(--vl-film-line) 96px 97px),radial-gradient(ellipse at 50% 0,var(--vl-film-glow),transparent 64%);mask:linear-gradient(transparent,var(--vl-text-primary) 10%,transparent 85%);opacity:.65;} #vl-film-native .vl-film-optics {position:absolute;inset:0;background:radial-gradient(ellipse 25% .15% at 76% 37%,color-mix(in oklab,var(--vl-film-rim) 40%,transparent),transparent),radial-gradient(ellipse 3% 20% at 76% 37%,color-mix(in oklab,var(--vl-film-rim) 10%,transparent),transparent);} #vl-film-native .vl-film-copy {text-shadow:0 3px 24px var(--vl-film-shadow);} #vl-film-native .vl-film-city {perspective:850px;perspective-origin:72% 45%;} #vl-film-native .vl-film-city i {bottom:24%;background:linear-gradient(90deg,var(--vl-bg-main),color-mix(in oklab,var(--vl-color-accent) 9%,var(--vl-bg-surface)) 70%,color-mix(in oklab,var(--vl-film-lit) 20%,var(--vl-bg-main)));border-color:color-mix(in oklab,var(--vl-film-rim) 22%,transparent);box-shadow:var(--vl-shadow-dramatic),inset 1px 0 color-mix(in oklab,var(--vl-film-rim) 28%,transparent);transform:rotateY(-28deg);transform-style:preserve-3d;} #vl-film-native .vl-film-city i::after {content:"";position:absolute;inset:0;transform-origin:right;transform:rotateY(90deg);background:linear-gradient(90deg,var(--vl-bg-main),color-mix(in oklab,var(--vl-color-accent) 8%,var(--vl-bg-main)));border:1px solid var(--vl-film-line);} #vl-film-native .vl-film-city i:nth-child(2) {transform:translateZ(-100px) rotateY(-28deg);} #vl-film-native .vl-film-city i:nth-child(4) {transform:translateZ(100px) rotateY(-28deg);} #vl-film-native .vl-film-city i:nth-child(5),#vl-film-native .vl-film-city i:nth-child(6) {opacity:.4;filter:blur(1px);} #vl-film-native .vl-film-beam {left:77%;width:3px;background:var(--vl-film-lit);opacity:.75;box-shadow:0 0 12px 2px var(--vl-film-glow),0 0 70px 14px var(--vl-film-glow);} #vl-film-native .vl-film-actor-intro {top:26%;left:61%;perspective:1000px;} #vl-film-native .vl-film-volume {position:relative;width:var(--vl-film-character);aspect-ratio:429.23 / 455.73;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(5deg) rotateZ(-5deg);} #vl-film-native .vl-film-actor-intro .vl-film-volume {width:clamp(12rem,30cqi,27rem);} #vl-film-native .vl-film-volume>i,#vl-film-native .vl-film-volume>.vl-film-v {position:absolute;inset:0;inline-size:100%;block-size:100%;clip-path:var(--vl-film-v-shape);} #vl-film-native .vl-film-volume>i {background:linear-gradient(100deg,var(--vl-film-lit),color-mix(in oklab,var(--vl-color-accent) 20%,var(--vl-bg-main)) 22%,var(--vl-bg-main) 75%,var(--vl-film-rim));} #vl-film-native .vl-film-volume>i:nth-child(1) {transform:translate3d(12px,8px,-24px);} #vl-film-native .vl-film-volume>i:nth-child(2) {transform:translate3d(8px,5px,-16px);} #vl-film-native .vl-film-volume>i:nth-child(3) {transform:translate3d(4px,3px,-8px);} #vl-film-native .vl-film-volume>.vl-film-v {background:linear-gradient(118deg,var(--vl-film-rim) 0%,var(--vl-film-lit) 13%,var(--vl-color-accent) 28%,color-mix(in oklab,var(--vl-color-accent) 26%,var(--vl-bg-main)) 60%,var(--vl-color-accent) 81%,var(--vl-film-rim));} #vl-film-native .vl-film-volume>.vl-film-v::after {content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 19%,color-mix(in oklab,var(--vl-text-primary) 45%,transparent) 19.4%,transparent 20.2%,transparent 70%,color-mix(in oklab,var(--vl-film-rim) 30%,transparent) 70.4%,transparent 71%);} #vl-film-native .vl-film-actor-intro::after {content:"";position:absolute;left:-10%;top:106%;width:130%;height:16%;border-radius:50%;background:radial-gradient(ellipse,var(--vl-film-shadow) 25%,transparent 70%);transform:rotate(-12deg);filter:blur(10px);} #vl-film-native .vl-film-resistance .vl-film-light-cone {left:49%;top:-30%;transform:rotate(20deg);opacity:.6;} #vl-film-native .vl-film-resistance .vl-film-haze {background:radial-gradient(ellipse at 65% 40%,var(--vl-film-glow),transparent 55%);} #vl-film-native .vl-film-grid {inset:10% -12% -30% 28%;transform:perspective(700px) rotateY(-35deg);opacity:.22;mask:linear-gradient(90deg,transparent,var(--vl-text-primary) 30%);} #vl-film-native .vl-film-barrier {perspective:900px;} #vl-film-native .vl-film-wall {filter:drop-shadow(20px 32px 20px var(--vl-film-shadow));} #vl-film-native .vl-film-wall i {inset:-3rem -1rem -8rem 2rem;transform:rotateY(-16deg);background:linear-gradient(125deg,color-mix(in oklab,var(--vl-color-accent) 6%,var(--vl-bg-main)),var(--vl-bg-main) 60%);box-shadow:inset 1px 0 var(--vl-film-line),var(--vl-shadow-dramatic);} #vl-film-native .vl-film-wall i:last-child {inset:-4rem -3rem -7rem 4rem;} #vl-film-native .vl-film-cut-target {background:linear-gradient(125deg,color-mix(in oklab,var(--vl-film-lit) 12%,var(--vl-bg-main)),var(--vl-bg-main) 68%);border-color:color-mix(in oklab,var(--vl-film-rim) 35%,transparent);box-shadow:var(--vl-shadow-dramatic),-12px 0 40px -20px var(--vl-film-lit);} #vl-film-native .vl-film-cut-target::before {content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--vl-film-rim);box-shadow:0 0 35px 7px var(--vl-film-glow);pointer-events:none;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) .vl-film-wall {filter:drop-shadow(-8px 0 25px var(--vl-film-glow));} #vl-film-native .vl-film-actor-barrier {left:76%;top:68%;--vl-film-character:6rem;} #vl-film-native .vl-film-world {--vl-lights-glow:24;--vl-lights-vignette:48;--vl-lights-x:74%;--vl-lights-y:42%;--vl-world-plane:color-mix(in oklab,var(--vl-color-accent) 7%,var(--vl-bg-main));} #vl-film-native .vl-film-tunnel-wall {background:repeating-linear-gradient(90deg,transparent 0 299px,var(--vl-film-line) 300px 303px),linear-gradient(0deg,var(--vl-bg-main),color-mix(in oklab,var(--vl-color-accent) 12%,var(--vl-bg-main)) 50%,var(--vl-bg-main));} #vl-film-native .vl-film-tunnel-floor {background:repeating-linear-gradient(0deg,transparent 0 298px,var(--vl-film-line) 300px 302px),linear-gradient(90deg,transparent 46%,color-mix(in oklab,var(--vl-color-accent) 16%,transparent) 50%,transparent 54%),var(--vl-bg-main);} #vl-film-native .vl-film-tunnel-ceiling {background:repeating-linear-gradient(0deg,transparent 0 298px,var(--vl-film-line) 300px 305px),var(--vl-bg-main);} #vl-film-native .vl-film-portal {border:4px solid color-mix(in oklab,var(--vl-film-lit) 55%,transparent);box-shadow:inset 0 0 35px var(--vl-film-glow),0 0 45px var(--vl-film-glow);background:linear-gradient(90deg,color-mix(in oklab,var(--vl-color-accent) 5%,transparent),transparent 18% 82%,color-mix(in oklab,var(--vl-color-accent) 5%,transparent));} #vl-film-native .vl-film-world-v .vl-film-volume,#vl-film-native .vl-film-orbit-v .vl-film-volume {width:100%;height:100%;} #vl-film-native .vl-film-world-v .vl-film-volume {transform:rotateY(-12deg);} #vl-film-native .vl-film-orbit-v .vl-film-volume {transform:rotateY(24deg) rotateX(-5deg);} #vl-film-native .vl-film-atelier {--vl-lights-glow:32;--vl-lights-x:72%;--vl-lights-y:35%;} #vl-film-native .vl-film-orbit-panel {background:linear-gradient(160deg,color-mix(in oklab,var(--vl-color-accent) 14%,var(--vl-bg-main)),var(--vl-bg-main) 65%);border-color:color-mix(in oklab,var(--vl-film-rim) 38%,transparent);box-shadow:0 0 55px var(--vl-film-glow);} #vl-film-native .vl-film-orbit-panel::after {content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--vl-film-rim);box-shadow:0 0 30px 4px var(--vl-film-glow);} #vl-film-native .vl-film-plinth {--vl-w:720;--vl-h:550;--vl-x:460;--vl-y:300;--vl-z:-800;--vl-rx:90deg;background:radial-gradient(ellipse,var(--vl-film-glow),var(--vl-bg-main) 65%);border:1px solid var(--vl-film-line);box-shadow:var(--vl-shadow-dramatic);} #vl-film-native .vl-film-orbit-shadow {--vl-w:480;--vl-h:180;--vl-x:490;--vl-y:290;--vl-z:-780;--vl-rx:90deg;background:radial-gradient(ellipse,var(--vl-film-shadow) 15%,transparent 70%);} #vl-film-native .vl-film-overlay {background:linear-gradient(90deg,color-mix(in oklab,var(--vl-bg-main) 92%,transparent),color-mix(in oklab,var(--vl-bg-main) 50%,transparent) 40%,transparent 66%);} #vl-film-native .vl-film-final .vl-film-atmosphere {opacity:.55;} #vl-film-native .vl-film-final .vl-film-light-cone {left:57%;transform:rotate(-12deg);} #vl-film-native .vl-film-ending-halo {position:absolute;left:53%;top:29%;width:42%;height:34%;background:radial-gradient(ellipse,var(--vl-film-glow),transparent 65%);filter:blur(25px);} #vl-film-native .vl-film-final .vl-film-horizon {top:57%;left:59%;right:9%;opacity:.4;} #vl-film-native .vl-film-matte {background:linear-gradient(var(--vl-bg-main) 0 9%,transparent 9% 91%,var(--vl-bg-main) 91%),radial-gradient(ellipse at 65% 46%,transparent 23%,color-mix(in oklab,var(--vl-bg-main) 65%,transparent) 80%);} @media(max-width:560px) { #vl-film-native .vl-film-actor-intro {left:48%;top:46%;} #vl-film-native .vl-film-actor-intro .vl-film-volume {width:8.5rem;} #vl-film-native .vl-film-light-cone {left:12%;width:120%;opacity:.65;} #vl-film-native .vl-film-horizon {left:18%;top:73%;} #vl-film-native .vl-film-set-floor {left:-20%;width:160%;top:73%;} #vl-film-native .vl-film-actor-barrier {left:77%;top:73%;--vl-film-character:3rem;} #vl-film-native .vl-film-wall i {inset:-1rem -1rem -5rem 1rem;} #vl-film-native .vl-film-wall i:last-child {inset:-2rem -2rem -4rem 2rem;} #vl-film-native .vl-film-portal {--vl-w:700;--vl-h:900;} #vl-film-native .vl-film-plinth {--vl-x:0;--vl-y:300;--vl-w:480;} #vl-film-native .vl-film-orbit-shadow {--vl-x:30;--vl-y:290;} #vl-film-native .vl-film-ending-halo {left:10%;top:41%;width:80%;} #vl-film-native .vl-film-final .vl-film-horizon {left:15%;right:15%;top:64%;} #vl-film-native .vl-film-overlay {background:linear-gradient(180deg,color-mix(in oklab,var(--vl-bg-main) 88%,transparent),transparent 62%);} } } /* ===== camada de cinema, som, mobile e fallback (film-only; não é primitiva do core) ===== */ /* ===== Velora Film · camada de cinema (CSS de composição do filme) ===== Não altera o core. Motion de cena continua em vl-enter / vl-state / vl-world. Aqui: letterbox, claquete, timecode, grão, filmstrip, legendas, HUD de câmera. */ @property --tc-ff { syntax:""; inherits:true; initial-value:0; } @property --tc-ss { syntax:""; inherits:true; initial-value:0; } @property --tc-mm { syntax:""; inherits:true; initial-value:0; } @keyframes vl-film-tc-ff { to { --tc-ff:24; } } @keyframes vl-film-tc-ss { to { --tc-ss:60; } } @keyframes vl-film-tc-mm { to { --tc-mm:60; } } @keyframes vl-film-grain { 0%{translate:0 0} 17%{translate:-4% 3%} 33%{translate:3% -5%} 50%{translate:-6% -2%} 67%{translate:5% 4%} 83%{translate:-2% 6%} 100%{translate:0 0} } @keyframes vl-film-flick { 0%,100%{opacity:.06} 20%{opacity:.04} 45%{opacity:.075} 70%{opacity:.05} } @keyframes vl-film-rec { 0%,55%{opacity:1} 56%,100%{opacity:.15} } @keyframes vl-film-clap { from{rotate:-26deg} to{rotate:0deg} } @keyframes vl-film-num { 0%{opacity:0;scale:1.5} 14%{opacity:1;scale:1} 78%{opacity:1;scale:.97} 100%{opacity:0;scale:.9} } @keyframes vl-film-sweep { to { rotate:360deg } } @keyframes vl-film-leader-out { to { opacity:0; visibility:hidden } } @keyframes vl-film-bump { 0%,100%{translate:0 0} 38%{translate:-.5rem 0} 52%{translate:.9rem -.1rem} 66%{translate:0 0} } @keyframes vl-film-cue { 0%,100%{translate:0 0;opacity:.5} 50%{translate:0 .45rem;opacity:1} } @keyframes vl-film-fill { from{transform:scaleY(0)} to{transform:scaleY(1)} } @keyframes vl-film-cap { 0%{opacity:0;translate:0 .6rem} 18%,82%{opacity:1;translate:0 0} 100%{opacity:0;translate:0 -.6rem} } @keyframes vl-film-cue-out { 0%,6%{opacity:1} 14%,100%{opacity:0} } @layer velora.overrides { #vl-film-native { --ar:2.39; --lb:clamp(3.6rem,calc((var(--vl-film-height) - 100cqi / var(--ar)) / 2),15svh); --vl-film-bar:color-mix(in oklab,var(--vl-bg-main) 55%,#000); --vl-film-cream:#EAEAD9; --vl-film-rec:#D9431A; } #vl-film-native:has(#ar-185:checked){--ar:1.85} #vl-film-native:has(#ar-169:checked){--ar:1.7778} /* --- barras de letterbox + vinheta --- */ #vl-film-native .vl-film-matte{background: linear-gradient(var(--vl-film-bar) 0 var(--lb),transparent var(--lb) calc(100% - var(--lb)),var(--vl-film-bar) calc(100% - var(--lb))), radial-gradient(ellipse at 62% 48%,transparent 40%,color-mix(in oklab,var(--vl-film-bar) 78%,transparent) 100%); box-shadow:inset 0 var(--lb) 0 -0px transparent;} #vl-film-native .vl-film-matte::before,#vl-film-native .vl-film-matte::after{content:"";position:absolute;inset-inline:0;block-size:1px;background:color-mix(in oklab,var(--vl-film-cream) 14%,transparent);} #vl-film-native .vl-film-matte::before{top:var(--lb)} #vl-film-native .vl-film-matte::after{bottom:var(--lb)} /* --- grão e tremor de projetor --- */ #vl-film-native .vl-film-grain{position:absolute;inset:-20%;z-index:16;pointer-events:none;opacity:.06; background-image:url("data:image/svg+xml;utf8,"); animation:vl-film-grain .7s steps(1) infinite,vl-film-flick 3.1s steps(1) infinite;} /* --- chrome superior --- */ #vl-film-native .vl-film-brand{inset-block:0 auto;block-size:var(--lb);display:flex;align-items:center;} #vl-film-native .vl-film-backstage{inset-block-start:0;block-size:var(--lb);display:flex;align-items:center;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-text-muted);} #vl-film-native .vl-film-backstage:hover,#vl-film-native .vl-film-backstage:focus-visible{color:var(--vl-color-accent);} #vl-film-native .vl-film-slatetext{position:absolute;z-index:20;inset-block:0 auto;block-size:var(--lb);inset-inline-start:50%;translate:-50% 0;margin:0;display:flex;align-items:center;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.24em;color:var(--vl-text-muted);white-space:nowrap;pointer-events:none;} #vl-film-native .vl-film-slatetext::before{content:"PRÓLOGO · VELORA CSS APRESENTA";} #vl-film-native:has(#film-scene-1:checked) .vl-film-slatetext::before{content:"ATO I · O DESVIO";} #vl-film-native:has(#film-scene-2:checked) .vl-film-slatetext::before{content:"ATO II · A RESISTÊNCIA";} #vl-film-native:has(#film-scene-3:checked) .vl-film-slatetext::before{content:"ATO III · A RUPTURA";} #vl-film-native:has(#film-scene-4:checked) .vl-film-slatetext::before{content:"ATO IV · A IDENTIDADE";} #vl-film-native:has(#film-scene-5:checked) .vl-film-slatetext::before{content:"ATO V · A LIBERDADE";} #vl-film-native .vl-film-rec{position:absolute;z-index:20;inset-block:0 auto;block-size:var(--lb);inset-inline-end:calc(var(--vl-space-lg) + 7.2rem);margin:0;display:flex;align-items:center;gap:.5rem;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.2em;color:var(--vl-text-muted);pointer-events:none;} #vl-film-native .vl-film-rec i{inline-size:.55rem;block-size:.55rem;border-radius:50%;background:var(--vl-film-rec);box-shadow:0 0 .8rem var(--vl-film-rec);animation:vl-film-rec 1.6s steps(1) infinite;} /* --- chrome inferior --- */ #vl-film-native .vl-film-bottombar{position:absolute;inset:auto 0 0;block-size:var(--lb);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--vl-space-lg);padding-inline:var(--vl-space-lg);pointer-events:none;} #vl-film-native .vl-film-bottombar>*{pointer-events:auto;} #vl-film-native .vl-film-filmname,#vl-film-native .vl-film-chapters{position:static;inset:auto;} #vl-film-native .vl-film-filmname{flex:1 1 0;white-space:nowrap;} #vl-film-native .vl-film-tc{font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.14em;color:var(--vl-text-muted);counter-reset:tcm var(--tc-mm) tcs var(--tc-ss) tcf var(--tc-ff);animation:vl-film-tc-ff 1s steps(24,end) infinite,vl-film-tc-ss 60s steps(60,end) infinite,vl-film-tc-mm 3600s steps(60,end) infinite;} #vl-film-native .vl-film-tc::after{content:"TC 00:" counter(tcm,decimal-leading-zero) ":" counter(tcs,decimal-leading-zero) ":" counter(tcf,decimal-leading-zero);} #vl-film-native .vl-film-aspect{border:0;margin:0;padding:0;display:flex;align-items:center;gap:.25rem;flex:1 1 0;justify-content:center;} #vl-film-native .vl-film-aspect legend{float:left;margin-inline-end:.6rem;padding:0;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--vl-text-muted);} #vl-film-native .vl-film-aspect label{position:relative;cursor:pointer;} #vl-film-native .vl-film-aspect label span{display:grid;place-items:center;min-inline-size:2.6rem;min-block-size:1.9rem;padding-inline:.35rem;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);color:var(--vl-text-muted);border:1px solid color-mix(in oklab,var(--vl-film-cream) 14%,transparent);} #vl-film-native .vl-film-aspect label:has(:checked) span{color:var(--vl-bg-main);background:var(--vl-color-accent);border-color:var(--vl-color-accent);} #vl-film-native .vl-film-aspect label:has(:focus-visible) span{outline:2px solid var(--vl-film-cream);outline-offset:2px;} #vl-film-native .vl-film-aspect .vl-film-radio{inset:0;inline-size:100%;block-size:100%;opacity:0;} /* --- filmstrip (capítulos) --- */ #vl-film-native .vl-film-chapters{position:relative;gap:2px;padding:.62rem .35rem;background:#050504;border-block:1px solid color-mix(in oklab,var(--vl-film-cream) 12%,transparent);} #vl-film-native .vl-film-chapters::before,#vl-film-native .vl-film-chapters::after{content:"";position:absolute;inset-inline:.2rem;block-size:.26rem;background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--vl-film-cream) 55%,transparent) 0 .34rem,transparent .34rem .72rem);} #vl-film-native .vl-film-chapters::before{top:.14rem} #vl-film-native .vl-film-chapters::after{bottom:.14rem} #vl-film-native .vl-film-chapters label{inline-size:2.5rem;min-block-size:2.1rem;background:color-mix(in oklab,var(--vl-film-cream) 5%,transparent);border:1px solid color-mix(in oklab,var(--vl-film-cream) 14%,transparent);} #vl-film-native:has(#film-scene-0:checked) .vl-film-chapters label[for="film-scene-0"]{color:var(--vl-color-accent);border-color:var(--vl-color-accent);} #vl-film-native .vl-film-chapters label:hover{color:var(--vl-film-cream);} #vl-film-native:has(.vl-film-reel .vl-film-radio:checked) .vl-film-chapters label[for]{transition:color .4s,background .4s,border-color .4s;} #vl-film-native:has(#film-scene-0:checked) .vl-film-chapters label[for="film-scene-0"],#vl-film-native:has(#film-scene-1:checked) .vl-film-chapters label[for="film-scene-1"],#vl-film-native:has(#film-scene-2:checked) .vl-film-chapters label[for="film-scene-2"],#vl-film-native:has(#film-scene-3:checked) .vl-film-chapters label[for="film-scene-3"],#vl-film-native:has(#film-scene-4:checked) .vl-film-chapters label[for="film-scene-4"],#vl-film-native:has(#film-scene-5:checked) .vl-film-chapters label[for="film-scene-5"]{background:color-mix(in oklab,var(--vl-color-accent) 18%,transparent);box-shadow:0 0 1.1rem -.2rem var(--vl-film-glow);} /* --- claquete (slate) --- */ #vl-film-native .vl-film-slate{position:absolute;z-index:6;inset-inline-start:8%;inset-block-start:calc(var(--lb) + 1.1rem);display:flex;align-items:center;gap:.85rem;padding:.42rem .8rem .42rem .55rem;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.16em;color:var(--vl-text-secondary);background:color-mix(in oklab,var(--vl-film-bar) 78%,transparent);border:1px solid color-mix(in oklab,var(--vl-film-cream) 16%,transparent);} #vl-film-native .vl-film-slate b{color:var(--vl-film-cream);font-weight:600;} #vl-film-native .vl-film-slate-loc{color:var(--vl-color-accent);} #vl-film-native .vl-film-clap{position:relative;inline-size:1.5rem;block-size:1.05rem;margin-top:.4rem;background:var(--vl-film-cream);} #vl-film-native .vl-film-clap i{position:absolute;left:0;right:0;top:-.42rem;block-size:.36rem;transform-origin:0 100%;background:repeating-linear-gradient(-18.4deg,#050504 0 .22rem,var(--vl-film-cream) .22rem .44rem);animation:vl-film-clap .42s .85s cubic-bezier(.7,0,.2,1) both;} #vl-film-native .vl-film-slate-lens{font-size:0;} #vl-film-native .vl-film-slate-lens::after{content:"50 MM";font-size:var(--vl-font-size-xs);} #vl-film-native:has(#lens-24:checked) .vl-film-slate-lens::after{content:"24 MM";} #vl-film-native:has(#lens-85:checked) .vl-film-slate-lens::after{content:"85 MM";} #vl-film-native:has(#lens-24:checked) .vl-film-atelier{--vl-world-fov:112;} #vl-film-native:has(#lens-85:checked) .vl-film-atelier{--vl-world-fov:64;} /* --- legendas (narrador) e ações acima da barra --- */ #vl-film-native .vl-film-subtitle{position:absolute;z-index:6;inset-inline-start:50%;translate:-50% 0;inset-block-end:calc(var(--lb) + 1.3rem);inline-size:max-content;max-inline-size:min(46rem,86%);margin:0;padding:.3rem .9rem;text-align:center;font-size:var(--vl-font-size-sm);line-height:1.45;color:var(--vl-film-cream);text-shadow:0 2px 14px #000;background:color-mix(in oklab,var(--vl-film-bar) 55%,transparent);} #vl-film-native .vl-film-action{inset-block-end:calc(var(--lb) + 4.4rem);} #vl-film-native .vl-film-action-colors{inset-block-end:calc(var(--lb) + 1.2rem);} #vl-film-native .vl-film-action-colors .vl-film-swatches{margin-bottom:var(--vl-space-md);} #vl-film-native .vl-film-lens label:has(input:checked){color:var(--vl-color-accent);} #vl-film-native .vl-film-copy{inset-block-start:calc(var(--lb) + 14%);} /* --- prólogo: leader, título --- */ #vl-film-native .vl-film-leader{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;} #vl-film-native .vl-film-leader>*{grid-area:1/1;} #vl-film-native .vl-film-leader-ring{inline-size:min(24rem,60cqi);aspect-ratio:1;border-radius:50%;border:2px solid color-mix(in oklab,var(--vl-film-cream) 70%,transparent);box-shadow:0 0 0 .9rem color-mix(in oklab,var(--vl-film-cream) 6%,transparent),inset 0 0 0 .9rem color-mix(in oklab,var(--vl-film-cream) 5%,transparent);} #vl-film-native .vl-film-leader-sweep{inline-size:min(24rem,60cqi);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in oklab,var(--vl-color-accent) 55%,transparent),transparent 28%);} #vl-film-native .vl-film-leader-cross{inline-size:min(34rem,86cqi);aspect-ratio:1;background:linear-gradient(var(--vl-film-line),var(--vl-film-line)) center/100% 1px no-repeat,linear-gradient(var(--vl-film-line),var(--vl-film-line)) center/1px 100% no-repeat;} #vl-film-native .vl-film-leader b{font:var(--vl-font-weight-bold) clamp(6rem,18cqi,12rem)/1 var(--vl-font-family-display);color:var(--vl-film-cream);opacity:0;} #vl-film-native:has(#film-scene-0:checked) .vl-film-leader{animation:vl-film-leader-out .5s 2.5s both;} #vl-film-native:has(#film-scene-0:checked) .vl-film-leader-sweep{animation:vl-film-sweep .8s linear 3;} #vl-film-native:has(#film-scene-0:checked) .vl-film-leader .n3{animation:vl-film-num .8s 0s both;} #vl-film-native:has(#film-scene-0:checked) .vl-film-leader .n2{animation:vl-film-num .8s .8s both;} #vl-film-native:has(#film-scene-0:checked) .vl-film-leader .n1{animation:vl-film-num .8s 1.6s both;} #vl-film-native .vl-film-presents{position:absolute;z-index:5;inset-inline-start:50%;translate:-50% 0;inset-block-start:calc(var(--lb) + 9%);margin:0;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.42em;color:var(--vl-text-muted);white-space:nowrap;} #vl-film-native .vl-film-titlecard{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;text-align:center;gap:0;padding-block:var(--lb);} #vl-film-native .vl-film-titlecard h1{margin:0;inline-size:clamp(7rem,20cqi,16rem);aspect-ratio:429.23/455.73;clip-path:var(--vl-film-v-shape);font-size:0;line-height:0;color:transparent;overflow:hidden;background:linear-gradient(118deg,var(--vl-film-rim) 0%,var(--vl-film-lit) 14%,var(--vl-color-accent) 30%,color-mix(in oklab,var(--vl-color-accent) 40%,var(--vl-bg-main)) 62%,var(--vl-color-accent) 82%,var(--vl-film-rim));} #vl-film-native .vl-film-title-sub{margin:var(--vl-space-lg) 0 0;font:var(--vl-font-weight-bold) clamp(1.3rem,3.6cqi,2.6rem)/1 var(--vl-font-family-display);letter-spacing:.42em;padding-inline-start:.42em;color:var(--vl-film-cream);} #vl-film-native .vl-film-title-tag{margin:var(--vl-space-md) 0 0;font-size:var(--vl-font-size-sm);color:var(--vl-text-muted);} #vl-film-native .vl-film-titlecard::before{content:"";position:absolute;inset-block:-10% -10%;inset-inline-start:50%;inline-size:1px;background:linear-gradient(transparent,var(--vl-color-accent) 40% 60%,transparent);opacity:.55;transform:rotate(var(--vl-cut-angle));box-shadow:0 0 22px 2px var(--vl-film-glow);} #vl-film-native .vl-film-prologue .vl-film-light-cone{left:30%;transform:rotate(-8deg);opacity:.85;} #vl-film-native .vl-film-action-center{inset-inline:0;margin-inline:auto;inline-size:max-content;text-align:center;inset-block-end:calc(var(--lb) + 1.2rem);} #vl-film-native .vl-film-action-center .vl-film-continue{gap:var(--vl-space-xl);} /* --- Ato I: V flutua --- */ #vl-film-native .vl-film-actor-intro{--vl-loop-duration:6s;} /* --- Ato II: placa fatiada legível, fenda, V que atravessa --- */ #vl-film-native .vl-film-cut-target{background:none;border:0;box-shadow:none;isolation:isolate;} #vl-film-native .vl-film-cut-target::before{display:none;} #vl-film-native .vl-film-plate{position:absolute;inset:0;z-index:-1;pointer-events:auto;--vl-slice-gap:.12;background:linear-gradient(125deg,color-mix(in oklab,var(--vl-film-lit) 14%,var(--vl-bg-surface)),var(--vl-bg-surface) 70%);border:1px solid color-mix(in oklab,var(--vl-film-rim) 38%,transparent);box-shadow:var(--vl-shadow-dramatic),-12px 0 40px -20px var(--vl-film-lit);} #vl-film-native .vl-film-cut-target>span,#vl-film-native .vl-film-cut-target>strong,#vl-film-native .vl-film-cut-target>small{pointer-events:none;position:relative;color:var(--vl-film-cream);text-shadow:0 1px 10px var(--vl-bg-main);} #vl-film-native .vl-film-cut-target>small{color:var(--vl-color-accent);} #vl-film-native .vl-film-cut-target>span{color:var(--vl-text-secondary);} #vl-film-native .vl-film-fissure{position:absolute;z-index:2;inset-block:-14% -14%;inset-inline-start:46%;inline-size:3px;background:linear-gradient(transparent,var(--vl-film-rim) 12% 88%,transparent);box-shadow:0 0 1.2rem .15rem var(--vl-film-lit),0 0 5rem .8rem var(--vl-film-glow);transform:rotate(var(--vl-cut-angle)) scaleY(0);transition:transform 1.1s var(--vl-ease-cinematic);pointer-events:none;} #vl-film-native #film-open-cut:checked + .vl-film-cut-target .vl-film-fissure{transform:rotate(var(--vl-cut-angle)) scaleY(1);} #vl-film-native #film-open-cut:checked + .vl-film-cut-target .vl-film-plate{--vl-slice-open:1;} #vl-film-native #film-open-cut:focus-visible + .vl-film-cut-target{outline:2px solid var(--vl-color-accent);outline-offset:6px;} #vl-film-native .vl-film-actor-barrier{left:46%;top:46%;--vl-film-character:clamp(6rem,12cqi,10rem);z-index:4;translate:0 0;scale:1;transition:translate 1.5s var(--vl-ease-cinematic),scale 1.5s var(--vl-ease-cinematic);} #vl-film-native .vl-film-actor-barrier .vl-film-volume{animation:vl-film-bump 2.8s ease-in-out infinite;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) ~ .vl-film-actor-barrier{translate:31cqi -6rem;scale:.78;z-index:8;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) ~ .vl-film-actor-barrier .vl-film-volume{animation:none;} #vl-film-native .vl-film-barrier{top:calc(var(--lb) + 16%);} /* --- Atos III e IV: HUD de câmera --- */ #vl-film-native .vl-film-shot-camera{timeline-scope:--cam;} #vl-film-native .vl-film-shot-camera .vl-film-camera-scroll{scroll-timeline:--cam block;} #vl-film-native .vl-film-camera-scroll:focus-visible{outline:2px solid var(--vl-color-accent);outline-offset:-6px;} #vl-film-native .vl-film-hud{position:absolute;inset:0;z-index:8;pointer-events:none;} #vl-film-native .vl-film-depth{position:absolute;inset-inline-end:var(--vl-space-lg);inset-block-start:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:.7rem;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.2em;color:var(--vl-text-muted);} #vl-film-native .vl-film-depth span{writing-mode:vertical-rl;} #vl-film-native .vl-film-depth i{display:block;inline-size:2px;block-size:9rem;background:color-mix(in oklab,var(--vl-film-cream) 16%,transparent);} #vl-film-native .vl-film-depth b{display:block;inline-size:100%;block-size:100%;background:var(--vl-color-accent);box-shadow:0 0 .8rem var(--vl-film-lit);transform-origin:top;transform:scaleY(0);} #vl-film-native .vl-film-depth-cap{position:absolute;inset-inline-end:calc(var(--vl-space-lg) + 2.6rem);inset-block-start:50%;margin:0;margin-top:-.5rem;font:var(--vl-font-weight-semibold) var(--vl-font-size-sm)/1 var(--vl-font-family-mono);letter-spacing:.22em;color:var(--vl-film-cream);opacity:0;text-shadow:0 2px 14px #000;} #vl-film-native .vl-film-scrollcue{position:absolute;inset-inline-start:50%;translate:-50% 0;inset-block-end:calc(var(--lb) + 3.4rem);margin:0;display:flex;flex-direction:column;align-items:center;gap:.4rem;font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--vl-film-cream);text-shadow:0 2px 12px #000;} #vl-film-native .vl-film-scrollcue i{inline-size:.9rem;block-size:.9rem;border-right:2px solid var(--vl-color-accent);border-bottom:2px solid var(--vl-color-accent);rotate:45deg;margin-top:-.2rem;animation:vl-film-cue 1.6s ease-in-out infinite;} @supports (animation-timeline:scroll()) { #vl-film-native .vl-film-shot-camera .vl-film-depth b{animation:vl-film-fill linear both;animation-timeline:--cam;} #vl-film-native .vl-film-shot-camera .vl-film-scrollcue{animation:vl-film-cue-out linear both;animation-timeline:--cam;} #vl-film-native .vl-film-depth-cap{animation:vl-film-cap linear both;animation-timeline:--cam;} #vl-film-native .cap1{animation-range:0% 20%}#vl-film-native .cap2{animation-range:20% 40%}#vl-film-native .cap3{animation-range:40% 60%}#vl-film-native .cap4{animation-range:60% 80%}#vl-film-native .cap5{animation-range:80% 100%} } /* --- Ato V: créditos --- */ #vl-film-native .vl-film-credits{position:absolute;z-index:5;inset-inline-start:61%;inset-block-start:57%;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,auto);gap:.9rem 2.4rem;font-size:var(--vl-font-size-sm);color:var(--vl-film-cream);} #vl-film-native .vl-film-credits li{display:flex;flex-direction:column;gap:.25rem;} #vl-film-native .vl-film-credits span{font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--vl-text-muted);} /* --- mobile --- */ @media(max-width:560px){ #vl-film-native{--lb:clamp(3.4rem,calc((var(--vl-film-height) - 100cqi / var(--ar)) / 2),9svh);} #vl-film-native .vl-film-slatetext,#vl-film-native .vl-film-rec,#vl-film-native .vl-film-aspect,#vl-film-native .vl-film-filmname{display:none;} #vl-film-native .vl-film-bottombar{padding-inline:var(--vl-space-md);} #vl-film-native .vl-film-tc{flex:1;} #vl-film-native .vl-film-chapters label{inline-size:2.1rem;} #vl-film-native .vl-film-slate{inset-inline:var(--vl-space-md) auto;gap:.55rem;padding:.35rem .55rem .35rem .45rem;} #vl-film-native .vl-film-slate span:not(.vl-film-clap):not(.vl-film-slate-loc){display:none;} #vl-film-native .vl-film-slate-loc{max-inline-size:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #vl-film-native .vl-film-copy{inset-block-start:calc(var(--lb) + 11%);} #vl-film-native .vl-film-subtitle{inset-block-end:calc(var(--lb) + .6rem);font-size:var(--vl-font-size-xs);} #vl-film-native .vl-film-action{inset-block-end:calc(var(--lb) + 4rem);} #vl-film-native .vl-film-action-colors{inset-block-end:calc(var(--lb) + .8rem);} #vl-film-native .vl-film-presents{letter-spacing:.24em;} #vl-film-native .vl-film-barrier{top:calc(var(--lb) + 36%);} #vl-film-native .vl-film-actor-barrier{left:12%;top:calc(var(--lb) + 20%);--vl-film-character:5rem;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) ~ .vl-film-actor-barrier{translate:34cqi 12rem;} #vl-film-native .vl-film-depth{inset-inline-end:var(--vl-space-sm);} #vl-film-native .vl-film-depth-cap{inset-block-start:calc(var(--lb) + 3.4rem);inset-inline:var(--vl-space-md) auto;} #vl-film-native .vl-film-scrollcue{inset-block-end:calc(var(--lb) + 5.4rem);} #vl-film-native .vl-film-credits{inset-inline-start:12%;inset-block-start:66%;gap:.6rem 1.6rem;} } @media(prefers-reduced-motion:reduce){ #vl-film-native .vl-film-grain,#vl-film-native .vl-film-tc,#vl-film-native .vl-film-rec i,#vl-film-native .vl-film-scrollcue i,#vl-film-native .vl-film-actor-barrier .vl-film-volume,#vl-film-native .vl-film-clap i{animation:none;} #vl-film-native .vl-film-leader{display:none;} } } @layer velora.overrides { /* Ato III: corredor mais luminoso, V no eixo da câmera e visível desde o início */ #vl-film-native .vl-film-corridor{--vl-lights-dim:.4;--vl-lights-vignette:30;--vl-lights-glow:34;} #vl-film-native .vl-film-world-v{--vl-x:0;--vl-y:50;--vl-w:560;--vl-h:595;} #vl-film-native .vl-film-portal{border:4px solid color-mix(in oklab,var(--vl-film-lit) 90%,transparent);box-shadow:inset 0 0 50px var(--vl-film-glow),0 0 70px var(--vl-film-glow);} #vl-film-native .vl-film-tunnel-floor{background:repeating-linear-gradient(0deg,transparent 0 298px,color-mix(in oklab,var(--vl-film-lit) 55%,transparent) 300px 302px),linear-gradient(90deg,transparent 44%,color-mix(in oklab,var(--vl-color-accent) 28%,transparent) 50%,transparent 56%),var(--vl-bg-main);} /* Ato IV: controles em linha para caber no letterbox */ #vl-film-native .vl-film-action-colors{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:2.4rem;max-inline-size:min(34rem,50%);} #vl-film-native .vl-film-action-colors .vl-film-continue{flex-basis:100%;justify-content:space-between;max-inline-size:17rem;} #vl-film-native .vl-film-action-colors .vl-film-swatches{margin-bottom:var(--vl-space-sm);gap:var(--vl-space-md);} @media(max-width:560px){ #vl-film-native .vl-film-world-v{--vl-x:0;--vl-y:80;--vl-w:420;--vl-h:446;} #vl-film-native .vl-film-action-colors{max-inline-size:none;column-gap:1rem;} } } @layer velora.overrides { #vl-film-native .vl-film-orbit-v{--vl-w:580;--vl-h:616;} @media(max-width:560px){ #vl-film-native .vl-film-hud-orbit .vl-film-scrollcue{display:none;} #vl-film-native .vl-film-action{inset-block-end:calc(var(--lb) + 5.2rem);} #vl-film-native .vl-film-orbit-v{--vl-w:400;--vl-h:425;} } } /* ===== v3: som, créditos em marquee, lente, modo leve e compatibilidade ===== */ @keyframes vl-film-hint { 0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--vl-color-accent) 55%,transparent)} 60%{box-shadow:0 0 0 .6rem transparent} } @layer velora.overrides { /* cluster de ferramentas no topo: som + REC */ #vl-film-native .vl-film-tools{position:absolute;z-index:20;inset-block:0 auto;block-size:var(--lb);inset-inline-end:calc(var(--vl-space-lg) + 8.2rem);display:flex;align-items:center;gap:1.4rem;} #vl-film-native .vl-film-rec{position:static;block-size:auto;inset:auto;} #vl-film-native .vl-film-sound{display:flex;align-items:center;gap:.5rem;} #vl-film-native .vl-film-mute{inline-size:2.75rem;block-size:2.75rem;display:grid;place-items:center;padding:0;background:transparent;color:var(--vl-text-muted);border:1px solid color-mix(in oklab,var(--vl-film-cream) 16%,transparent);cursor:pointer;} #vl-film-native .vl-film-mute:hover,#vl-film-native .vl-film-mute:focus-visible{color:var(--vl-color-accent);border-color:var(--vl-color-accent);} #vl-film-native .vl-film-mute svg{inline-size:1.35rem;block-size:1.35rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} #vl-film-native .vl-film-mute .spk{fill:currentColor;fill-opacity:.15;} #vl-film-native .vl-film-mute .x{display:none;} #vl-film-native[data-sound="off"] .vl-film-mute .w1,#vl-film-native[data-sound="off"] .vl-film-mute .w2{display:none;} #vl-film-native[data-sound="off"] .vl-film-mute .x{display:inline;} #vl-film-native[data-sound="on"] .vl-film-mute{color:var(--vl-color-accent);} #vl-film-native[data-sound="idle"] .vl-film-mute{animation:vl-film-hint 2.4s ease-out infinite;} #vl-film-native .vl-film-vol{--v:60%;-webkit-appearance:none;appearance:none;inline-size:5.6rem;block-size:2.75rem;background:transparent;cursor:pointer;} #vl-film-native .vl-film-vol::-webkit-slider-runnable-track{block-size:2px;background:linear-gradient(90deg,var(--vl-color-accent) var(--v),color-mix(in oklab,var(--vl-film-cream) 20%,transparent) var(--v));} #vl-film-native .vl-film-vol::-moz-range-track{block-size:2px;background:color-mix(in oklab,var(--vl-film-cream) 20%,transparent);} #vl-film-native .vl-film-vol::-moz-range-progress{block-size:2px;background:var(--vl-color-accent);} #vl-film-native .vl-film-vol::-webkit-slider-thumb{-webkit-appearance:none;inline-size:.8rem;block-size:.8rem;margin-top:-.4rem;border-radius:50%;background:var(--vl-film-cream);border:0;} #vl-film-native .vl-film-vol::-moz-range-thumb{inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--vl-film-cream);border:0;} #vl-film-native .vl-film-vol:focus-visible{outline:2px solid var(--vl-color-accent);outline-offset:2px;} #vl-film-native[data-sound="off"] .vl-film-vol{opacity:.4;} /* Ato V: créditos em marquee (core .vl-marquee) */ #vl-film-native .vl-film-roll{position:absolute;z-index:6;inset-inline:0;inset-block-end:calc(var(--lb) + .9rem);display:grid;gap:.7rem;} #vl-film-native .vl-film-marquee{--vl-marquee-gap:3.4rem;} #vl-film-native .vl-film-marquee .vl-marquee__track{margin:0;padding:0;list-style:none;} #vl-film-native .vl-film-marquee .vl-marquee__item{display:inline-flex;align-items:baseline;gap:.7rem;font:var(--vl-font-weight-semibold) clamp(1rem,2.2cqi,1.5rem)/1 var(--vl-font-family-display);letter-spacing:-.01em;text-transform:none;color:var(--vl-film-cream);opacity:1;} #vl-film-native .vl-film-marquee .vl-marquee__item em{font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--vl-text-muted);} #vl-film-native .vl-film-marquee .vl-marquee__item::after{content:"";inline-size:.4rem;block-size:.4rem;margin-inline-start:1.7rem;background:var(--vl-color-accent);rotate:45deg;align-self:center;} #vl-film-native .vl-film-marquee-b .vl-marquee__item{font:var(--vl-font-size-xs)/1 var(--vl-font-family-mono);letter-spacing:.14em;color:var(--vl-color-accent);} #vl-film-native .vl-film-marquee-b code{font:inherit;} #vl-film-native .vl-film-final .vl-film-action{inset-block-end:calc(var(--lb) + 7rem);} #vl-film-native .vl-film-subtitle-end{inset-inline-start:61%;translate:none;inset-block-end:auto;inset-block-start:58%;text-align:start;inline-size:auto;max-inline-size:28ch;background:none;padding:0;color:var(--vl-text-secondary);} @media(prefers-reduced-motion:reduce){#vl-film-native .vl-marquee__track>[aria-hidden="true"]{display:none;}} /* Ato IV: lente muda a perspectiva da câmera (visível em qualquer dispositivo) */ #vl-film-native .vl-film-atelier{--lens-p:700px;--vl-world-perspective:var(--lens-p);} #vl-film-native .vl-film-atelier .vl-world__stage{transition:perspective .9s var(--vl-ease-cinematic);} #vl-film-native:has(#lens-24:checked) .vl-film-atelier{--lens-p:340px;} #vl-film-native:has(#lens-85:checked) .vl-film-atelier{--lens-p:1500px;} /* aviso de modo compatível: só aparece quando a câmera por scroll não existe */ #vl-film-native .vl-film-compat{display:none;position:absolute;inset-inline-start:50%;translate:-50% 0;inset-block-end:calc(var(--lb) + 3.4rem);margin:0;padding:.35rem .8rem;max-inline-size:min(34rem,88%);text-align:center;font:var(--vl-font-size-xs)/1.4 var(--vl-font-family-mono);letter-spacing:.06em;color:var(--vl-film-cream);background:color-mix(in oklab,var(--vl-film-bar) 70%,transparent);border:1px solid color-mix(in oklab,var(--vl-film-cream) 16%,transparent);} /* modo leve (iPhone e telas até 820px): menos camadas 3D, menos memória. Camadas planas enormes (piso, teto, paredes) custam área × dpr² em memória no WebKit. */ @media(max-width:820px){ #vl-film-native .vl-film-corridor{--vl-world-w:640;--vl-world-h:520;--vl-world-d:1800;--vl-world-travel:1200;--vl-world-near:-40;--vl-world-far:2200;} #vl-film-native .vl-film-corridor .vl-world__ceiling,#vl-film-native .vl-film-corridor .vl-world__wall-left,#vl-film-native .vl-film-corridor .vl-world__wall-right{display:none;} #vl-film-native .vl-film-portal{--vl-w:420;--vl-h:560;box-shadow:none;border-width:3px;} #vl-film-native .vl-film-portal-a{--vl-z:-250;}#vl-film-native .vl-film-portal-b{--vl-z:-650;}#vl-film-native .vl-film-portal-d{--vl-z:-1050;}#vl-film-native .vl-film-portal-e{--vl-z:-1450;} #vl-film-native .vl-film-portal-c{display:none;} #vl-film-native .vl-film-world-v{--vl-z:-1700;--vl-w:380;--vl-h:404;--vl-x:0;--vl-y:60;} #vl-film-native .vl-film-tunnel-floor{background:repeating-linear-gradient(0deg,transparent 0 238px,color-mix(in oklab,var(--vl-film-lit) 55%,transparent) 240px 242px),var(--vl-bg-main);} #vl-film-native .vl-film-shot-camera .vl-film-atmosphere{display:none;} #vl-film-native .vl-film-plinth{--vl-w:420;--vl-h:360;} #vl-film-native .vl-film-grain{inset:0;animation:none;opacity:.05;} #vl-film-native .vl-film-atelier{--lens-p:520px;} #vl-film-native:has(#lens-24:checked) .vl-film-atelier{--lens-p:260px;} #vl-film-native:has(#lens-85:checked) .vl-film-atelier{--lens-p:1100px;} } /* tablets e janelas estreitas: o rótulo central do topo cruzaria as ferramentas de som */ @media(max-width:1100px){ #vl-film-native .vl-film-slatetext{display:none;} } @media(max-width:560px){ #vl-film-native .vl-film-tools{inset-inline-end:calc(var(--vl-space-md) + 8rem);gap:.6rem;} #vl-film-native .vl-film-rec,#vl-film-native .vl-film-vol{display:none;} #vl-film-native .vl-film-mute{inline-size:2.5rem;block-size:2.5rem;} #vl-film-native .vl-film-roll{inset-block-end:calc(var(--lb) + .5rem);gap:.45rem;} #vl-film-native .vl-film-final .vl-film-action{inset-block-end:calc(var(--lb) + 6rem);} #vl-film-native .vl-film-subtitle-end{inset-inline-start:12%;inset-block-start:min(calc(66% + 1.5rem),calc(100% - var(--lb) - 13.6rem));max-inline-size:none;} #vl-film-native .vl-film-compat{inset-block-end:calc(var(--lb) + 4.6rem);} } /* fallback sem animation-timeline (Firefox e similares): câmera no tempo, conteúdo sempre visível */ @supports not (animation-timeline: view()) { #vl-film-native .vl-film-corridor .vl-world__rig{animation:vl-world-path-dolly 20s cubic-bezier(.45,0,.25,1) infinite alternate both;} #vl-film-native .vl-film-atelier .vl-world__rig{animation:vl-world-path-orbit 28s ease-in-out infinite alternate both;} #vl-film-native [vl-world-path] .vl-world__rig>[vl-plane]:not([vl-rest]){display:block;} #vl-film-native .vl-film-depth,#vl-film-native .vl-film-depth-cap,#vl-film-native .vl-film-scrollcue{display:none;} #vl-film-native .vl-film-compat{display:block;} } @supports not (animation-timeline: scroll()) { #vl-film-native .vl-film-depth,#vl-film-native .vl-film-depth-cap,#vl-film-native .vl-film-scrollcue{display:none;} #vl-film-native .vl-film-compat{display:block;} } @media(prefers-reduced-motion:reduce){ #vl-film-native .vl-film-world .vl-world__rig{animation:none;} #vl-film-native .vl-film-compat{display:none;} } } @layer velora.overrides { @media(max-width:560px){ #vl-film-native:has(#lens-85:checked) .vl-film-atelier{--lens-p:760px;} #vl-film-native .vl-film-scrollcue{font-size:0;inset-inline-start:auto;inset-inline-end:var(--vl-space-lg);translate:none;inset-block-end:calc(var(--lb) + 4.4rem);} #vl-film-native .vl-film-depth-cap{inset-block-start:50%;inset-inline:auto 2.2rem;margin-top:-.5rem;font-size:var(--vl-font-size-xs);} } } /* ===== v4: altura real do viewport, Ato II mobile em fluxo, telas curtas e paisagem ===== */ @layer velora.overrides { #vl-film-native{--vl-film-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));} html:has(#vl-film-native),body:has(#vl-film-native){overflow:hidden;overscroll-behavior:none;} #vl-film-native .vl-film-bottombar{padding-inline:max(var(--vl-space-lg),env(safe-area-inset-left,0px)) max(var(--vl-space-lg),env(safe-area-inset-right,0px));} @media(max-width:560px){ /* Ato II: copy, V e placa em fluxo vertical, sem sobreposição em qualquer altura */ #vl-film-native .vl-film-resistance .vl-film-screen{display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--lb) + 3.3rem) 8% calc(var(--lb) + 1rem);gap:1.1rem;} #vl-film-native .vl-film-resistance .vl-film-copy{position:relative;inset:auto;order:0;max-inline-size:64%;} #vl-film-native .vl-film-resistance .vl-film-actor-barrier{position:relative;left:auto;top:auto;order:1;align-self:flex-end;margin:-5.4rem .2rem 0 0;--vl-film-character:4.8rem;} #vl-film-native .vl-film-resistance .vl-film-barrier{position:relative;inset:auto;left:auto;right:auto;top:auto;order:2;margin-inline:.4rem .8rem;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) ~ .vl-film-actor-barrier{translate:-9cqi 6.4rem;scale:.8;} #vl-film-native .vl-film-resistance .vl-film-subtitle{display:none;} } /* telas curtas (iPhone com barras do Safari visíveis, SE, etc.) */ @media(max-width:560px) and (max-height:700px){ #vl-film-native{--vl-film-title:1.85rem;} #vl-film-native .vl-film-copy>p:last-child,#vl-film-native .vl-film-action>p,#vl-film-native .vl-film-slate-loc,#vl-film-native .vl-film-subtitle{display:none;} #vl-film-native .vl-film-copy{inset-block-start:calc(var(--lb) + 3.4rem);} #vl-film-native .vl-film-swatches legend{display:none;} #vl-film-native .vl-film-action-colors .vl-film-swatches{margin-bottom:.3rem;} #vl-film-native .vl-film-resistance .vl-film-actor-barrier{margin-top:-5.4rem;} #vl-film-native .vl-film-resistance .vl-film-copy{max-inline-size:60%;} #vl-film-native .vl-film-final .vl-film-action{inset-block-end:calc(var(--lb) + 5.4rem);} } /* celular na horizontal */ @media(max-height:500px) and (orientation:landscape){ #vl-film-native{--lb:clamp(2.6rem,13svh,3.2rem);--vl-film-title:clamp(1.6rem,7.5svh,2.3rem);} #vl-film-native .vl-film-slate,#vl-film-native .vl-film-slatetext,#vl-film-native .vl-film-subtitle,#vl-film-native .vl-film-copy>p:last-child,#vl-film-native .vl-film-action>p,#vl-film-native .vl-film-compat,#vl-film-native .vl-film-filmname,#vl-film-native .vl-film-aspect legend{display:none;} #vl-film-native .vl-film-copy{inset-block-start:calc(var(--lb) + 6svh);} #vl-film-native .vl-film-action{inset-block-end:calc(var(--lb) + .8rem);} #vl-film-native .vl-film-action-colors{inset-block-end:calc(var(--lb) + .5rem);max-inline-size:none;flex-direction:row;align-items:flex-end;column-gap:1.4rem;} #vl-film-native .vl-film-action-colors .vl-film-continue{flex-basis:auto;} #vl-film-native .vl-film-swatches legend{display:none;} #vl-film-native .vl-film-barrier{top:calc(var(--lb) + 6svh);} #vl-film-native .vl-film-cut-target{min-block-size:7rem;} #vl-film-native .vl-film-actor-barrier{--vl-film-character:5rem;top:calc(var(--lb) + 10svh);} #vl-film-native .vl-film-roll{inset-block-end:calc(var(--lb) + .4rem);} #vl-film-native .vl-film-subtitle-end{display:none;} #vl-film-native .vl-film-final .vl-film-action{inset-block-end:calc(var(--lb) + 4.6rem);} #vl-film-native .vl-film-scrollcue{inset-block-end:calc(var(--lb) + .6rem);} #vl-film-native .vl-film-titlecard h1{inline-size:clamp(4rem,26svh,8rem);} #vl-film-native .vl-film-title-sub{margin-top:.5rem;font-size:1.1rem;} #vl-film-native .vl-film-presents{inset-block-start:calc(var(--lb) + 2svh);} #vl-film-native .vl-film-title-tag{margin-top:.3rem;font-size:var(--vl-font-size-xs);} #vl-film-native .vl-film-action-center{inset-block-end:calc(var(--lb) + .4rem);} } } @layer velora.overrides { @media(max-width:560px) and (max-height:700px){ #vl-film-native .vl-film-titlecard h1{inline-size:clamp(5rem,26svh,8.5rem);} #vl-film-native .vl-film-title-sub{margin-top:.8rem;font-size:1.25rem;} #vl-film-native .vl-film-action-center{inset-block-end:calc(var(--lb) + .5rem);} } } @layer velora.overrides { @media(max-height:500px) and (orientation:landscape){ #vl-film-native .vl-film-cut-target{min-block-size:5.2rem;padding:var(--vl-space-md);gap:.3rem;} #vl-film-native .vl-film-cut-target>small{display:none;} #vl-film-native .vl-film-passage{display:flex;align-items:center;gap:1.2rem;margin-top:.5rem;} #vl-film-native .vl-film-barrier:has(#film-open-cut:checked) ~ .vl-film-actor-barrier{translate:8cqi 3.4rem;scale:.8;} #vl-film-native .vl-film-hud-orbit .vl-film-scrollcue{display:none;} } } @layer velora.overrides { @media(max-height:500px) and (orientation:landscape){ #vl-film-native .vl-film-scrollcue{inset-inline-start:auto;inset-inline-end:5rem;translate:none;} } } @layer velora.overrides { @media(max-width:560px){ #vl-film-native .vl-film-resistance .vl-film-screen>*{flex:0 0 auto;} } @media(max-width:560px) and (max-height:700px){ #vl-film-native .vl-film-orbit-v{--vl-w:300;--vl-h:319;--vl-y:-70;} #vl-film-native .vl-film-plinth{--vl-y:110;} #vl-film-native .vl-film-orbit-shadow{--vl-y:100;} } } @layer velora.overrides { @media(max-width:560px) and (max-height:600px){ #vl-film-native .vl-film-orbit-v{--vl-y:-115;} } } /* Prólogo em telas largas e baixas (ex.: projetor 1280x720): o cartão de título é centralizado entre as faixas e descia até o botão "Iniciar a projeção". Reserva a área do botão no padding inferior. */ @layer velora.overrides { @media (min-width:561px) and (min-height:561px) { /* topo livre para "VELORA CSS APRESENTA", rodapé livre para o botão; o V ocupa o que sobra (nunca maior que o desenho original) */ #vl-film-native .vl-film-titlecard{padding-block:calc(var(--lb) + var(--vl-film-height) * .09 + 1.75rem) calc(var(--lb) + 7.8rem);} #vl-film-native .vl-film-titlecard h1{inline-size:clamp(7rem,min(20cqi,(var(--vl-film-height) * .91 - 2 * var(--lb) - 16.5rem) * .94),16rem);} } } /* Ato IV em telas largas: a dica de orbitar fica no canto, fora da trilha dos controles de cor e lente (tablets e notebooks) */ @layer velora.overrides { @media (min-width:561px) and (min-height:501px) { #vl-film-native .vl-film-hud-orbit .vl-film-scrollcue{inset-inline-start:auto;inset-inline-end:var(--vl-space-xl);translate:none;} } /* notebooks com a janela baixa (~650px): o texto de apoio do Ato IV cederia lugar aos controles */ @media (min-width:561px) and (max-height:660px) { #vl-film-native .vl-film-shot-camera .vl-film-copy>p:last-child{display:none;} } } /* janela muito baixa (ex.: 720p com a barra do navegador visível): linha de apoio dos Atos I e V cede lugar à ação */ @layer velora.overrides { @media (min-width:561px) and (max-height:620px) { #vl-film-native .vl-film-desvio .vl-film-copy>p:last-child,#vl-film-native .vl-film-final .vl-film-copy>p:last-child{display:none;} } } /* --- integração no site vNext --- */ @layer velora.overrides { /* faixas do marquee: antes eram style inline; ficam no CSS para respeitar CSP sem 'unsafe-inline' */ #vl-film-native .vl-film-marquee { --vl-marquee-duration: 38s; } #vl-film-native .vl-film-marquee-b { --vl-marquee-duration: 46s; --vl-marquee-direction: reverse; } /* saída do filme: o filme não tem cabeçalho nem rodapé, então os Bastidores levam de volta ao site */ #vl-film-native .vl-film-popover .vl-film-exit { display: inline-block; margin-inline-end: var(--vl-space-md); padding: var(--vl-space-md); color: var(--vl-color-accent); border: 1px solid var(--vl-color-accent); font: inherit; text-decoration: none; } #vl-film-native .vl-film-popover .vl-film-exit:hover, #vl-film-native .vl-film-popover .vl-film-exit:focus-visible { background: var(--vl-color-accent); color: var(--vl-bg-main); } /* o fundo da página também é cinema: sem faixa clara em overscroll */ html:has(#vl-film-native), body:has(#vl-film-native) { background: var(--vl-bg-main, #0a0a09); } } /* ===== bilingual (EN | PT-BR) ===== The slate text is generated by CSS, so it has an EN twin. PT-BR is the original rule above; EN applies unless (set by js/vnext-lang.js). ===== */ @layer velora.overrides { html:not([data-lang="pt"]) #vl-film-native .vl-film-slatetext::before{content:"PROLOGUE · VELORA CSS PRESENTS"} html:not([data-lang="pt"]) #vl-film-native:has(#film-scene-1:checked) .vl-film-slatetext::before{content:"ACT I · THE DETOUR"} html:not([data-lang="pt"]) #vl-film-native:has(#film-scene-2:checked) .vl-film-slatetext::before{content:"ACT II · THE RESISTANCE"} html:not([data-lang="pt"]) #vl-film-native:has(#film-scene-3:checked) .vl-film-slatetext::before{content:"ACT III · THE BREAK"} html:not([data-lang="pt"]) #vl-film-native:has(#film-scene-4:checked) .vl-film-slatetext::before{content:"ACT IV · THE IDENTITY"} html:not([data-lang="pt"]) #vl-film-native:has(#film-scene-5:checked) .vl-film-slatetext::before{content:"ACT V · FREEDOM"} /* language control: same language as the other top tools (outlined, muted, accent when active) */ #vl-film-native .vl-film-lang{display:flex;align-items:center;border:1px solid color-mix(in oklab,var(--vl-film-cream) 16%,transparent);} #vl-film-native .vl-film-lang input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none;} #vl-film-native .vl-film-lang label{display:grid;place-items:center;min-inline-size:2rem;block-size:2.75rem;padding-inline:.5rem;font:600 .7rem/1 var(--vl-font-family-mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--vl-text-muted);cursor:pointer;} #vl-film-native .vl-film-lang label:hover{color:var(--vl-color-accent);} #vl-film-native .vl-film-lang input:checked + label{background:var(--vl-color-accent);color:var(--vl-bg-main);} #vl-film-native .vl-film-lang input:focus-visible + label{outline:2px solid var(--vl-color-accent);outline-offset:2px;} /* very small phones (<=340px): the brand, language, sound and Backstage must share one row */ @media (max-width:340px){ #vl-film-native .vl-film-tools{inset-inline-end:calc(var(--vl-space-md) + 6.4rem);gap:.4rem;} #vl-film-native .vl-film-lang label{min-inline-size:1.55rem;block-size:2.4rem;padding-inline:.3rem;font-size:.66rem;} #vl-film-native .vl-film-mute{inline-size:2.4rem;block-size:2.4rem;} } }