/* ============================================================
   ParsinX — Slider background presets
   Self-contained animated full-bleed backgrounds for the
   landing BrandReveal banner. Selectable from the admin panel.
   Each preset is applied to a full-size layer (.sb-bg.sb-<name>).
   ============================================================ */

.sb-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: var(--surface-app); }

/* 1) Aurora — drifting glow blobs */
.sb-aurora::before, .sb-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.sb-aurora::before { width: 60%; height: 75%; top: -18%; inset-inline-start: -10%; background: radial-gradient(circle, var(--sb-c1, var(--px-azure)) 0%, transparent 70%); animation: sb-drift-a 18s var(--ease-in-out) infinite; }
.sb-aurora::after { width: 55%; height: 68%; bottom: -22%; inset-inline-end: -8%; background: radial-gradient(circle, var(--sb-c2, var(--px-violet)) 0%, transparent 70%); animation: sb-drift-b 22s var(--ease-in-out) infinite; }
@keyframes sb-drift-a { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(20%,14%) scale(1.18);} }
@keyframes sb-drift-b { 0%,100% { transform: translate(0,0) scale(1.1);} 50% { transform: translate(-16%,-10%) scale(1);} }

/* 2) Nebula — layered colour clouds, slow pulse + hue rotation */
.sb-nebula {
    background:
        radial-gradient(45% 55% at 25% 30%, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 60%, transparent), transparent 70%),
        radial-gradient(50% 60% at 78% 35%, color-mix(in srgb,var(--sb-c2, var(--px-violet)) 55%, transparent), transparent 70%),
        radial-gradient(55% 65% at 55% 85%, color-mix(in srgb,var(--px-magenta) 45%, transparent), transparent 72%),
        radial-gradient(40% 50% at 90% 75%, color-mix(in srgb,var(--px-cyan) 40%, transparent), transparent 70%),
        var(--surface-app);
    filter: saturate(1.05);
    animation: sb-nebula 24s var(--ease-in-out) infinite;
}
@keyframes sb-nebula { 0%,100% { filter: saturate(1.05) hue-rotate(0deg); transform: scale(1);} 50% { filter: saturate(1.2) hue-rotate(-18deg); transform: scale(1.06);} }

/* 3) Waves — diagonal colour waves sliding */
.sb-waves {
    background:
        linear-gradient(115deg, transparent 0 35%, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 22%, transparent) 50%, transparent 65% 100%),
        linear-gradient(115deg, transparent 0 55%, color-mix(in srgb,var(--sb-c2, var(--px-violet)) 18%, transparent) 70%, transparent 85% 100%),
        var(--surface-app);
    background-size: 220% 220%, 260% 260%, 100% 100%;
    animation: sb-waves 16s ease-in-out infinite alternate;
}
@keyframes sb-waves { from { background-position: 0% 0%, 100% 100%, 0 0;} to { background-position: 60% 40%, 30% 70%, 0 0;} }

/* 4) Grid — tech grid + sweeping glow band */
.sb-grid {
    background:
        linear-gradient(color-mix(in srgb,var(--sb-c1, var(--px-azure)) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 14%, transparent) 1px, transparent 1px),
        var(--surface-app);
    background-size: 44px 44px, 44px 44px, 100% 100%;
}
.sb-grid::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 32%, transparent), transparent 70%); animation: sb-sweep 9s var(--ease-in-out) infinite; }
@keyframes sb-sweep { 0%,100% { transform: translateY(-14%); opacity: .65;} 50% { transform: translateY(46%); opacity: 1;} }

/* 5) Beams — diagonal light beams sliding */
.sb-beams {
    background-image: repeating-linear-gradient(115deg,
        transparent 0 60px,
        color-mix(in srgb,var(--sb-c1, var(--px-azure)) 11%, transparent) 60px 62px,
        transparent 62px 130px,
        color-mix(in srgb,var(--px-cyan) 9%, transparent) 130px 132px);
    background-size: 200% 100%;
    animation: sb-beams 14s linear infinite;
}
.sb-beams::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 18%, color-mix(in srgb,var(--sb-c2, var(--px-violet)) 24%, transparent), transparent 65%); }
@keyframes sb-beams { to { background-position: 200% 0;} }

