/* ============================================================ THE WAVE SIQUIJOR — GSAP Animation Styles Skills: gsap-fundamentals · gsap-scrolltrigger This file handles: · GSAP initial states (gated by .js-gsap on ) · Scroll progress bar · Text split word-wrap utility · Gallery photo oversizing for parallax · Performance will-change hints · Reduced-motion overrides ============================================================ */ /* ─── DISABLE CSS HERO ENTRANCE WHEN GSAP IS ACTIVE ─── */ /* The .js-gsap class is added synchronously in before CSS renders, so the keyframe animation never fires when GSAP is present. Without JS, the CSS animation in animations.css acts as fallback. */ html.js-gsap .hero__content > * { animation: none !important; opacity: 0; transform: none; } /* ─── HERO BACKGROUND: clean flat dark (no gradient placeholder, no overlay) ─── */ /* While there is no real hero photo, the gradient placeholder + overlay dilutes the logo impact. Hide them to get the same premium flat dark look as the approved test build. Re-enable when a real photo is set in .hero__bg. */ html.js-gsap .hero__bg { display: none !important; } html.js-gsap .hero__overlay { display: none !important; } /* ─── KILL CSS TRANSITIONS ON GSAP-ANIMATED ELEMENTS ─── */ /* .reveal* elements have CSS transitions (800ms) from the legacy IntersectionObserver system. With GSAP active, those transitions fire alongside GSAP, making animations feel faster and erratic. GSAP has full control of timing and easing — no CSS transition needed. */ html.js-gsap .reveal, html.js-gsap .reveal-left, html.js-gsap .reveal-right, html.js-gsap .reveal-scale, html.js-gsap .reveal-stagger, html.js-gsap .reveal-stagger > * { transition: none !important; } /* ─── GSAP-CONTROLLED INITIAL STATES ─── */ /* Elements start hidden — GSAP ScrollTrigger reveals them. Gated by .js-gsap so they're visible without JavaScript. */ /* Hero elements */ html.js-gsap #hero-logo, html.js-gsap #hero-tagline, html.js-gsap #hero-ctas, html.js-gsap #hero-eyebrow, html.js-gsap #hero-scroll { opacity: 0; } /* About section containers */ html.js-gsap #about-text, html.js-gsap #about-visual .about__image-frame { opacity: 0; } /* Stat cards (separate spring animation) */ html.js-gsap .about__stat { opacity: 0; } /* Section headers */ html.js-gsap #cocktails-header, html.js-gsap #events-header, html.js-gsap #gallery-header { opacity: 0; } /* CTA band */ html.js-gsap #cta-label, html.js-gsap #cta-heading, html.js-gsap #cta-body, html.js-gsap #cta-btns { opacity: 0; } /* ─── SCROLL PROGRESS BAR ─── */ #scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-600)); transform-origin: left center; transform: scaleX(0); z-index: 9999; pointer-events: none; } /* ─── WORD SPLIT UTILITY (for heading stagger animations) ─── */ .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; } .word-wrap .word { display: inline-block; will-change: transform, opacity; } /* ─── ABOUT IMAGE PARALLAX ─── */ .about__image-frame { overflow: hidden; } .about__image-frame img { height: 110%; /* Slightly oversized — parallax won't reveal edges */ width: 100%; object-fit: cover; transform-origin: center center; will-change: transform; } /* ─── GALLERY PHOTOS: oversized for parallax (index.html atmosphere grid) ─── */ .gallery-photo { overflow: hidden; } .gallery-photo img { height: 115%; /* Oversized so parallax doesn't expose top/bottom gaps */ width: 100%; object-fit: cover; transform-origin: center bottom; will-change: transform; } /* ─── PERFORMANCE HINTS ─── */ html.js-gsap .hero__bg { will-change: transform; } html.js-gsap .nav { will-change: transform; } /* ─── REDUCED MOTION — GSAP uses matchMedia() internally, this is an extra CSS safety net ─── */ @media (prefers-reduced-motion: reduce) { html.js-gsap #hero-logo, html.js-gsap #hero-tagline, html.js-gsap #hero-ctas, html.js-gsap #hero-eyebrow, html.js-gsap #hero-scroll, html.js-gsap #about-text, html.js-gsap #about-visual .about__image-frame, html.js-gsap .about__stat, html.js-gsap #cocktails-header, html.js-gsap #events-header, html.js-gsap #gallery-header, html.js-gsap #cta-label, html.js-gsap #cta-heading, html.js-gsap #cta-body, html.js-gsap #cta-btns { opacity: 1 !important; transform: none !important; } html.js-gsap .hero__content > * { opacity: 1 !important; transform: none !important; } * { will-change: auto !important; } }