/* ===================================================================== MALGOODI — cinematic.css The day→night atmosphere layer and richer motion. Everything here sits behind the content (fixed, z-index -2/-1) or as non-interactive overlays, so the PDF composition is never disturbed. =====================================================================*/ /* The sky gradient replaces the flat body colour, but the paper texture on still shows over it via the content layers. Sky is fixed & full-screen. */ .sky-layer { position: fixed; inset: 0; z-index: -3; background: linear-gradient(180deg, #f6ede0 0%, #efe6d8 100%); transition: background .3s linear; pointer-events: none; } /* Travelling sun / moon — lives in the open sky at the top-right, where the hero illustration fades into the parchment, so a soft sunrise is visible. */ .sun { position: fixed; right: 18vw; top: 12%; width: clamp(140px, 18vw, 260px); height: clamp(140px, 18vw, 260px); border-radius: 50%; background: radial-gradient(circle, rgba(255,238,190,.95), transparent 70%); filter: blur(12px); z-index: -2; pointer-events: none; will-change: top, opacity, filter; } /* Night scrim + vignette — DISABLED (no darkening from the edges). */ .night-scrim { display: none !important; } /* Drifting dust motes / fireflies (subtle, day only) */ .motes { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; transition: opacity .8s ease; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,250,235,.7), transparent), radial-gradient(2px 2px at 70% 60%, rgba(255,250,235,.55), transparent), radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,250,235,.6), transparent), radial-gradient(1.5px 1.5px at 85% 25%, rgba(255,250,235,.5), transparent), radial-gradient(2px 2px at 55% 15%, rgba(255,250,235,.5), transparent), radial-gradient(1.5px 1.5px at 10% 65%, rgba(255,250,235,.55), transparent); background-size: 100% 100%; animation: moteDrift 26s ease-in-out infinite alternate; } @keyframes moteDrift { from { transform: translateY(0); background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { transform: translateY(-14px); background-position: 10px -20px, -14px 16px, 8px -12px, -10px 10px, 6px -18px, -8px 14px; } } /* Flock of drifting birds */ .flock { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .bird { position: absolute; left: -60px; transform: scale(var(--s, 1)); animation: birdCross var(--dur, 18s) linear forwards, birdFlap .5s ease-in-out infinite; opacity: .8; } @keyframes birdCross { from { transform: translateX(-8vw) translateY(0) scale(var(--s,1)); } to { transform: translateX(112vw) translateY(-6vh) scale(var(--s,1)); } } @keyframes birdFlap { 0%,100% { filter: none; } 50% { transform: translateY(-2px); } } /* --------------------------------------------------------------------- RICHER CONTENT MOTION (layers over the base animations.css) ---------------------------------------------------------------------*/ /* Cinematic hero title: rise + slight blur clearing */ .hero-title.reveal-hero { animation: heroTitleIn 1.15s cubic-bezier(.19,1,.22,1) forwards; } @keyframes heroTitleIn { 0% { opacity: 0; transform: translateY(28px); filter: blur(8px); letter-spacing: .04em; } 100% { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: -0.01em; } } /* A light sweep glides across the wordmark once on load */ .hero-wordmark { position: relative; } .hero .hero-content { position: relative; } .hero-wordmark-shine { position: absolute; top: 0; left: 0; width: clamp(220px, 26vw, 340px); height: 90px; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); mix-blend-mode: overlay; transform: translateX(-120%); animation: shine 1.4s ease 1.1s 1; opacity: 0; } @keyframes shine { 0% { transform: translateX(-120%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(160%); opacity: 0; } } /* Give the reveal-on-scroll a touch more travel + a soft blur clear */ .reveal-on-scroll { filter: blur(6px); } .reveal-on-scroll.in-view { filter: blur(0); } /* Price box: a warm glow pulse when it enters */ .price-box.in-view { animation: priceGlow 1.6s ease .2s 1; } @keyframes priceGlow { 0% { box-shadow: 0 0 0 0 rgba(197,144,73,0); } 40% { box-shadow: 0 0 60px 6px rgba(197,144,73,.5); } 100% { box-shadow: 0 0 0 0 rgba(197,144,73,0); } } /* Ticket: gentle floating once revealed (very subtle) */ .ticket.in-view { animation: ticketFloat 6s ease-in-out 1s infinite; } @keyframes ticketFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Stars — DISABLED (the sky no longer darkens to night). */ .stars { display: none !important; } /* --------------------------------------------------------------------- REDUCED MOTION — lighting still shifts (it's meaningful), but nothing drifts, flaps, floats, pulses or sweeps. ---------------------------------------------------------------------*/ @media (prefers-reduced-motion: reduce) { .motes, .flock, .bird, .hero-wordmark-shine, .price-box.in-view, .ticket.in-view { animation: none !important; } .motes { opacity: .3; } .hero-title.reveal-hero { animation: none !important; filter: none; opacity: 1; transform: none; } .reveal-on-scroll { filter: none; } .sun { transition: none; } }