/**
 * Background Utilities
 *
 * Schema-driven backgrounds, gradients, and overlays.
 */

/* Background colors - using daisyUI semantic colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-muted { background-color: var(--color-base-300); }

/* Background gradients */
.bg-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.bg-gradient-dark {
    background: linear-gradient(180deg, var(--color-base-300), var(--color-base-200));
}

/* Background size */
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }

/* Background position */
.bg-center { background-position: center; }
.bg-top { background-position: top; }
.bg-bottom { background-position: bottom; }

/* Overlay base styles */
.overlay-dark,
.overlay-light,
.overlay-brand {
    position: relative;
}

.overlay-dark::before,
.overlay-light::before,
.overlay-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--overlay-opacity, 0.5);
    z-index: 1;
    pointer-events: none;
}

.overlay-dark > *,
.overlay-light > *,
.overlay-brand > * {
    position: relative;
    z-index: 2;
}

/* Keep images below overlay */
.overlay-dark > img,
.overlay-light > img,
.overlay-brand > img {
    z-index: 0;
}

/* Overlay colors.

   THE BLACK AND THE WHITE ARE LOAD-BEARING, NOT UNCONVERTED LITERALS (2026-09-14).
   Plexa_Ground_Tone::scrimmed() composites a scrim toward pure 0 or pure 255 —
   that is the model every overlay floor in fixed-compat.json and ground-compat.json
   was measured with. Painting --color-neutral or --color-base-100 here instead
   would make the paint disagree with the arithmetic and silently invalidate every
   floor in both catalogues. An overlay's job is to move luminance toward an
   extreme, which is a different job from carrying the family's colour; that is
   what .overlay-brand is for, and it IS a token. Declared family_independent in
   image-compat.json. */
.overlay-dark::before { background: black; }
.overlay-light::before { background: white; }
.overlay-brand::before { background: var(--color-primary); }


/* Overlay opacity modifiers */
.overlay-40 { --overlay-opacity: 0.4; }
.overlay-50 { --overlay-opacity: 0.5; }
.overlay-60 { --overlay-opacity: 0.6; }
.overlay-70 { --overlay-opacity: 0.7; }
.overlay-80 { --overlay-opacity: 0.8; }

/* ==========================================================================
   Overlay Text Colors
   Use daisyUI color system for text readability on overlays
   ========================================================================== */

/* Overlay dark - white text for readability on dark overlay */
.overlay-dark {
    color: white;
}
.overlay-dark h1, .overlay-dark h2, .overlay-dark h3,
.overlay-dark h4, .overlay-dark h5, .overlay-dark h6 {
    color: white;
}
.overlay-dark a {
    color: white;
}
.overlay-dark a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Overlay light - dark text for readability on light overlay */
.overlay-light {
    color: var(--color-base-content);
}
.overlay-light h1, .overlay-light h2, .overlay-light h3,
.overlay-light h4, .overlay-light h5, .overlay-light h6 {
    color: var(--color-base-content);
}
.overlay-light a {
    color: var(--color-base-content);
}
.overlay-light a:hover {
    color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

/* Overlay brand - white text on brand color overlay */
.overlay-brand {
    color: var(--color-primary-content);
}
.overlay-brand h1, .overlay-brand h2, .overlay-brand h3,
.overlay-brand h4, .overlay-brand h5, .overlay-brand h6 {
    color: var(--color-primary-content);
}
.overlay-brand a {
    color: var(--color-primary-content);
}
.overlay-brand a:hover {
    color: color-mix(in oklch, var(--color-primary-content) 80%, transparent);
}

/* Fixed background attachment */
.bg-fixed {
    background-attachment: fixed;
}

/* ==========================================================================
   Section Parallax/Video System
   Naming convention: .section-parallax-{element}
   Matches: assets/js/section-parallax.js
   ========================================================================== */

/* Container for video/parallax backgrounds */
.section-parallax-active {
    position: relative;
    overflow: hidden;
}

/* Background container (parallax image or video) */
.section-parallax-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.section-parallax-bg iframe,
.section-parallax-bg video,
.section-parallax-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Parallax needs extra height for scroll room */
.section-parallax-bg[data-section-parallax] {
    height: 120%;
    top: -10%;
}

/* Overlay element (for video/parallax z-index stacking) */
.section-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.section-overlay.overlay-dark {
    background: rgba(0, 0, 0, var(--overlay-opacity, 0.5));
}

.section-overlay.overlay-light {
    background: rgba(255, 255, 255, var(--overlay-opacity, 0.5));
}

.section-overlay.overlay-brand {
    background: color-mix(in oklch, var(--color-primary) calc(var(--overlay-opacity, 0.5) * 100%), transparent);
}

/* Content layer - sits above background and overlay */
.section-parallax-content {
    position: relative;
    z-index: 2;
}

/* Reduced motion: disable parallax transforms */
@media (prefers-reduced-motion: reduce) {
    .section-parallax-bg[data-section-parallax] {
        height: 100%;
        top: 0;
        transform: none !important;
    }
}