/* ============================================
   BACKGROUND IMAGE COLLAGE
   Fixed position neon sign cutouts in hero
   ============================================ */

/* Hero collage container - fixed behind marquee */
.bg-collage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Subtle dark vignette behind the marquee - blends naturally */
.hero-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse 55% 50% at 50% 48%,
        rgba(5, 3, 12, 0.92) 0%,
        rgba(8, 5, 18, 0.8) 25%,
        rgba(10, 8, 22, 0.55) 45%,
        rgba(12, 10, 26, 0.3) 65%,
        transparent 85%
    );
    z-index: 2;
    pointer-events: none;
}

/* Individual cutout styling */
.bg-cutout {
    position: absolute;
    opacity: 0;
}

/* ============================================
   HERO ENTRANCE ANIMATIONS
   Signs fly in from outside the frame
   ============================================ */

@keyframes flyInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-150%) rotate(-15deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromRight {
    from {
        opacity: 0;
        transform: translateX(150%) rotate(15deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromTop {
    from {
        opacity: 0;
        transform: translateY(-150%) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromBottom {
    from {
        opacity: 0;
        transform: translateY(150%) rotate(10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromBottomDunes {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(150%) rotate(10deg);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) rotate(0deg);
    }
}

@keyframes flyInFromBottomLeft {
    from {
        opacity: 0;
        transform: translate(-100%, 100%) rotate(-20deg);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromBottomRight {
    from {
        opacity: 0;
        transform: translate(100%, 100%) rotate(20deg);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromTopLeft {
    from {
        opacity: 0;
        transform: translate(-100%, -100%) rotate(-20deg);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rotate, 0deg));
    }
}

@keyframes flyInFromTopRight {
    from {
        opacity: 0;
        transform: translate(100%, -100%) rotate(20deg);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rotate, 0deg));
    }
}

/* Apply animations to hero cutouts - only when marquee-ready class is added */
.bg-cutout.stardust {
    --final-rotate: -2deg;
}

.bg-cutout.vegas-vic {
    --final-rotate: 5deg;
}

.bg-cutout.glitter-gulch {
    --final-rotate: -5deg;
}

.bg-cutout.flamingo {
    --final-rotate: 5deg;
}

.bg-cutout.golden-nugget {
    --final-rotate: -2deg;
}

.bg-cutout.dunes-oasis {
    --final-rotate: 0deg;
}

.bg-cutout.mint {
    --final-rotate: 2deg;
}

.bg-cutout.casino-marquee {
    --final-rotate: -5deg;
}

.bg-cutout.welcome-vegas {
    --final-rotate: 0deg;
}

.bg-cutout.union-plaza {
    --final-rotate: 20deg;
}

/* CSS animations disabled - using GSAP instead for reliability */
/* GSAP handles browser quirks with opacity: 0 elements better than CSS animations */
/*
.hero.marquee-ready .bg-cutout.stardust {
    animation: flyInFromTopLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.hero.marquee-ready .bg-cutout.vegas-vic {
    animation: flyInFromLeft 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}

.hero.marquee-ready .bg-cutout.glitter-gulch {
    animation: flyInFromRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.hero.marquee-ready .bg-cutout.flamingo {
    animation: flyInFromBottomLeft 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
}

.hero.marquee-ready .bg-cutout.golden-nugget {
    animation: flyInFromBottomRight 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

.hero.marquee-ready .bg-cutout.dunes-oasis {
    animation: flyInFromBottomDunes 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

.hero.marquee-ready .bg-cutout.mint {
    animation: flyInFromBottom 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards;
}

.hero.marquee-ready .bg-cutout.casino-marquee {
    animation: flyInFromTop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0s forwards;
}

.hero.marquee-ready .bg-cutout.welcome-vegas {
    animation: flyInFromTop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

.hero.marquee-ready .bg-cutout.union-plaza {
    animation: flyInFromTopRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
*/

/* Glow effect on cutouts - disabled */
.bg-cutout.glow {
    filter: saturate(1.3);
}

/* Different z-index layers for overlap depth */
.bg-cutout.layer-back {
    z-index: 1;
}

.bg-cutout.layer-mid {
    z-index: 2;
}

.bg-cutout.layer-front {
    z-index: 3;
}

/* ============================================
   FREMONT STREET CORRIDOR - ALL IMAGES
   Signs along edges framing the marquee
   ============================================ */

/* === LEFT SIDE === */

/* TOP LEFT - Stardust */
.bg-cutout.stardust {
    top: -5%;
    left: -3%;
    width: clamp(280px, 32vw, 450px);
    transform: rotate(-2deg);
    z-index: 2;
}

/* LEFT BORDER - Vegas Vic cowboy poking in */
.bg-cutout.vegas-vic {
    top: 30%;
    left: -8%;
    width: clamp(180px, 22vw, 320px);
    transform: rotate(5deg);
    z-index: 3;
}

/* === RIGHT SIDE === */

/* RIGHT BORDER - Glitter Gulch cowgirl poking in */
.bg-cutout.glitter-gulch {
    top: 20%;
    right: -10%;
    width: clamp(300px, 35vw, 480px);
    transform: rotate(-5deg);
    z-index: 4;
}

/* Rio - removed from hero, used in later sections */
.bg-cutout.rio {
    display: none;
}

/* BOTTOM LEFT CORNER - Flamingo feathers */
.bg-cutout.flamingo {
    bottom: -5%;
    left: -5%;
    width: clamp(350px, 40vw, 580px);
    transform: rotate(5deg);
    z-index: 2;
}

/* === BOTTOM EDGE - shifted left === */

/* BOTTOM RIGHT - Golden Nugget */
.bg-cutout.golden-nugget {
    bottom: -5%;
    right: -5%;
    width: clamp(350px, 42vw, 600px);
    transform: rotate(-2deg);
    z-index: 1;
}

/* Sassy Sally's - removed from hero, used in later sections */
.bg-cutout.sassy-sallys {
    display: none;
}

/* BOTTOM CENTER - Dunes/Oasis palms (shifted left) */
.bg-cutout.dunes-oasis {
    bottom: -8%;
    left: 40%;
    transform: translateX(-50%);
    width: clamp(400px, 50vw, 700px);
    z-index: 1;
}

/* BOTTOM - Mint along bottom edge */
.bg-cutout.mint {
    bottom: -8%;
    left: 50%;
    width: clamp(260px, 30vw, 420px);
    transform: rotate(2deg);
    z-index: 2;
}

/* === TOP EDGE === */

/* TOP - Casino marquee (moved to top left) */
.bg-cutout.casino-marquee {
    top: -5%;
    left: 20%;
    width: clamp(280px, 32vw, 480px);
    transform: rotate(-5deg);
    z-index: 1;
}

/* TOP - Welcome Vegas (offset right) */
.bg-cutout.welcome-vegas {
    top: -12%;
    left: 68%;
    transform: translateX(-50%);
    width: clamp(280px, 35vw, 500px);
    z-index: 4;
}

/* Frontier - removed from hero, used in later sections */
.bg-cutout.frontier {
    display: none;
}

/* ============================================
   SECTION SIGN CUTOUTS
   Signs poking in from sides on later sections
   ============================================ */

/* Sections with sign cutouts use `overflow-x: clip` so decorative
   elements positioned near the edges don't expand the document width
   and create a horizontal scrollbar, while still allowing vertical
   bleed between sections (for shadows, soft edges, tilts, etc.). */
.schedule,
.rsvp,
.hotel,
.messages,
.gifts {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.attire {
    overflow-x: clip !important;
    overflow-y: hidden !important;
}

/* ============================================
   SECTION SIGN SCROLL ANIMATIONS
   Transition-driven fade + slide in, triggered once when the
   containing section enters the viewport (see initScrollAnimations
   in js/main.js, which adds the .animate-in class).
   ============================================ */

.section-sign-cutout {
    position: absolute;
    width: clamp(200px, 25vw, 350px);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    /* Single, smooth transition drives the entire entrance.
       No keyframe animation is used — elastic keyframes caused opacity
       to overshoot past 1 (clamped), producing a visible "snap to full
       then settle" that read as a double fade-in. A monotonic ease-out
       curve on both opacity and transform gives one clean fade. */
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lift the main textual/interactive content above the decorative
   side signs at every breakpoint so headlines, copy, and panels stay
   readable even when a full-size sign peeks in from the edge. */
.section-with-chaos > .section-title,
.section-with-chaos > .attire-content,
.section-with-chaos > .event-panels,
.section-with-chaos > .messages-content,
.section-with-chaos > .slot-machine-game,
.section-with-chaos > .hotel-content,
.section-with-chaos > .rsvp-content,
.section-with-chaos > .vegas-divider {
    position: relative;
    z-index: 2;
}

/* Final/resting state when the section has scrolled into view.
   Each variant's base rule below defines the resting transform and
   resting opacity; .animate-in just ensures opacity reaches 1 (the
   non-bg signs want to be fully visible once faded in). */
.section-sign-cutout.animate-in {
    opacity: 1;
}

/* Resting transforms — these are what the sign transitions TO. */
.section-sign-cutout.sign-left {
    left: -8%;
    top: 50%;
    transform: translateY(-50%) rotate(5deg);
}

.section-sign-cutout.sign-right {
    right: -8%;
    top: 50%;
    transform: translateY(-50%) rotate(-5deg);
}

.section-sign-cutout.sign-bottom-right {
    right: 5%;
    bottom: 60px;
    width: clamp(280px, 35vw, 500px);
    transform: rotate(-3deg);
    z-index: 1;
}

/* Vegas lights sign in Messages/Attire section - positioned right. */
.section-sign-cutout.sign-right-messages {
    right: -12%;
    top: 50%;
    transform: translateY(-50%) rotate(-3deg);
    width: clamp(450px, 58vw, 850px);
}

/* Horseshoe sign in Messages/Attire section - positioned left */
.section-sign-cutout.sign-left-messages {
    left: -10%;
    top: 50%;
    transform: translateY(-50%) rotate(3deg);
    width: clamp(450px, 55vw, 800px);
}

/* Neon sign in RSVP section - positioned left */
.section-sign-cutout.sign-left-rsvp {
    left: -18%;
    top: 42%;
    transform: translateY(-50%) rotate(5deg);
    width: clamp(450px, 55vw, 750px);
    filter: brightness(0.7);
}

/* Slot machine in Gifts/Jackpot section - positioned left */
.section-sign-cutout.sign-left-gifts {
    left: -8%;
    top: 50%;
    transform: translateY(-50%) rotate(3deg);
    width: clamp(300px, 38vw, 500px);
}

/* Chips in Hotel section - positioned left with vintage sepia filter */
.section-sign-cutout.sign-left-hotel {
    left: -5%;
    top: 50%;
    transform: translateY(-50%) rotate(-5deg);
    width: clamp(300px, 35vw, 500px);
    filter: sepia(0.7) saturate(0.8) brightness(0.9) contrast(1.1);
}

/* Entry-state transforms (pre-animate). Only applied while the sign
   has NOT yet received the .animate-in class. When the class is added,
   these rules stop matching and the base rules above take over — the
   CSS transition on .section-sign-cutout interpolates smoothly. */
.section-sign-cutout.sign-left:not(.animate-in),
.section-sign-cutout.sign-left-messages:not(.animate-in),
.section-sign-cutout.sign-left-rsvp:not(.animate-in),
.section-sign-cutout.sign-left-gifts:not(.animate-in),
.section-sign-cutout.sign-left-hotel:not(.animate-in) {
    transform: translate(-40px, -50%) rotate(var(--sign-enter-rotate, 5deg));
}

.section-sign-cutout.sign-right:not(.animate-in),
.section-sign-cutout.sign-right-messages:not(.animate-in) {
    transform: translate(40px, -50%) rotate(var(--sign-enter-rotate, -5deg));
}

.section-sign-cutout.sign-bottom-right:not(.animate-in) {
    transform: translateY(30px) rotate(-3deg);
}

/* Keep rotation consistent with the resting state to avoid any
   rotation mid-transition on angled signs. */
.section-sign-cutout.sign-left { --sign-enter-rotate: 5deg; }
.section-sign-cutout.sign-left-messages { --sign-enter-rotate: 3deg; }
.section-sign-cutout.sign-left-rsvp { --sign-enter-rotate: 5deg; }
.section-sign-cutout.sign-left-gifts { --sign-enter-rotate: 3deg; }
.section-sign-cutout.sign-left-hotel { --sign-enter-rotate: -5deg; }
.section-sign-cutout.sign-right { --sign-enter-rotate: -5deg; }
.section-sign-cutout.sign-right-messages { --sign-enter-rotate: -3deg; }

/* TOP RIGHT CORNER - Union Plaza (tilted 20deg right) */
.bg-cutout.union-plaza {
    top: -5%;
    right: -3%;
    width: clamp(220px, 26vw, 400px);
    transform: rotate(20deg);
    z-index: 3;
}


/* ============================================
   RESPONSIVE - Reduce on mobile
   ============================================ */

@media (max-width: 1024px) {
    .bg-cutout {
        opacity: 0.1;
    }
    
    .bg-cutout.layer-front {
        opacity: 0.12;
    }
    
    .bg-glow-spot {
        opacity: 0.1;
        filter: blur(80px);
    }
}

@media (max-width: 768px) {
    .bg-cutout {
        opacity: 0.08;
        filter: blur(2px) saturate(1.2);
    }
    
    .bg-cutout.frontier {
        display: none;
    }
    
    .bg-cutout.stardust,
    .bg-cutout.rio {
        opacity: 0.06;
    }
    
    .bg-glow-spot {
        opacity: 0.08;
        transform: scale(0.7);
    }
    
}

/* On smaller desktops, tablets, and phones, fade all side decorative
   signs into the background (like the hero collage) so they don't cover
   the main content but still add atmosphere. The 1400px breakpoint
   keeps the full-size signs only on wide displays where the centered
   content (e.g. .attire-content at max-width: 600px) has enough room
   on either side to not be covered. */
@media (max-width: 1400px) {
    .section-sign-cutout,
    .section-sign-cutout.animate-in,
    .section-sign-cutout.sign-left,
    .section-sign-cutout.sign-right,
    .section-sign-cutout.sign-left-rsvp,
    .section-sign-cutout.sign-left-rsvp.animate-in,
    .section-sign-cutout.sign-left-hotel,
    .section-sign-cutout.sign-left-hotel.animate-in,
    .section-sign-cutout.sign-left-gifts,
    .section-sign-cutout.sign-left-gifts.animate-in,
    .section-sign-cutout.sign-left-messages,
    .section-sign-cutout.sign-right-messages,
    .section-sign-cutout.sign-bottom-right {
        opacity: 0.18 !important;
        filter: blur(2px) saturate(1.1) brightness(0.9) !important;
        z-index: 0 !important;
        animation: none !important;
        /* No transition on smaller viewports — signs are decorative
           background only, no slide-in needed. */
        transition: none !important;
    }

    /* Cancel the entry offset so signs sit at their resting transform
       immediately, without waiting for the (now-removed) animation. */
    .section-sign-cutout.sign-left:not(.animate-in),
    .section-sign-cutout.sign-left-messages:not(.animate-in),
    .section-sign-cutout.sign-left-rsvp:not(.animate-in),
    .section-sign-cutout.sign-left-gifts:not(.animate-in),
    .section-sign-cutout.sign-left-hotel:not(.animate-in) {
        transform: translateY(-50%) rotate(var(--sign-enter-rotate, 5deg)) !important;
    }

    .section-sign-cutout.sign-right:not(.animate-in),
    .section-sign-cutout.sign-right-messages:not(.animate-in) {
        transform: translateY(-50%) rotate(var(--sign-enter-rotate, -5deg)) !important;
    }

    .section-sign-cutout.sign-bottom-right:not(.animate-in) {
        transform: rotate(-3deg) !important;
    }
}

@media (max-width: 768px) {
    .section-sign-cutout,
    .section-sign-cutout.animate-in {
        opacity: 0.14 !important;
    }
}

@media (max-width: 480px) {
    .section-sign-cutout,
    .section-sign-cutout.animate-in {
        opacity: 0.1 !important;
        filter: blur(3px) saturate(1.1) brightness(0.85) !important;
    }
}

@media (max-width: 480px) {
    .bg-collage {
        opacity: 0.5;
    }
    
    .bg-cutout {
        opacity: 0.05;
    }
    
    .bg-cutout.mint,
    .bg-cutout.casino-marquee,
    .bg-cutout.sassy-sallys {
        display: none;
    }
    
    .bg-glow-spot {
        opacity: 0.06;
        transform: scale(0.5);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .bg-cutout {
        transition: none;
    }
    
    .bg-cutout[data-parallax] {
        transform: none !important;
    }

    /* For users who prefer reduced motion, skip the slide entirely:
       signs simply fade in (or just appear) at their resting transform. */
    .section-sign-cutout {
        transition: opacity 0.3s linear !important;
    }

    .section-sign-cutout.sign-left:not(.animate-in),
    .section-sign-cutout.sign-left-messages:not(.animate-in),
    .section-sign-cutout.sign-left-rsvp:not(.animate-in),
    .section-sign-cutout.sign-left-gifts:not(.animate-in),
    .section-sign-cutout.sign-left-hotel:not(.animate-in),
    .section-sign-cutout.sign-right:not(.animate-in),
    .section-sign-cutout.sign-right-messages:not(.animate-in),
    .section-sign-cutout.sign-bottom-right:not(.animate-in) {
        transform: none;
    }
}