/* 6) Sunburst — soft rotating conic rays from top centre */
.sb-sunburst::before {
    content: ""; position: absolute; inset: -40%;
    background: conic-gradient(from 0deg at 50% 30%,
        transparent 0 8deg, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 16%, transparent) 12deg 16deg, transparent 20deg 30deg,
        color-mix(in srgb,var(--sb-c2, var(--px-violet)) 14%, transparent) 34deg 38deg, transparent 42deg 60deg);
    background-size: 100% 100%;
    animation: sb-spin 40s linear infinite;
}
.sb-sunburst::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 30%, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 22%, transparent), transparent 70%); }
@keyframes sb-spin { to { transform: rotate(360deg);} }

/* 7) Spectrum — flowing four-colour AI-glow wash */
.sb-spectrum {
    background: linear-gradient(100deg, var(--px-glow-1), var(--px-glow-2), var(--px-glow-3), var(--px-glow-4), var(--px-glow-1));
    background-size: 300% 100%;
    opacity: 0.9;
    animation: px-glow-flow 10s linear infinite;
}
.sb-spectrum::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface-app) 55%, transparent); }

/* 8) Mesh — multi-stop gradient mesh drift */
.sb-mesh {
    background:
        radial-gradient(40% 50% at 18% 22%, color-mix(in srgb,var(--sb-c1, var(--px-azure)) 55%, transparent), transparent),
        radial-gradient(45% 55% at 82% 18%, color-mix(in srgb,var(--sb-c2, var(--px-violet)) 50%, transparent), transparent),
        radial-gradient(50% 60% at 60% 88%, color-mix(in srgb,var(--px-cyan) 42%, transparent), transparent),
        radial-gradient(40% 50% at 95% 70%, color-mix(in srgb,var(--px-magenta) 38%, transparent), transparent),
        var(--surface-app);
    background-size: 200% 200%;
    animation: sb-mesh 26s var(--ease-in-out) infinite;
}
@keyframes sb-mesh { 0%,100% { background-position: 0% 0%, 100% 0%, 50% 100%, 100% 60%, 0 0;} 50% { background-position: 20% 30%, 70% 20%, 40% 70%, 80% 40%, 0 0;} }

/* Image background + legibility scrim */
.sb-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.sb-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-app) calc(var(--sb-overlay, 0.5) * 70%), transparent) 0%,
    color-mix(in srgb, var(--surface-app) calc(var(--sb-overlay, 0.5) * 100%), transparent) 100%); }

[data-theme="light"] .sb-spectrum { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    .sb-aurora::before, .sb-aurora::after, .sb-nebula, .sb-waves, .sb-grid::before,
    .sb-beams, .sb-sunburst::before, .sb-spectrum, .sb-mesh { animation: none !important; }
}

/* ============================================================
   BrandReveal banner (shared by landing + admin live preview)
   ============================================================ */
.pxreveal { position: relative; overflow: hidden; isolation: isolate; min-height: 500px; width: 100%; border-radius: var(--radius-xl); background: var(--surface-app); box-shadow: var(--inner-ring), var(--shadow-lg); }
.pxreveal__bg { position: absolute; inset: -6%; z-index: 0; }
.pxreveal__bg > * { width: 100%; height: 100%; }
/* Per-slide backgrounds stack and cross-fade */
.pxreveal__bg > .sb-bg { position: absolute; inset: 0; opacity: 0; }
.pxreveal.is-mounted .pxreveal__bg > .sb-bg { transition: opacity 0.8s var(--ease-in-out); }
.pxreveal__bg > .sb-bg.is-active { opacity: 1; }
.pxreveal.is-animated .pxreveal__bg { animation: pxr-kenburns 26s var(--ease-in-out) infinite alternate; will-change: transform; }
@keyframes pxr-kenburns { from { transform: scale(1) translate(0,0);} to { transform: scale(1.12) translate(1.5%, -1.5%);} }
.pxreveal__vig { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(70% 70% at 50% 45%, transparent 40%, color-mix(in srgb, var(--surface-app) 82%, transparent) 100%); }
/* ---- Free-positioning canvas (one per slide, cross-fading) ---- */
.pxreveal__canvases { position: absolute; inset: 0; z-index: 2; }
.pxreveal__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.pxreveal.is-mounted .pxreveal__slide { transition: opacity .9s var(--ease-standard); }
.pxreveal__slide.is-active { opacity: 1; pointer-events: auto; }
.pxreveal__canvas { position: absolute; inset: 0; container-type: inline-size; }
.pxlayer { position: absolute; box-sizing: border-box; transform-origin: center center; }
.pxlayer--image > img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.pxlayer--text .pxlayer__txt { width: 100%; overflow-wrap: break-word; }
/* Theme-aware text colour: --lc-dark for night (default), --lc-light for day.
   Set per-layer as custom props by slider.js applyLayerStyle(); switches live
   with the page/preview [data-theme] without re-rendering the slider. */
