.pattern-preview.film-preview{position:relative;display:grid;grid-template-columns:1fr;align-content:stretch;grid-gap:10px;gap:10px;padding:14px;height:180px;overflow:hidden;isolation:isolate}.film-badge{position:absolute;top:8px;right:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.film-stage{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px;border:1px solid rgba(248,250,252,.06);isolation:isolate}.film-scene,.film-tinted{position:absolute;inset:0}.film-scene{background:radial-gradient(ellipse 60% 80% at 22% 32%,var(--film-blob-a,rgba(244,114,182,.55)),transparent 55%),radial-gradient(ellipse 60% 80% at 78% 68%,var(--film-blob-b,rgba(251,191,36,.45)),transparent 60%),linear-gradient(135deg,var(--film-base-a,#1a0820) 0,var(--film-base-b,#0a0418) 60%,var(--film-base-c,#1a1206) 100%)}.film-grain{inset:-4%;width:108%;height:108%;mix-blend-mode:overlay;opacity:var(--film-grain-opacity,.85)}.film-grain,.film-vignette{position:absolute;pointer-events:none}.film-vignette{inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,var(--film-vignette-strength,.55)) 100%)}.film-chip{position:absolute;bottom:12px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.85);color:#fef9c3;font-size:10px;font-weight:800;letter-spacing:.18em;border:1px solid rgba(248,250,252,.08)}.film-chip-dot{width:6px;height:6px;border-radius:50%;background:#f43f5e;box-shadow:0 0 8px rgba(244,63,94,.7);animation:filmChipBlink 1.4s ease-in-out infinite}@keyframes filmChipBlink{0%,to{opacity:1}50%{opacity:.35}}.film-preview--motion-grain .film-grain{animation:filmGrainShift var(--film-duration) steps(4) infinite}@keyframes filmGrainShift{0%,to{transform:translate(0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,1%)}}.film-preview--motion-vignette .film-vignette{animation:filmVignettePulse var(--film-duration) ease-in-out infinite}@keyframes filmVignettePulse{0%,to{opacity:.6}50%{opacity:1}}.film-preview--motion-mood .film-tinted{animation:filmMoodCycle var(--film-duration) linear infinite}@keyframes filmMoodCycle{0%,to{filter:hue-rotate(0deg)}33%{filter:hue-rotate(30deg)}66%{filter:hue-rotate(-10deg)}}@media (prefers-reduced-motion:reduce){.film-chip-dot,.film-grain,.film-tinted,.film-vignette{animation:none!important}.film-vignette{opacity:1}.film-tinted{filter:hue-rotate(0deg)}}