/* ============================================================ Page Transitions + GSAP ScrollTrigger Helpers ============================================================ */ /* ========================================================== 1. Cross-document View Transitions (Chrome 126+, Edge 126+, Safari 18+) Browser captures old page → navigates → captures new page → cross-fades between them. No overlay, no black screen. ========================================================== */ /* Disabled: all browsers now use the SPA/GSAP hero sweep instead. @view-transition { navigation: auto; } */ ::view-transition-old(root) { animation: vt-page-out 0.35s cubic-bezier(.4, 0, .6, 1) forwards; } ::view-transition-new(root) { animation: vt-page-in 0.4s cubic-bezier(0, 0, .2, 1) forwards; } @keyframes vt-page-out { to { opacity: 0; transform: scale(0.96); filter: blur(3px); } } @keyframes vt-page-in { from { opacity: 0; transform: translateY(15px); } } /* ========================================================== 2. Overlay (legacy – hidden by JS via display:none) Non-VT browsers now use SPA-style fetch + crossfade instead of an overlay. CSS kept for backwards compat. ========================================================== */ .page-transition { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(ellipse at 50% 40%, rgba(0, 76, 106, .18) 0%, transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(252, 202, 115, .10) 0%, transparent 50%), #0a0a0a; pointer-events: none; display: flex; align-items: center; justify-content: center; } /* Centred logo watermark – static opacity, no animation (animation would restart on every page load and blink) */ .page-transition::after { content: ''; width: 180px; height: 90px; background: url(../img/Logo_schwarz_G_S.png) center / contain no-repeat; opacity: .2; } /* After reveal: overlay hidden */ .page-transition.is-hidden { opacity: 0; visibility: hidden; } /* ========================================================== 3. Hero entrance initial states (non-VT browsers only) Inline script adds .no-vt to before first render. Hero bg stays visible so the user never sees a black flash; only text/breadcrumb are hidden until the JS entrance animation runs. ========================================================== */ main:not(.is-revealed) .page-hero__content h1 { opacity: 0; transform: translateY(30px); } main:not(.is-revealed) .page-hero__content p { opacity: 0; transform: translateY(20px); } main:not(.is-revealed) .breadcrumb { opacity: 0; } /* ========================================================== 4. Hero scan-line sweep element Golden glow line that sweeps across the hero image. ========================================================== */ .hero-sweep { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, transparent 5%, rgba(252, 202, 115, .6) 25%, rgba(255, 255, 255, .9) 50%, rgba(252, 202, 115, .6) 75%, transparent 95%); box-shadow: 0 0 15px 5px rgba(252, 202, 115, .3), 0 0 40px 12px rgba(252, 202, 115, .12); } /* ========================================================== 5. GSAP reveal states ========================================================== */ .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================== 6. Reduced motion ========================================================== */ @media (prefers-reduced-motion: reduce) { /* View Transitions: instant */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms !important; } /* Overlay fallback: instant */ .page-transition { transition: opacity .01ms !important; will-change: auto; } .page-transition.is-hidden { opacity: 0; transform: none; } }