/* -----------------------------------------------------------------------------
   SPECTRUM VEIL HERO SYSTEM (LIGHT & AERATED)
   Inspired by defiant.vc
   Embodiment of Wellbeing and Circadian Light
   ----------------------------------------------------------------------------- */

:root {
    --veil-transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.spectrum-hero {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100%;
    background-color: #fcfbf9;
    /* Warm daylight off-white to eliminate black negative space */
    overflow: hidden;
    z-index: 9999;
    /* Must be higher than nav (2001) */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}

/* Prevent scrolling while hero is active */
body:not(.site-entered) {
    overflow: hidden;
}

/* --- THE VEILS (HIGH VISIBILITY STRUCTURED LAYERS) --- */
.veil-container {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}

.veil {
    position: absolute;
    border-radius: 0;
    /* Removed blend mode to ensure colors sit solidly on top */
    mix-blend-mode: normal;
    filter: none;
    opacity: 1.0;
    /* Full opacity base */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* --- AMBER LAYERS (WARMTH) --- */

/* 1. Amber Deep (Background Base) */
.veil--amber-deep {
    top: 10%;
    left: -20%;
    width: 200%;
    height: 60vh;
    /* Significant alpha boost: 0.15 -> 0.4 */
    background: linear-gradient(120deg, rgba(255, 120, 0, 0) 20%, rgba(255, 100, 0, 0.4) 50%, rgba(255, 120, 0, 0) 80%);
    transform: rotate(15deg);
    mix-blend-mode: multiply;
    /* Keep multiply on deep layer only for depth */
}

/* 2. Amber Mid (Body) */
.veil--amber-mid {
    top: 30%;
    left: -10%;
    width: 200%;
    height: 50vh;
    /* Boost: 0.25 -> 0.6 */
    background: linear-gradient(120deg, rgba(255, 160, 40, 0) 30%, rgba(255, 140, 30, 0.6) 50%, rgba(255, 160, 40, 0) 70%);
    transform: rotate(20deg);
}

/* 3. Amber Bright (Highlight Ribbon) */
.veil--amber-bright {
    top: 45%;
    left: -10%;
    width: 200%;
    height: 25vh;
    /* Boost: 0.4 -> 0.8 */
    background: linear-gradient(120deg, rgba(255, 200, 80, 0) 40%, rgba(255, 180, 60, 0.8) 50%, rgba(255, 200, 80, 0) 60%);
    transform: rotate(25deg);
}

/* --- BLUE LAYERS (COOLNESS) --- */

/* 4. Blue Deep (Background Base) */
.veil--blue-deep {
    bottom: 0%;
    right: -20%;
    width: 200%;
    height: 70vh;
    /* Boost: 0.1 -> 0.4 */
    background: linear-gradient(60deg, rgba(30, 80, 255, 0) 20%, rgba(20, 60, 255, 0.4) 50%, rgba(30, 80, 255, 0) 80%);
    transform: rotate(-15deg);
    mix-blend-mode: multiply;
}

/* 5. Blue Mid (Body) */
.veil--blue-mid {
    bottom: 20%;
    right: -10%;
    width: 200%;
    height: 50vh;
    /* Boost: 0.2 -> 0.6 */
    background: linear-gradient(60deg, rgba(60, 120, 255, 0) 30%, rgba(50, 100, 255, 0.6) 50%, rgba(60, 120, 255, 0) 70%);
    transform: rotate(-20deg);
}

/* 6. Blue Bright (Highlight Ribbon) */
.veil--blue-bright {
    bottom: 40%;
    right: -10%;
    width: 200%;
    height: 20vh;
    /* Boost: 0.5 -> 0.8 */
    background: linear-gradient(60deg, rgba(160, 210, 255, 0) 40%, rgba(130, 190, 255, 0.85) 50%, rgba(160, 210, 255, 0) 60%);
    transform: rotate(-25deg);
}

/* -----------------------------------------------------------------------------
   HERO HINT ANIMATION
   ----------------------------------------------------------------------------- */
.hero-hint {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    color: #1a1a1a;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.6;
    animation: hintPulse 3s infinite ease-in-out;
    z-index: 10000;
}

@keyframes hintPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: translate(-50%, 0);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -10px);
    }
}

/* --- TRANSITION STATES --- */

/* Initially: Content is hidden */
main,
footer,
.site-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

body.site-entered main,
body.site-entered footer,
body.site-entered .site-header {
    opacity: 1;
    pointer-events: auto;
}

/* Hero Expansion */
body.site-entered .spectrum-hero {
    pointer-events: none;
    z-index: -1;
    /* Move behind content */
}

body.site-entered .hero-hint {
    opacity: 0;
    transform: translateY(-40px);
}

body.site-entered .veil-container {
    transform: scale(1.3);
    opacity: 0.8;
}

/* PERSISTENT BACKGROUND WRAPPER (MIRRORS HERO) */
.spectrum-bg-fix {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--lcg-bg);
    overflow: hidden;
    display: none;
}

/* Add static representations of veils for the persistent background */
.spectrum-bg-fix::before,
.spectrum-bg-fix::after {
    content: "";
    position: absolute;
    /* Ribbon shapes */
    border-radius: 0;
    opacity: 0.8;
    /* Boosted from 0.4 for visibility */
    mix-blend-mode: normal;
}

.spectrum-bg-fix::before {
    /* Amber Ribbon */
    top: 20%;
    left: -20%;
    width: 200%;
    height: 40vh;
    background: linear-gradient(120deg, rgba(255, 140, 30, 0), rgba(255, 140, 30, 0.7), rgba(255, 140, 30, 0));
    transform: rotate(20deg);
}

.spectrum-bg-fix::after {
    /* Blue Ribbon */
    bottom: 20%;
    right: -20%;
    width: 200%;
    height: 40vh;
    background: linear-gradient(60deg, rgba(60, 120, 255, 0), rgba(60, 120, 255, 0.7), rgba(60, 120, 255, 0));
    transform: rotate(-20deg);
}

body.site-entered .spectrum-bg-fix {
    display: block;
}

/* HEADER LEGIBILITY */
body.site-entered .site-header {
    background: transparent !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* INTRO CONTENT LEGIBILITY */
#introduction {
    background: transparent !important;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 20vh;
}

#introduction .panel__inner {
    padding-top: 0 !important;
}

#introduction h2,
#introduction p,
#introduction span {
    color: var(--lcg-text) !important;
}