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

/* Background colors - using daisyUI semantic colors */
.bg-primary { background-color: oklch(var(--p)); }
.bg-secondary { background-color: oklch(var(--s)); }
.bg-muted { background-color: oklch(var(--b3)); }

/* Background gradients */
.bg-gradient-brand {
    background: linear-gradient(135deg, oklch(var(--p)), oklch(var(--s)));
}
.bg-gradient-dark {
    background: linear-gradient(180deg, oklch(var(--b3)), oklch(var(--b2)));
}

/* 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 */
.overlay-dark::before { background: black; }
.overlay-light::before { background: white; }
.overlay-brand::before { background: oklch(var(--p)); }
.overlay-custom::before { background: var(--overlay-color, black); }

/* Custom overlay base styles */
.overlay-custom {
    position: relative;
}

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

.overlay-custom > * {
    position: relative;
    z-index: 2;
}

.overlay-custom > img {
    z-index: 0;
}

/* 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: oklch(var(--bc));
}
.overlay-light h1, .overlay-light h2, .overlay-light h3,
.overlay-light h4, .overlay-light h5, .overlay-light h6 {
    color: oklch(var(--bc));
}
.overlay-light a {
    color: oklch(var(--bc));
}
.overlay-light a:hover {
    color: oklch(var(--bc) / 0.7);
}

/* Overlay brand - white text on brand color overlay */
.overlay-brand {
    color: oklch(var(--pc));
}
.overlay-brand h1, .overlay-brand h2, .overlay-brand h3,
.overlay-brand h4, .overlay-brand h5, .overlay-brand h6 {
    color: oklch(var(--pc));
}
.overlay-brand a {
    color: oklch(var(--pc));
}
.overlay-brand a:hover {
    color: oklch(var(--pc) / 0.8);
}

/* 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: oklch(var(--p) / var(--overlay-opacity, 0.5));
}

/* 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;
    }
}