.pxlayer--text { color: var(--lc-dark, #fff); }
[data-theme="light"] .pxlayer--text { color: var(--lc-light, var(--lc-dark, #fff)); }
.pxlayer__ph { width: 100%; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); font-size: 0.8rem; background: color-mix(in srgb, var(--px-azure) 12%, transparent); border: 1px dashed color-mix(in srgb, var(--px-azure-bright) 50%, transparent); }

/* ---- Edit-mode affordances (admin only) ---- */
.pxreveal.is-editable .pxlayer { cursor: move; outline: 1px dashed transparent; outline-offset: 2px; }
.pxreveal.is-editable .pxlayer:hover { outline-color: color-mix(in srgb, var(--px-azure-bright) 55%, transparent); }
.pxreveal.is-editable .pxlayer.is-selected { outline: 1.5px solid var(--px-azure-bright); }
.pxlayer__handle { display: none; }
.pxreveal.is-editable .pxlayer.is-selected .pxlayer__handle { display: block; position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--px-azure-bright); border: 2px solid #fff; cursor: nwse-resize; box-shadow: var(--shadow-sm); }
.pxreveal.is-mobile .pxreveal__canvas { /* hook for mobile-only canvas tweaks */ }

/* ---- Chrome overlay: logo / CTA / progress dots (optional) ---- */
.pxreveal__chrome { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pxreveal__chrome > * { pointer-events: auto; }
.pxreveal__logo { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; justify-content: center; }
.pxreveal__mark { width: 54px; height: 54px; display: block; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--pxr-accent, var(--px-azure)) 70%, transparent)); }
.pxreveal__word { font: var(--fw-black) clamp(1.8rem, 4vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); }
.pxreveal__word .x { color: var(--pxr-accent, var(--px-azure-bright)); text-shadow: 0 0 22px color-mix(in srgb, var(--pxr-accent, var(--px-azure)) 60%, transparent); }
.pxreveal.is-animated .pxreveal__mark { animation: pxr-mark-in 1.1s var(--ease-emphasized) both; }
.pxreveal.is-animated .pxreveal__word { animation: pxr-word-in 1s .25s var(--ease-standard) both; }
@keyframes pxr-mark-in { 0% { opacity:0; transform: scale(.6) rotate(-12deg); filter: blur(6px);} 100% { opacity:1; transform: scale(1) rotate(0);} }
@keyframes pxr-word-in { 0% { opacity:0; transform: translateY(14px); letter-spacing:.18em;} 100% { opacity:1; transform: translateY(0); letter-spacing:-0.01em;} }
.pxreveal__progress { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 8px; justify-content: center; }
.pxreveal__seg { width: 46px; height: 3px; border-radius: 3px; border: none; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--text-muted) 45%, transparent); overflow: hidden; position: relative; }
.pxreveal__seg::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: right; background: var(--px-glow-linear); background-size: 300% 100%; box-shadow: 0 0 10px color-mix(in srgb, var(--pxr-accent, var(--px-azure)) 55%, transparent); }
.pxreveal__seg.is-done::after { transform: scaleX(1); }
.pxreveal__seg.is-active::after { animation: pxr-fill var(--pxr-dur, 4600ms) linear forwards, px-glow-flow 6s linear infinite; }
@keyframes pxr-fill { from { transform: scaleX(0);} to { transform: scaleX(1);} }
.pxreveal__cta { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .pxreveal { min-height: 380px; border-radius: var(--radius-lg); }
  .pxreveal__logo { top: 18px; gap: 9px; }
  .pxreveal__mark { width: 38px; height: 38px; }
  .pxreveal__word { font-size: 1.65rem; }
  .pxreveal__cta { bottom: 48px; width: calc(100% - 32px); gap: 8px; }
  .pxreveal__cta .btn { padding: 10px 16px; font-size: .9rem; }
  .pxreveal__progress { bottom: 17px; }
}
@media (prefers-reduced-motion: reduce){ .pxreveal.is-animated .pxreveal__bg, .pxreveal.is-animated .pxreveal__mark, .pxreveal.is-animated .pxreveal__word, .pxreveal.is-animated .pxreveal__rule { animation: none; } }