/* ----------------------------------------------------
   SITE INTRO REVEAL
   ---------------------------------------------------- */

:root {
    --reveal-bg: #18181b;
    --reveal-ink: #ececea;
    --reveal-start-size: clamp(4.75rem, 11vw, 6.75rem);
}

body.reveal-locked,
body.intro-active {
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh;
}

body.reveal-locked {
    background: var(--reveal-bg);
}

.reveal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--reveal-bg);
    color: var(--reveal-ink);
    transition:
        opacity 1.15s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 1.15s;
}

.reveal.is-exiting {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.reveal[hidden] {
    display: none !important;
}

.reveal__noise {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.42;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    background-repeat: repeat;
    animation: reveal-noise-shift 0.55s steps(6) infinite;
}

.reveal__noise::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.55;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    background-repeat: repeat;
    animation: reveal-noise-shift 0.38s steps(4) infinite reverse;
}

@keyframes reveal-noise-shift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2.5%, 1.5%); }
    50% { transform: translate(1.5%, -2%); }
    75% { transform: translate(-1%, -1.5%); }
    100% { transform: translate(0, 0); }
}

.reveal__stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    padding-bottom: clamp(5rem, 14vh, 7rem);
}

.reveal__quote-wrap {
    margin: 0;
    position: relative;
    width: min(94vw, 1400px);
    display: flex;
    justify-content: center;
    transform: rotate(-2.75deg);
    transform-origin: 50% 50%;
}

.reveal__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reveal__ink {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    touch-action: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.reveal__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2.75rem, 7vh, 4.25rem);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1rem, 4vw, 2rem);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.reveal-start {
    width: var(--reveal-start-size);
    height: var(--reveal-start-size);
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        color 0.35s ease;
}

.reveal-start.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.reveal-start:hover {
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
}

.reveal-start:active {
    transform: scale(0.96);
}

.reveal-start__label {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: clamp(0.72rem, 2.4vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

body.intro-active,
body.intro-active * {
    cursor: auto !important;
}

body.intro-active .cursor-plane {
    display: none !important;
}

@media (max-width: 480px) {
    .reveal__footer {
        bottom: clamp(2.25rem, 8vh, 3.5rem);
    }

    .reveal__quote-wrap {
        width: min(92vw, 1400px);
        transform: rotate(-2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-start {
        transition: none;
    }

    .reveal-start.is-visible {
        transform: none;
    }

    .reveal__noise,
    .reveal__noise::after {
        animation: none;
    }
}