/* ───────────────────────────────────────────────────── page-intro.css — Per-page cinematic intro overlay Add data-intro-variant="[name]" and data-intro-tagline="[text]" to . Overlay is injected and removed by page-intro.js. ───────────────────────────────────────────────────── */ /* ── Overlay shell ── */ .dvp-intro { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #000; pointer-events: none; /* never block page interaction, even if stuck */ /* default exit — overridden per variant below */ animation: dvpExitFade 600ms cubic-bezier(0.4, 0, 0.2, 1) 1500ms forwards; } /* ── Rule ── */ .dvp-intro-logo { width: min(148px, 36vw); height: auto; display: block; margin-bottom: 22px; opacity: 1; border-radius: 30px; filter: drop-shadow(0 0 24px rgba(255, 115, 56, 0.22)); animation: dvpIntroLogo 420ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both; } .dvp-intro-rule { width: 0; height: 1px; background: linear-gradient(90deg, #FF6B35, #ff2d78); animation: dvpIntroRule 500ms cubic-bezier(0.16, 1, 0.3, 1) 140ms forwards; } /* ── Tagline ── */ .dvp-intro-tagline { margin-top: 16px; color: rgba(185, 170, 145, 0.8); font-family: 'DM Mono', 'Courier New', monospace; font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0; animation: dvpIntroRise 480ms cubic-bezier(0.16, 1, 0.3, 1) 840ms forwards; } /* ── Entrance keyframes ── */ @keyframes dvpIntroLogo { from { transform: translateY(10px) scale(0.98); } to { transform: translateY(0) scale(1); } } @keyframes dvpIntroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes dvpIntroRule { from { width: 0; } to { width: 80px; } } /* ══════════════════════════════════════════════ EXIT VARIANTS Each variant overrides the default fade exit on the .dvp-intro element. ══════════════════════════════════════════════ */ /* 1 ── iris: cinematic iris close ── */ .dvp-intro[data-exit="iris"] { animation: dvpExitIris 780ms cubic-bezier(0.4, 0, 0.8, 1) 1540ms forwards; } @keyframes dvpExitIris { from { clip-path: circle(150% at 50% 50%); opacity: 1; } to { clip-path: circle(0% at 50% 50%); opacity: 0.2; visibility: hidden; } } /* 2 ── rise: slides up off screen ── */ .dvp-intro[data-exit="rise"] { animation: dvpExitRise 580ms cubic-bezier(0.4, 0, 0.6, 1) 1500ms forwards; } @keyframes dvpExitRise { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } } /* 3 ── wipe-right: slides off to the right ── */ .dvp-intro[data-exit="wipe-right"] { animation: dvpExitWipeR 580ms cubic-bezier(0.4, 0, 0.6, 1) 1500ms forwards; } @keyframes dvpExitWipeR { from { transform: translateX(0); } to { transform: translateX(100%); visibility: hidden; } } /* 4 ── wipe-left: slides off to the left ── */ .dvp-intro[data-exit="wipe-left"] { animation: dvpExitWipeL 580ms cubic-bezier(0.4, 0, 0.6, 1) 1500ms forwards; } @keyframes dvpExitWipeL { from { transform: translateX(0); } to { transform: translateX(-100%); visibility: hidden; } } /* 5 ── scale-down: collapses to the center ── */ .dvp-intro[data-exit="scale-down"] { animation: dvpExitScaleDown 620ms cubic-bezier(0.4, 0, 1, 1) 1520ms forwards; transform-origin: center center; } @keyframes dvpExitScaleDown { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(0.1); opacity: 0.6; } 100% { transform: scale(0); opacity: 0; visibility: hidden; } } /* 6 ── drop: falls downward ── */ .dvp-intro[data-exit="drop"] { animation: dvpExitDrop 580ms cubic-bezier(0.4, 0, 0.6, 1) 1500ms forwards; } @keyframes dvpExitDrop { from { transform: translateY(0); } to { transform: translateY(100%); visibility: hidden; } } /* 7 ── glitch: stutter flash then snap off ── Logo gets a glitch-entrance override too. */ .dvp-intro[data-exit="glitch"] { animation: dvpExitGlitch 700ms steps(1, end) 1450ms forwards; } @keyframes dvpIntroGlitch { 0% { opacity: 0; transform: none; filter: none; } 10% { opacity: 1; transform: translateX(-5px); filter: hue-rotate(90deg) brightness(2); } 20% { opacity: 0; transform: translateX(5px); filter: none; } 30% { opacity: 1; transform: translateX(0); filter: none; } 40% { opacity: 0; } 50% { opacity: 1; transform: translateX(-2px); filter: saturate(3); } 60% { opacity: 1; transform: none; filter: none; } 100% { opacity: 1; transform: none; filter: none; } } @keyframes dvpExitGlitch { 0% { opacity: 1; transform: none; } 12% { opacity: 0; transform: translateX(8px) skewX(-3deg); } 22% { opacity: 1; transform: translateX(-5px); } 34% { opacity: 0; } 44% { opacity: 1; transform: translateX(3px) skewX(2deg); } 56% { opacity: 0; } 68% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } } /* 8 ── fade: default simple fade ── */ @keyframes dvpExitFade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } /* 9 ── projector: film-leader countdown + gate pull-up ── */ .dvp-intro[data-exit="projector"] { background: #03060a; animation: dvpExitGatePull 640ms cubic-bezier(0.7, 0, 0.3, 1) 1900ms forwards; } @keyframes dvpExitGatePull { 0% { transform: translateY(0); } 18% { transform: translateY(-6%); } /* judder */ 28% { transform: translateY(-2%); } 52% { transform: translateY(-42%); } 62% { transform: translateY(-37%); } /* second judder */ 100% { transform: translateY(-100%); visibility: hidden; } } /* scrolling sprocket columns */ .dvp-proj-perf { position: absolute; top: -20%; height: 140%; width: 34px; background: repeating-linear-gradient(180deg, rgba(246,234,214,.14) 0 16px, transparent 16px 44px); animation: dvpProjScroll 0.5s linear infinite; opacity: .8; } .dvp-proj-perf.left { left: 18px; } .dvp-proj-perf.right { right: 18px; } @keyframes dvpProjScroll { from { background-position: 0 0; } to { background-position: 0 44px; } } /* projector grain / flicker */ .dvp-proj-grain { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 3px 3px; animation: dvpProjFlicker 0.12s steps(2) infinite; opacity: .5; } @keyframes dvpProjFlicker { 0% { opacity: .35; } 100% { opacity: .6; } } /* countdown numbers */ .dvp-proj-count { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; } .dvp-proj-count span { position: absolute; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 120px; color: #f6ead6; opacity: 0; text-shadow: 0 0 30px rgba(255,115,56,.4); } .dvp-proj-count .n3 { animation: dvpProjNum 500ms ease 200ms forwards; } .dvp-proj-count .n2 { animation: dvpProjNum 500ms ease 700ms forwards; } .dvp-proj-count .n1 { animation: dvpProjNum 500ms ease 1200ms forwards; } @keyframes dvpProjNum { 0% { opacity: 0; transform: scale(1.7); } 18% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } } /* rotating Academy sweep behind the numbers */ .dvp-proj-sweep { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(246,234,214,.25); background: conic-gradient(from 0deg, rgba(255,115,56,.25) 0deg 12deg, transparent 12deg 360deg); animation: dvpProjSweep 500ms linear 200ms 3; opacity: 0; } @keyframes dvpProjSweep { 0% { transform: rotate(0deg); opacity: 1; } 100% { transform: rotate(360deg); opacity: 1; } } /* reel-change cue dots, top-right */ .dvp-proj-cue { position: absolute; top: 7%; right: 8%; width: 26px; height: 26px; border-radius: 50%; background: rgba(246,234,214,.9); box-shadow: 0 0 18px rgba(255,255,255,.5); opacity: 0; animation: dvpProjCue 180ms steps(1) 1700ms 2; } @keyframes dvpProjCue { 0% { opacity: .9; } 60% { opacity: 0; } 100% { opacity: 0; } } .dvp-intro-tagline.proj { position: absolute; bottom: 12%; animation: dvpIntroRise 480ms cubic-bezier(0.16,1,0.3,1) 1400ms forwards; } /* ══════════════════════════════════════════════ FILM TRANSITION PACK — 10 additional variants Built in the same pure-CSS spirit as projector. Each composites a mechanical layer over the standard branded centerpiece (logo/rule/tagline). ══════════════════════════════════════════════ */ /* 10 ── shutter: hexagonal camera-shutter iris closes off the leader ── */ .dvp-intro[data-exit="shutter"] { animation: dvpExitShutter 760ms cubic-bezier(0.6, 0, 0.2, 1) 1480ms forwards; } @keyframes dvpExitShutter { 0% { clip-path: polygon(50% -50%, 150% 25%, 150% 75%, 50% 150%, -50% 75%, -50% 25%); } 100% { clip-path: polygon(50% 41%, 59% 47%, 59% 53%, 50% 59%, 41% 53%, 41% 47%); opacity: 0.12; visibility: hidden; } } .dvp-shutter { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(246,234,214,.05), transparent 60%); animation: dvpShutterTwist 760ms cubic-bezier(0.6, 0, 0.2, 1) 1480ms forwards; } .dvp-shutter i { position: absolute; left: 50%; top: 50%; width: 64%; height: 1px; background: linear-gradient(90deg, rgba(246,234,214,.22), transparent); transform-origin: 0 50%; } .dvp-shutter i:nth-child(1) { transform: rotate(0deg); } .dvp-shutter i:nth-child(2) { transform: rotate(60deg); } .dvp-shutter i:nth-child(3) { transform: rotate(120deg); } .dvp-shutter i:nth-child(4) { transform: rotate(180deg); } .dvp-shutter i:nth-child(5) { transform: rotate(240deg); } .dvp-shutter i:nth-child(6) { transform: rotate(300deg); } @keyframes dvpShutterTwist { to { transform: rotate(26deg); opacity: 0; } } /* 11 ── aperture: round blades stop down, settle, then open wide ── */ .dvp-intro[data-exit="aperture"] { animation: dvpExitAper 920ms cubic-bezier(0.45, 0, 0.2, 1) 1440ms forwards; } @keyframes dvpExitAper { 0% { clip-path: circle(150% at 50% 50%); } 30% { clip-path: circle(34% at 50% 50%); } /* stop down */ 46% { clip-path: circle(40% at 50% 50%); } /* settle */ 100% { clip-path: circle(0% at 50% 50%); opacity: 0.1; visibility: hidden; } } .dvp-aper { position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from -30deg at 50% 50%, rgba(255,255,255,.07) 0 60deg, transparent 60deg 120deg, rgba(255,255,255,.07) 120deg 180deg, transparent 180deg 240deg, rgba(255,255,255,.07) 240deg 300deg, transparent 300deg 360deg); animation: dvpAperSpin 920ms cubic-bezier(0.45, 0, 0.2, 1) 1440ms forwards; } .dvp-aper i { position: absolute; left: 50%; top: 50%; width: 70%; height: 1px; background: linear-gradient(90deg, rgba(246,234,214,.2), transparent); transform-origin: 0 50%; } .dvp-aper i:nth-child(1) { transform: rotate(15deg); } .dvp-aper i:nth-child(2) { transform: rotate(75deg); } .dvp-aper i:nth-child(3) { transform: rotate(135deg); } .dvp-aper i:nth-child(4) { transform: rotate(195deg); } .dvp-aper i:nth-child(5) { transform: rotate(255deg); } .dvp-aper i:nth-child(6) { transform: rotate(315deg); } @keyframes dvpAperSpin { 0% { transform: rotate(0deg); } 30% { transform: rotate(34deg); } 100% { transform: rotate(58deg); opacity: 0; } } /* 12 ── clapperboard: sticks clack shut, then the slate lifts away ── */ .dvp-intro[data-exit="clapperboard"] { background: #05080e; animation: dvpExitClap 620ms cubic-bezier(0.6, 0, 0.3, 1) 1560ms forwards; } @keyframes dvpExitClap { 0% { transform: translateY(0); } 14% { transform: translateY(1.5%); } /* settle from the clack */ 100% { transform: translateY(-104%); visibility: hidden; } } .dvp-clap { position: relative; width: min(360px, 80vw); } .dvp-clap-top { height: 40px; border-radius: 4px 4px 0 0; background: #0c1320; border: 1px solid rgba(246,234,214,.18); transform-origin: 0 100%; animation: dvpClapClack 440ms cubic-bezier(0.5, 0, 0.25, 1.4) 760ms both; } .dvp-clap-body { border: 1px solid rgba(246,234,214,.18); border-top: none; border-radius: 0 0 8px 8px; background: #0c1320; padding: 26px 20px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dvp-clap-stripes { display: block; height: 14px; width: 100%; background: repeating-linear-gradient(115deg, #f6ead6 0 18px, #0c1320 18px 36px); } .dvp-clap-stripes.bottom { margin-bottom: 18px; opacity: .85; } @keyframes dvpClapClack { 0% { transform: rotate(-26deg); } 68% { transform: rotate(4deg); } 100% { transform: rotate(0deg); } } /* 13 ── filmstrip: branded frame advances through the gate, strip clears ── */ .dvp-intro[data-exit="filmstrip"] { background: #03060a; animation: dvpExitStrip 640ms cubic-bezier(0.7, 0, 0.3, 1) 1620ms forwards; } @keyframes dvpExitStrip { 0% { transform: translateY(0); } 16% { transform: translateY(-3%); } /* film-advance judder */ 100% { transform: translateY(-104%); visibility: hidden; } } .dvp-strip { position: absolute; inset: 0; overflow: hidden; } .dvp-strip-perf { position: absolute; top: -20%; height: 140%; width: 30px; background: repeating-linear-gradient(180deg, rgba(246,234,214,.16) 0 14px, transparent 14px 40px); animation: dvpStripScroll 0.45s linear infinite; } .dvp-strip-perf.left { left: 16px; } .dvp-strip-perf.right { right: 16px; } @keyframes dvpStripScroll { from { background-position: 0 0; } to { background-position: 0 40px; } } .dvp-strip-frames { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; animation: dvpStripAdvance 620ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } .dvp-strip-frame { width: min(420px, 70vw); height: 30vh; border: 1px solid rgba(246,234,214,.12); border-radius: 6px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; align-items: center; justify-content: center; } .dvp-strip-frame.lit { background: rgba(255,115,56,.04); border-color: rgba(255,115,56,.18); } @keyframes dvpStripAdvance { 0% { transform: translateY(38%); } 78% { transform: translateY(-2%); } 100% { transform: translateY(0); } } /* 14 ── letterbox: bars close to a slot, hold, then open to reveal ── */ .dvp-intro[data-exit="letterbox"] { background: transparent; animation: dvpExitFade 480ms ease 1720ms forwards; } .dvp-bar { position: absolute; left: 0; width: 100%; height: 50%; background: #03060a; } .dvp-bar.top { top: 0; box-shadow: 0 1px 0 rgba(255,115,56,.3); animation: dvpBarTop 600ms cubic-bezier(0.7, 0, 0.2, 1) 1500ms forwards; } .dvp-bar.bottom { bottom: 0; box-shadow: 0 -1px 0 rgba(255,45,120,.3); animation: dvpBarBot 600ms cubic-bezier(0.7, 0, 0.2, 1) 1500ms forwards; } @keyframes dvpBarTop { to { transform: translateY(-100%); } } @keyframes dvpBarBot { to { transform: translateY(100%); } } /* 15 ── light-leak: analog flare washes across and overexposes out ── */ .dvp-intro[data-exit="light-leak"] { animation: dvpExitLeak 720ms ease-out 1500ms forwards; } @keyframes dvpExitLeak { 0% { opacity: 1; filter: brightness(1); } 28% { filter: brightness(2.3); } 100% { opacity: 0; filter: brightness(1.5); visibility: hidden; } } .dvp-leak { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(42% 60% at 22% 50%, rgba(255,150,60,.92), rgba(255,45,120,.5) 42%, transparent 72%); animation: dvpLeakSweep 1700ms ease-in-out 200ms forwards; } @keyframes dvpLeakSweep { 0% { transform: translateX(-45%) scale(0.8); opacity: 0; } 30% { opacity: 0.9; } 62% { transform: translateX(28%) scale(1.3); opacity: 1; } 100% { transform: translateX(82%) scale(1.6); opacity: 0; } } /* 16 ── focus-pull: leader racks in from blur, then racks off the page ── */ .dvp-intro[data-exit="focus-pull"] { animation: dvpExitFocus 880ms cubic-bezier(0.5, 0, 0.2, 1) 1420ms forwards; } @keyframes dvpExitFocus { 0% { filter: blur(0); opacity: 1; } 40% { filter: blur(14px); } 100% { filter: blur(28px); opacity: 0; visibility: hidden; } } .dvp-intro[data-exit="focus-pull"] .dvp-intro-logo { animation: dvpFocusIn 720ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; } @keyframes dvpFocusIn { from { filter: blur(20px); opacity: 0; transform: scale(1.06); } to { filter: blur(0); opacity: 1; transform: scale(1); } } /* 17 ── vhs-track: tracking roll + chroma tear, locks, then snaps off ── */ .dvp-intro[data-exit="vhs-track"] { animation: dvpExitVhs 720ms steps(1, end) 1480ms forwards; } @keyframes dvpExitVhs { 0% { opacity: 1; transform: none; } 18% { transform: translateX(7px) skewX(4deg); filter: saturate(2.4); } 34% { transform: translateX(-9px); } 52% { transform: none; filter: none; } 64% { opacity: 0.4; } 100% { opacity: 0; visibility: hidden; } } .dvp-vhs-lines { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .55; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px); } .dvp-vhs-roll { position: absolute; left: 0; top: -16%; width: 100%; height: 16%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); animation: dvpVhsRoll 820ms linear 0s 2; } @keyframes dvpVhsRoll { from { transform: translateY(0); } to { transform: translateY(760%); } } .dvp-intro[data-exit="vhs-track"] .dvp-intro-logo { animation: dvpVhsJitter 520ms steps(2) 80ms both; } @keyframes dvpVhsJitter { 0% { opacity: 0; transform: translateX(-4px); filter: drop-shadow(3px 0 rgba(255,45,120,.7)) drop-shadow(-3px 0 rgba(60,200,255,.6)); } 40% { opacity: 1; transform: translateX(3px); } 70% { transform: translateX(-1px); filter: none; } 100% { opacity: 1; transform: none; filter: none; } } /* 18 ── reel-flap: tail flap whips past, white flash, burn-through reveal ── */ .dvp-intro[data-exit="reel-flap"] { animation: dvpExitBurn 820ms cubic-bezier(0.6, 0, 0.4, 1) 1640ms forwards; } @keyframes dvpExitBurn { 0% { clip-path: circle(150% at 50% 45%); opacity: 1; } 55% { opacity: 1; } 100% { clip-path: circle(0% at 50% 45%); opacity: 0.2; visibility: hidden; } } .dvp-flap { position: absolute; top: -20%; left: -30%; width: 56%; height: 140%; pointer-events: none; transform: rotate(8deg); background: repeating-linear-gradient(90deg, rgba(246,234,214,.16) 0 18px, rgba(0,0,0,.4) 18px 22px); opacity: 0; animation: dvpFlapSweep 620ms ease-in 1080ms forwards; } @keyframes dvpFlapSweep { 0% { transform: translateX(0) rotate(8deg); opacity: 0; } 22% { opacity: 0.85; } 100% { transform: translateX(230%) rotate(8deg); opacity: 0; } } .dvp-flap-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: dvpFlapFlash 360ms ease-out 1640ms forwards; } @keyframes dvpFlapFlash { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } } /* 19 ── countdown-flash: single Academy number punch + frame flash ── */ .dvp-intro[data-exit="countdown-flash"] { background: #03060a; animation: dvpExitFade 420ms ease 1640ms forwards; } .dvp-cf-ring { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(246,234,214,.25); background: conic-gradient(from 0deg, rgba(255,115,56,.3) 0 14deg, transparent 14deg 360deg); animation: dvpCfRing 1300ms linear 200ms forwards; } @keyframes dvpCfRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .dvp-cf-num { position: relative; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 160px; color: #f6ead6; text-shadow: 0 0 30px rgba(255,115,56,.4); animation: dvpCfNum 1300ms ease 200ms forwards; } @keyframes dvpCfNum { 0% { opacity: 0; transform: scale(1.8); } 14% { opacity: 1; transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } } .dvp-cf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: dvpCfFlash 300ms ease-out 1500ms forwards; } @keyframes dvpCfFlash { 0% { opacity: 0; } 40% { opacity: 0.95; } 100% { opacity: 0; } } .dvp-intro-tagline.cf { position: absolute; bottom: 14%; animation: dvpIntroRise 480ms cubic-bezier(0.16, 1, 0.3, 1) 700ms forwards; } /* ══════════════════════════════════════════════ TOOL-THEMED SIGNATURES — one bespoke intro per page. Each matches what the tool does. Same pure-CSS system; mechanical layers over the brand centerpiece. ══════════════════════════════════════════════ */ /* 20 ── anamorphic: horizontal lens-flare streak (homepage) ── */ .dvp-intro[data-exit="anamorphic"] { animation: dvpExitLeak 700ms ease-out 1560ms forwards; } .dvp-ana { position: absolute; left: 0; right: 0; top: 50%; height: 3px; pointer-events: none; transform: translateY(-50%) scaleX(0); transform-origin: 50% 50%; background: linear-gradient(90deg, transparent 6%, rgba(120,180,255,.9) 34%, #fff 50%, rgba(255,120,180,.9) 66%, transparent 94%); box-shadow: 0 0 24px rgba(140,190,255,.7), 0 0 60px rgba(255,120,180,.35); animation: dvpAnaStreak 1500ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards; } @keyframes dvpAnaStreak { 0% { transform: translateY(-50%) scaleX(0); opacity: 0; } 25% { opacity: 1; } 55% { transform: translateY(-50%) scaleX(1); opacity: 1; } 100% { transform: translateY(-50%) scaleX(1); opacity: 0.55; } } /* 21 ── toolkit: tool tiles snap into a grid (6-tool suite) ── */ .dvp-intro[data-exit="toolkit"] { animation: dvpExitScaleDown 600ms cubic-bezier(0.4, 0, 1, 1) 1620ms forwards; } .dvp-tk { position: absolute; inset: 0; display: grid; pointer-events: none; grid-template-columns: repeat(3, 92px); grid-auto-rows: 92px; gap: 16px; place-content: center; } .dvp-tk i { border: 1px solid rgba(255,115,56,.28); border-radius: 12px; background: rgba(255,115,56,.05); opacity: 0; transform: scale(0.4); } .dvp-tk i:nth-child(1) { animation: dvpTkIn 360ms cubic-bezier(0.16,1,0.3,1) 120ms both; } .dvp-tk i:nth-child(2) { animation: dvpTkIn 360ms cubic-bezier(0.16,1,0.3,1) 200ms both; } .dvp-tk i:nth-child(3) { animation: dvpTkIn 360ms cubic-bezier(0.16,1,0.3,1) 280ms both; } .dvp-tk i:nth-child(4) { animation: dvpTkIn 360ms cubic-bezier(0.16,1,0.3,1) 360ms both; } .dvp-tk i:nth-child(5) { animation: dvpTkIn 360ms cubic-bezier(0.16,1,0.3,1) 440ms both; } .dvp-tk i:nth-child(6) { animation: dvpTkIn 360ms cubic-bezier(0.16,1,0.3,1) 520ms both; } @keyframes dvpTkIn { to { opacity: 1; transform: scale(1); } } /* 22 ── pipeline: five nodes connect L→R (5-step workflow) ── */ .dvp-intro[data-exit="pipeline"] { animation: dvpExitWipeR 600ms cubic-bezier(0.4, 0, 0.6, 1) 1620ms forwards; } .dvp-pl { position: absolute; left: 50%; top: 63%; transform: translateX(-50%); width: min(360px, 70vw); height: 16px; pointer-events: none; display: flex; align-items: center; justify-content: space-between; } .dvp-pl-line { position: absolute; left: 0; top: 50%; height: 2px; width: 0; transform: translateY(-50%); background: linear-gradient(90deg, #ff7338, #ff2d78); animation: dvpPlLine 900ms ease 300ms forwards; } @keyframes dvpPlLine { to { width: 100%; } } .dvp-pl i { width: 12px; height: 12px; border-radius: 50%; background: #0b1523; border: 1px solid rgba(255,115,56,.5); opacity: .3; z-index: 1; } .dvp-pl i:nth-child(2) { animation: dvpPlNode 240ms ease 350ms forwards; } .dvp-pl i:nth-child(3) { animation: dvpPlNode 240ms ease 500ms forwards; } .dvp-pl i:nth-child(4) { animation: dvpPlNode 240ms ease 650ms forwards; } .dvp-pl i:nth-child(5) { animation: dvpPlNode 240ms ease 800ms forwards; } .dvp-pl i:nth-child(6) { animation: dvpPlNode 240ms ease 950ms forwards; } @keyframes dvpPlNode { to { opacity: 1; background: #ff7338; box-shadow: 0 0 12px rgba(255,115,56,.7); } } /* 23 ── color-grade: RGB split converges under a LUT wash (CineGrade) ── */ .dvp-intro[data-exit="color-grade"] { animation: dvpExitWipeR 640ms cubic-bezier(0.5, 0, 0.5, 1) 1560ms forwards; } .dvp-cg { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(110deg, rgba(0,160,190,.4) 0%, transparent 38%, transparent 62%, rgba(255,140,60,.42) 100%); animation: dvpCgWash 1500ms ease-in-out 200ms forwards; } @keyframes dvpCgWash { 0% { opacity: 0; transform: translateX(-12%); } 40% { opacity: 1; } 100% { opacity: 0.9; transform: translateX(0); } } .dvp-intro[data-exit="color-grade"] .dvp-intro-logo { animation: dvpCgSplit 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } @keyframes dvpCgSplit { 0% { opacity: 0; filter: drop-shadow(6px 0 rgba(255,60,60,.8)) drop-shadow(-6px 0 rgba(60,140,255,.8)); } 60% { opacity: 1; } 100% { opacity: 1; filter: none; } } /* 24 ── waveform: audio bars pulse then collapse (CineFoley) ── */ .dvp-intro[data-exit="waveform"] { animation: dvpExitFade 600ms ease 1620ms forwards; } .dvp-wf { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; height: 60px; pointer-events: none; } .dvp-wf i { width: 5px; height: 8px; border-radius: 3px; transform-origin: center; background: linear-gradient(180deg, #ff7338, #ff2d78); animation: dvpWf 820ms ease-in-out infinite; } .dvp-wf i:nth-child(1) { animation-delay: .00s; } .dvp-wf i:nth-child(2) { animation-delay: .09s; } .dvp-wf i:nth-child(3) { animation-delay: .18s; } .dvp-wf i:nth-child(4) { animation-delay: .05s; } .dvp-wf i:nth-child(5) { animation-delay: .14s; } .dvp-wf i:nth-child(6) { animation-delay: .22s; } .dvp-wf i:nth-child(7) { animation-delay: .07s; } .dvp-wf i:nth-child(8) { animation-delay: .16s; } .dvp-wf i:nth-child(9) { animation-delay: .11s; } .dvp-wf i:nth-child(10){ animation-delay: .03s; } @keyframes dvpWf { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(5); } } .dvp-intro[data-exit="waveform"] .dvp-wf { animation: dvpWfCollapse 340ms ease 1560ms forwards; } @keyframes dvpWfCollapse { to { transform: translateX(-50%) scaleY(.04); opacity: 0; } } /* 25 ── subtitle-type: caption line types in (CineScribe) ── */ .dvp-intro[data-exit="subtitle-type"] { animation: dvpExitFade 520ms ease 1640ms forwards; } .dvp-sub { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); background: rgba(0,0,0,.55); border-radius: 6px; padding: 8px 14px; display: flex; align-items: center; pointer-events: none; } .dvp-sub span { display: block; height: 11px; width: 0; border-radius: 2px; background: rgba(246,234,214,.92); animation: dvpSubType 1100ms steps(24) 500ms forwards; } @keyframes dvpSubType { to { width: 220px; } } .dvp-sub::after { content: ''; width: 2px; height: 14px; margin-left: 4px; background: #ff7338; animation: dvpCaretBlink .5s steps(1) infinite; } @keyframes dvpCaretBlink { 50% { opacity: 0; } } /* 26 ── upscale: pixel grid resolves, leader deblurs (AI Upscaler) ── */ .dvp-intro[data-exit="upscale"] { animation: dvpExitFade 520ms ease 1620ms forwards; } .dvp-px { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; animation: dvpPx 1000ms cubic-bezier(0.7, 0, 0.3, 1) 200ms forwards; } @keyframes dvpPx { 0% { background-size: 28px 28px; opacity: .6; } 100% { background-size: 4px 4px; opacity: 0; } } .dvp-intro[data-exit="upscale"] .dvp-intro-logo { animation: dvpUpscaleIn 1000ms cubic-bezier(0.7, 0, 0.3, 1) 120ms both; } @keyframes dvpUpscaleIn { 0% { filter: blur(10px) contrast(1.6); transform: scale(1.04); } 100% { filter: none; transform: scale(1); } } /* 27 ── matrix-scan: scanline grid sweep (Model Evaluation) ── */ .dvp-intro[data-exit="matrix-scan"] { animation: dvpExitFade 520ms ease 1640ms forwards; } .dvp-ms-grid { position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: linear-gradient(rgba(120,200,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120,200,255,.08) 1px, transparent 1px); background-size: 40px 40px; } .dvp-ms-scan { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(120,200,255,.25), rgba(120,200,255,.5), transparent); box-shadow: 0 0 24px rgba(120,200,255,.4); animation: dvpMsScan 1300ms cubic-bezier(0.5, 0, 0.5, 1) 200ms forwards; } @keyframes dvpMsScan { 0% { transform: translateY(-120px); } 100% { transform: translateY(100vh); } } /* 28 ── register: registration marks converge & lock (Consistency Keeper) ── */ .dvp-intro[data-exit="register"] { animation: dvpExitScaleDown 560ms cubic-bezier(0.4, 0, 1, 1) 1620ms forwards; } .dvp-reg { position: absolute; inset: 0; pointer-events: none; } .dvp-reg i { position: absolute; width: 26px; height: 26px; opacity: 0; background: linear-gradient(#ff7338, #ff7338) center / 2px 100% no-repeat, linear-gradient(#ff7338, #ff7338) center / 100% 2px no-repeat; } .dvp-reg i:nth-child(1) { top: 31%; left: 35%; animation: dvpRegTL 700ms cubic-bezier(0.16,1,0.3,1) 200ms forwards; } .dvp-reg i:nth-child(2) { top: 31%; right: 35%; animation: dvpRegTR 700ms cubic-bezier(0.16,1,0.3,1) 280ms forwards; } .dvp-reg i:nth-child(3) { bottom: 31%; left: 35%; animation: dvpRegBL 700ms cubic-bezier(0.16,1,0.3,1) 360ms forwards; } .dvp-reg i:nth-child(4) { bottom: 31%; right: 35%; animation: dvpRegBR 700ms cubic-bezier(0.16,1,0.3,1) 440ms forwards; } @keyframes dvpRegTL { 0% { opacity: 0; transform: translate(-30px,-30px); } 60% { opacity: 1; } 100% { opacity: .9; transform: none; } } @keyframes dvpRegTR { 0% { opacity: 0; transform: translate(30px,-30px); } 60% { opacity: 1; } 100% { opacity: .9; transform: none; } } @keyframes dvpRegBL { 0% { opacity: 0; transform: translate(-30px,30px); } 60% { opacity: 1; } 100% { opacity: .9; transform: none; } } @keyframes dvpRegBR { 0% { opacity: 0; transform: translate(30px,30px); } 60% { opacity: 1; } 100% { opacity: .9; transform: none; } } .dvp-intro[data-exit="register"] .dvp-intro-logo { animation: dvpRegLock 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; } @keyframes dvpRegLock { 0% { opacity: 0; filter: drop-shadow(8px 8px 0 rgba(255,45,120,.5)) drop-shadow(-8px -8px 0 rgba(60,160,255,.5)); } 70% { opacity: 1; } 100% { opacity: 1; filter: drop-shadow(0 0 24px rgba(255,115,56,.22)); } } /* 29 ── montage-cut: rapid hard-cut frames (Campaign Engine) ── */ .dvp-intro[data-exit="montage-cut"] { animation: dvpExitFade 480ms ease 1640ms forwards; } .dvp-mc { position: absolute; inset: 0; pointer-events: none; } .dvp-mc i { position: absolute; inset: 0; opacity: 0; } .dvp-mc i:nth-child(1) { background: linear-gradient(135deg, rgba(255,115,56,.20), transparent 60%); animation: dvpMc1 1200ms steps(1) forwards; } .dvp-mc i:nth-child(2) { background: linear-gradient(225deg, rgba(255,45,120,.20), transparent 60%); animation: dvpMc2 1200ms steps(1) forwards; } .dvp-mc i:nth-child(3) { background: linear-gradient(45deg, rgba(120,200,255,.16), transparent 60%); animation: dvpMc3 1200ms steps(1) forwards; } @keyframes dvpMc1 { 0% { opacity: 1; } 12% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } @keyframes dvpMc2 { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: 0; } 52% { opacity: 1; } 62% { opacity: 0; } 100% { opacity: 0; } } @keyframes dvpMc3 { 0% { opacity: 0; } 22% { opacity: 1; } 30% { opacity: 0; } 64% { opacity: 1; } 74% { opacity: 0; } 100% { opacity: 0; } } /* 30 ── vault-open: combination dial spins then seals (DVP Vault) ── */ .dvp-intro[data-exit="vault-open"] { animation: dvpExitIris 760ms cubic-bezier(0.4, 0, 0.8, 1) 1640ms forwards; } .dvp-vault { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .dvp-vault-dial { width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(246,234,214,.18); background: repeating-conic-gradient(from 0deg, rgba(246,234,214,.22) 0 2deg, transparent 2deg 30deg); animation: dvpVaultSpin 1500ms cubic-bezier(0.5, 0, 0.2, 1) 150ms forwards; } @keyframes dvpVaultSpin { 0% { transform: rotate(0deg); } 55% { transform: rotate(220deg); } 80% { transform: rotate(180deg); } 100% { transform: rotate(200deg); } } /* 31 ── json-build: code block types itself line by line (JSON Prompt) ── */ .dvp-intro[data-exit="json-build"] { background: #05080e; animation: dvpExitFade 460ms ease 1660ms forwards; } .dvp-json { position: relative; text-align: left; font-family: 'JetBrains Mono', 'DM Mono', monospace; font-size: 15px; line-height: 1.7; color: #cfe3ff; } .dvp-json span { display: block; opacity: 0; white-space: pre; } .dvp-json .l1 { color: #ff7338; animation: dvpJsonLine 200ms ease 300ms forwards; } .dvp-json .l2 { padding-left: 18px; animation: dvpJsonLine 200ms ease 560ms forwards; } .dvp-json .l3 { padding-left: 18px; animation: dvpJsonLine 200ms ease 820ms forwards; } .dvp-json .l4 { padding-left: 18px; animation: dvpJsonLine 200ms ease 1080ms forwards; } .dvp-json .l5 { color: #ff7338; animation: dvpJsonLine 200ms ease 1300ms forwards; } @keyframes dvpJsonLine { from { opacity: 0; } to { opacity: 1; } } .dvp-json-caret { display: inline-block; width: 8px; height: 16px; margin-top: 4px; background: #ff7338; animation: dvpCaretBlink .5s steps(1) infinite; } /* 32 ── metronome: beat dots pulse in rhythm (TempoKey) ── */ .dvp-intro[data-exit="metronome"] { animation: dvpExitFade 420ms ease 1620ms forwards; } .dvp-met { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); display: flex; gap: 16px; pointer-events: none; } .dvp-met i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,234,214,.25); } .dvp-met i:nth-child(1) { animation: dvpMet .6s steps(1) 200ms infinite; } .dvp-met i:nth-child(2) { animation: dvpMet .6s steps(1) 350ms infinite; } .dvp-met i:nth-child(3) { animation: dvpMet .6s steps(1) 500ms infinite; } .dvp-met i:nth-child(4) { animation: dvpMet .6s steps(1) 650ms infinite; } @keyframes dvpMet { 0% { background: #ff7338; box-shadow: 0 0 14px rgba(255,115,56,.8); transform: scale(1.4); } 30%, 100% { background: rgba(246,234,214,.25); box-shadow: none; transform: scale(1); } } /* 33 ── route-line: dashed route across a map grid (CineRoute) ── */ .dvp-intro[data-exit="route-line"] { animation: dvpExitWipeL 600ms cubic-bezier(0.4, 0, 0.6, 1) 1600ms forwards; } .dvp-rt { position: absolute; inset: 0; pointer-events: none; } .dvp-rt-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(120,200,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120,200,255,.08) 1px, transparent 1px); background-size: 46px 46px; } .dvp-rt-line { position: absolute; left: 16%; top: 58%; width: 0; border-top: 2px dashed #ff7338; animation: dvpRtLine 1200ms cubic-bezier(0.5, 0, 0.2, 1) 300ms forwards; } @keyframes dvpRtLine { to { width: 68%; } } .dvp-rt-pin { position: absolute; top: 54%; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ff2d78; box-shadow: 0 0 12px rgba(255,45,120,.7); opacity: 0; } .dvp-rt-pin.a { left: 16%; animation: dvpRtPin 200ms ease 300ms forwards; } .dvp-rt-pin.b { left: 82%; animation: dvpRtPin 200ms ease 1450ms forwards; } @keyframes dvpRtPin { to { opacity: 1; } } /* 34 ── splice: diagonal film splice wipe (Dailies posts) ── */ .dvp-intro[data-exit="splice"] { animation: dvpExitSplice 660ms cubic-bezier(0.7, 0, 0.3, 1) 1560ms forwards; } @keyframes dvpExitSplice { 0% { clip-path: polygon(-30% 0, 130% 0, 130% 100%, -30% 100%); } 100% { clip-path: polygon(130% 0, 170% 0, 130% 100%, 90% 100%); visibility: hidden; } } .dvp-splice { position: absolute; top: -20%; left: -20%; width: 26%; height: 140%; pointer-events: none; transform: rotate(12deg); filter: blur(2px); opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: dvpSpliceLine 700ms ease-in 1280ms forwards; } @keyframes dvpSpliceLine { 0% { transform: translateX(0) rotate(12deg); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateX(420%) rotate(12deg); opacity: 0; } } /* 35 ── strobe: beat-synced strobe cuts (CineBeat) ── */ .dvp-intro[data-exit="strobe"] { animation: dvpExitFade 360ms ease 1700ms forwards; } .dvp-strobe { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: dvpStrobe 1500ms steps(1) 200ms forwards; } @keyframes dvpStrobe { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: 0; } 24% { opacity: 0; } 28% { opacity: .85; } 32% { opacity: 0; } 46% { opacity: 0; } 50% { opacity: .9; } 54% { opacity: 0; } 70% { opacity: 0; } 74% { opacity: .95; } 78% { opacity: 0; } 92% { opacity: 0; } 96% { opacity: .9; } 100% { opacity: 0; } } /* 36 ── dossier: a casting profile card assembles + stamp (Character Sheet) ── */ .dvp-intro[data-exit="dossier"] { background: #05080e; animation: dvpExitRise 600ms cubic-bezier(0.5, 0, 0.3, 1) 1740ms forwards; } .dvp-dossier-card { position: relative; width: min(360px, 82vw); padding: 20px 22px 26px; overflow: hidden; background: linear-gradient(180deg, rgba(12,19,32,.96), rgba(8,13,22,.96)); border: 1px solid rgba(255,115,56,.22); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02); opacity: 0; transform: translateY(14px) scale(0.96); animation: dvpDossierIn 460ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; } @keyframes dvpDossierIn { to { opacity: 1; transform: translateY(0) scale(1); } } .dvp-dossier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .dvp-dossier-head span { width: 24px; height: 1px; background: linear-gradient(90deg, #ff7338, #ff2d78); } .dvp-dossier-head b { font-family: 'DM Mono', 'Courier New', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(185,170,145,.85); } .dvp-dossier-row { display: flex; align-items: center; gap: 16px; } .dvp-dossier-photo { position: relative; width: 74px; height: 74px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(246,234,214,.16); background: #000; } .dvp-dossier-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: dvpDossierPhoto 600ms ease 260ms forwards; } @keyframes dvpDossierPhoto { from { opacity: 0; filter: grayscale(1) blur(6px); } to { opacity: 1; filter: grayscale(0) blur(0); } } .dvp-dossier-photo::before, .dvp-dossier-photo::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid #ff7338; } .dvp-dossier-photo::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; } .dvp-dossier-photo::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; } .dvp-dossier-fields { flex: 1; display: flex; flex-direction: column; gap: 11px; } .dvp-dossier-fields i { display: block; height: 8px; width: 0; border-radius: 3px; background: rgba(246,234,214,.18); } .dvp-dossier-fields .f1 { background: linear-gradient(90deg, #ff7338, #ff2d78); animation: dvpDossierFill 360ms ease 420ms forwards; } .dvp-dossier-fields .f2 { max-width: 85%; animation: dvpDossierFill 360ms ease 600ms forwards; } .dvp-dossier-fields .f3 { max-width: 70%; animation: dvpDossierFill 360ms ease 780ms forwards; } .dvp-dossier-fields .f4 { max-width: 55%; animation: dvpDossierFill 360ms ease 960ms forwards; } @keyframes dvpDossierFill { to { width: 100%; } } .dvp-dossier-stamp { position: absolute; right: 20px; bottom: 18px; opacity: 0; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.1em; color: #ff2d78; border: 2px solid #ff2d78; border-radius: 6px; padding: 2px 10px; text-shadow: 0 0 12px rgba(255,45,120,.4); transform: rotate(-12deg) scale(2.4); animation: dvpDossierStamp 380ms cubic-bezier(0.5, 0, 0.3, 1.2) 1240ms forwards; } @keyframes dvpDossierStamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 60% { opacity: 1; transform: rotate(-12deg) scale(0.92); } 78% { transform: rotate(-12deg) scale(1.05); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } } /* ── Reduced motion: skip everything instantly ── */ @media (prefers-reduced-motion: reduce) { .dvp-intro, .dvp-intro * { animation-duration: 1ms !important; animation-delay: 0ms !important; } }