/* dznir looks: Color grading themes (film grade, grain, vignette, light leak) and Video themes (a looping clip
   behind the page, public/themes/*.mp4), plus a creator's own background clip. Loaded after themes.css. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); }

/* ---------- Shared film layers ---------- */
.vibe--grade .bg { overflow: hidden; }
.gr-base { inset: 0; }
.gr-grain { inset: -50%; background: var(--grain); opacity: var(--grain-o, 0.35); mix-blend-mode: overlay; animation: gr-grain 0.8s steps(4) infinite; }
.gr-vignette { inset: 0; background: radial-gradient(120% 85% at 50% 45%, transparent 55%, rgba(0, 0, 0, var(--vig, 0.45))); }
.gr-leak { width: 220px; height: 220px; border-radius: 50%; background: var(--leak, #FF8A3D); filter: blur(40px); opacity: 0.45; mix-blend-mode: screen; animation: gr-leak 12s ease-in-out infinite alternate; }
.vibe--grade .mini__name { letter-spacing: -0.01em; }
.vibe--grade .mini__link { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes gr-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(2%, 5%); } }
@keyframes gr-leak { from { transform: translate(-90px, -60px); } to { transform: translate(160px, 340px); } }

/* Teal & Orange: the blockbuster grade */
.vibe--teal-orange .mini { --bg: #0E3B43; --fg: #FFF4E8; --mut: #F6C9A4; --btn: #F08A4B; --btnfg: #10252A; --rad: 12px; --hl: #FFB27A; --font: 'DM Sans', var(--sans); --leak: #FF8A3D; }
.vibe--teal-orange .gr-base { background: linear-gradient(160deg, #0B2F36 0%, #145A64 45%, #B8643A 100%); }
.vibe--teal-orange .mini__name { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 20px; }
.vibe--teal-orange .mini__link { background: color-mix(in srgb, #F08A4B 92%, transparent); border-color: #F7A36D; }
/* Warm Film: golden-hour stock */
.vibe--warm-film .mini { --bg: #3B2416; --fg: #FFF3DC; --mut: #F1D3A1; --btn: #FFF3DC; --btnfg: #5A2E14; --rad: 6px; --hl: #F2C14E; --font: 'DM Sans', var(--sans); --leak: #FFB23D; --vig: 0.55; }
.vibe--warm-film .gr-base { background: linear-gradient(180deg, #E0A04A 0%, #9C4F22 50%, #3B2416 100%); filter: saturate(0.85) sepia(0.15); }
.vibe--warm-film .mini__name { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 20px; }
/* Noir: black and white, heavy grain, a flickering projector */
.vibe--noir .mini { --bg: #0D0D0D; --fg: #F2F2F2; --mut: #A6A6A6; --btn: transparent; --btnfg: #F2F2F2; --rad: 2px; --hl: #FFFFFF; --font: 'DM Sans', var(--sans); --leak: #FFFFFF; --grain-o: 0.6; --vig: 0.7; }
.vibe--noir .gr-base { background: radial-gradient(90% 60% at 50% 30%, #3A3A3A, #0D0D0D 70%); animation: gr-flicker 3s steps(12) infinite; }
.vibe--noir .gr-leak { opacity: 0.12; }
.vibe--noir .mini__name { font-family: 'Cinzel', serif; font-weight: 900; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.vibe--noir .mini__link { border-color: rgba(242, 242, 242, 0.7); }
.vibe--noir .mini__link--hl { background: #F2F2F2; color: #0D0D0D; }
.vibe--noir .mini__avatar.has-img { background: #F2F2F2; }
@keyframes gr-flicker { 0%, 100% { opacity: 1; } 40% { opacity: 0.92; } 42% { opacity: 1; } 70% { opacity: 0.95; } }
/* Faded Pastel: lifted blacks, soft and dreamy */
.vibe--faded-pastel .mini { --bg: #EADFF0; --fg: #4A3F58; --mut: #665A75; --btn: rgba(255, 255, 255, 0.7); --btnfg: #4A3F58; --rad: 999px; --hl: #F4A7B9; --font: 'Nunito', var(--sans); --leak: #FFD6E0; --grain-o: 0.25; --vig: 0.12; }
.vibe--faded-pastel .gr-base { background: linear-gradient(170deg, #F6D9E4 0%, #E4DDF4 45%, #CFE9E4 100%); }
.vibe--faded-pastel .mini__name { font-weight: 800; font-size: 18px; }
.vibe--faded-pastel .mini__link { border-color: rgba(255, 255, 255, 0.9); font-weight: 700; }
/* Neon Night: city rain, magenta and cyan */
.vibe--neon-night .mini { --bg: #0A0F2C; --fg: #F4F0FF; --mut: #B7B0E0; --btn: rgba(255, 46, 147, 0.14); --btnfg: #FFD1EA; --rad: 10px; --hl: #00E5FF; --font: 'DM Sans', var(--sans); --leak: #FF2E93; --vig: 0.6; }
.vibe--neon-night .gr-base { background: radial-gradient(80% 50% at 15% 85%, rgba(0, 229, 255, 0.35), transparent 70%), radial-gradient(70% 45% at 90% 20%, rgba(255, 46, 147, 0.4), transparent 70%), #0A0F2C; }
.vibe--neon-night .mini__name { font-family: 'Audiowide', var(--sans); font-size: 18px; text-shadow: 0 0 10px rgba(255, 46, 147, 0.8); }
.vibe--neon-night .mini__link { border-color: #FF2E93; box-shadow: 0 0 12px rgba(255, 46, 147, 0.35), inset 0 0 8px rgba(255, 46, 147, 0.25); }
.vibe--neon-night .mini__link--hl { border-color: #00E5FF; color: #CFFAFF; box-shadow: 0 0 14px rgba(0, 229, 255, 0.5); }
.gr-rain { inset: 0; }
.gr-rain i { left: var(--x); top: -40px; width: 1px; height: 28px; background: linear-gradient(transparent, rgba(190, 220, 255, 0.55)); animation: gr-rain calc(var(--d) * 0.12) linear var(--dl) infinite; }
@keyframes gr-rain { to { transform: translate(-30px, 640px); } }
/* Moody Forest: desaturated greens, amber highlights */
.vibe--moody-forest .mini { --bg: #1B2A22; --fg: #EDE6D6; --mut: #B5B39C; --btn: #C98B3A; --btnfg: #17221C; --rad: 8px; --hl: #E7B566; --font: 'DM Sans', var(--sans); --leak: #E7A74A; --vig: 0.6; }
.vibe--moody-forest .gr-base { background: linear-gradient(180deg, #2E4436 0%, #1B2A22 55%, #121B16 100%); }
.vibe--moody-forest .mini__name { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 19px; }

/* ---------- Video themes ---------- */
.bg--video { background: #000000; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bg-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)); pointer-events: none; }
.bg-scrim--own { z-index: -1; background: rgba(0, 0, 0, var(--dim, 0.4)); }
.vibe--video .mini { --bg: #111111; --fg: #FFFFFF; --mut: rgba(255, 255, 255, 0.8); --btn: rgba(255, 255, 255, 0.16); --btnfg: #FFFFFF; --rad: 14px; --hl: #FFFFFF; --font: 'DM Sans', var(--sans); }
.vibe--video .mini__name { font-size: 19px; font-weight: 800; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.vibe--video .mini__link { border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vibe--video .mini__link--hl { background: #FFFFFF; border-color: #FFFFFF; color: #111111; }
.vibe--video .blk { background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vibe--lava-lamp .mini__name { font-family: 'Righteous', var(--sans); font-weight: 400; }
.vibe--deep-ocean .mini__name { font-family: 'Playfair Display', serif; font-weight: 900; }
.vibe--northern-lights .mini__name { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: 0.04em; }
.vibe--neon-flow .mini__name { font-family: 'Audiowide', var(--sans); font-weight: 400; text-shadow: 0 0 12px rgba(255, 46, 200, 0.8); }
.vibe--speed-lines .mini__name { font-family: 'Bangers', var(--sans); font-weight: 400; font-size: 26px; letter-spacing: 0.05em; text-shadow: 3px 3px 0 #0B1D4A; }
.vibe--speed-lines .mini__link { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); font-weight: 800; text-transform: uppercase; }
.vibe--speed-lines .mini__link--hl { background: #FF3B3B; border-color: #FF3B3B; color: #FFFFFF; }
.vibe--lofi-rain .mini__name { font-family: 'VT323', monospace; font-weight: 400; font-size: 26px; letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(255, 170, 150, 0.6); }
.vibe--lofi-rain .mini__link { border-radius: 10px; }
.vibe--lofi-rain .mini__link--hl { background: #FFB4A2; border-color: #FFB4A2; color: #2A1638; }
.vibe--warp .mini__name { font-family: 'Audiowide', var(--sans); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 14px rgba(150, 120, 255, 0.9); }
.vibe--warp .mini__link--hl { background: linear-gradient(90deg, #A78BFA, #67E8F9); border-color: transparent; color: #0B0820; }
.vibe--liquid-chrome .mini { --bg: #E6E8EE; --fg: #0D0F14; --mut: #2B303B; --btn: rgba(255, 255, 255, 0.5); --btnfg: #0D0F14; --rad: 999px; }
.vibe--liquid-chrome .bg-scrim { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1)); }
.vibe--liquid-chrome .mini__name { font-family: 'Bricolage Grotesque', var(--sans); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.vibe--liquid-chrome .mini__link { border-color: rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 20px -12px rgba(0, 0, 0, 0.5); }
.vibe--liquid-chrome .mini__link--hl { background: #0D0F14; border-color: #0D0F14; color: #FFFFFF; }
.vibe--liquid-chrome .blk { background: rgba(255, 255, 255, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .vibe--grade .bg *, .gr-grain { animation: none !important; }
}

/* The creator's photo is never recoloured, dimmed or blended on any theme: faces stay true to life and clear.
   Themes style the ring and glow around it instead. */
.mini__avatar.has-img img, .studio__av.has-img img { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
.mini__avatar.has-img, .studio__av.has-img { position: relative; z-index: 1; }