/* ============================================================ Ashish & Priyanshi — Motion layer (additive, JS-guarded) Loaded after styles.css. animations.js adds `.anim-ready` to and a `data-role` to each layer; only then do the hidden/initial states below apply. If the script never runs (or motion is reduced), the invitation renders exactly as it did before — no blank screen. Property budget: transform / opacity / filter only. Reveal owns opacity (+transform briefly); the looped ambient animation is delayed past the reveal so the two never fight for `transform`. Lights/names use `filter`, which composes freely with everything else. ============================================================ */ :root { --ease-rev: cubic-bezier(0.16, 1, 0.3, 1); --rev-dur: 0.9s; --rev-dur-hero: 1.2s; --bob-dur: 5.6s; --sway-dur: 6.4s; --flicker-dur: 3.4s; --glow-dur: 4.6s; } /* Hidden until observed (only once JS has tagged the layers). */ html.anim-ready .invite .ly[data-role] { opacity: 0; } /* Background / texture — fade only, so `transform` stays at the PSD default and registered layer seams never shift. */ html.anim-ready .ly[data-role="bg"].is-in { animation: ap-fade var(--rev-dur) ease var(--d, 0ms) both; } /* Solid objects (pots, vases, mandap, arch, drum…) — quiet settle. */ html.anim-ready .ly[data-role="object"].is-in { animation: ap-settle var(--rev-dur) var(--ease-rev) var(--d, 0ms) both; } /* Readable content (titles, dates, venue, blessings, RSVP…) — fade-rise. */ html.anim-ready .ly[data-role="content"].is-in { animation: ap-rise var(--rev-dur) var(--ease-rev) var(--d, 0ms) both; } /* Hero names — a taller, earned rise, then a slow warm glow. */ html.anim-ready .ly[data-role="name"].is-in { animation: ap-rise-hero var(--rev-dur-hero) var(--ease-rev) var(--d, 0ms) both, ap-name-glow var(--glow-dur) ease-in-out calc(var(--d, 0ms) + var(--rev-dur-hero)) infinite; } /* Figures (couple, illustrations) — settle, then a gentle vertical bob. */ html.anim-ready .ly[data-role="figure"].is-in { animation: ap-settle var(--rev-dur) var(--ease-rev) var(--d, 0ms) both, ap-bob var(--bob-dur) ease-in-out calc(var(--d, 0ms) + var(--rev-dur)) infinite; } /* Decor (florals, garlands, curtains, leaves) — settle, then sway. */ html.anim-ready .ly[data-role="decor"].is-in { transform-origin: 50% 92%; animation: ap-settle var(--rev-dur) var(--ease-rev) var(--d, 0ms) both, ap-sway var(--sway-dur) ease-in-out calc(var(--d, 0ms) + var(--rev-dur)) infinite; } /* Lights (candles, sparkles) — settle, then a warm flicker (filter only). */ html.anim-ready .ly[data-role="light"].is-in { animation: ap-settle var(--rev-dur) var(--ease-rev) var(--d, 0ms) both, ap-flicker var(--flicker-dur) ease-in-out calc(var(--d, 0ms) + var(--rev-dur)) infinite; } @keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ap-settle { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes ap-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes ap-rise-hero { from { opacity: 0; transform: translate3d(0, 44px, 0) scale(0.93); } 60% { opacity: 1; } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes ap-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } } @keyframes ap-sway { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } } @keyframes ap-flicker { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 190, 120, 0)); } 45% { filter: brightness(1.22) drop-shadow(0 0 7px rgba(255, 188, 116, 0.85)); } 70% { filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 188, 116, 0.5)); } } @keyframes ap-name-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(201, 120, 92, 0)); } 50% { filter: drop-shadow(0 1px 10px rgba(201, 120, 92, 0.55)); } } @keyframes ap-pulse { 0%, 100% { transform: translateZ(0) scale(1); } 50% { transform: translateZ(0) scale(1.045); } } /* ---- One-time bloom of light behind the couple's names ---- */ .ap-bloom { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(255, 232, 200, 0.85), rgba(255, 208, 170, 0.35) 45%, transparent 70% ); mix-blend-mode: screen; opacity: 0; transform: scale(0.4); animation: ap-bloom 1.9s ease-out forwards; } @keyframes ap-bloom { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.55); } } /* ---- Drifting rose petals (canvas overlay) ---- */ .ap-petals { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; opacity: 0.55; } /* ---- Wedding ceremony fireworks (stage-local canvas) ---- */ .stage--wedding .ap-wedding-fireworks { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 1; mix-blend-mode: screen; filter: saturate(1.42) brightness(1.16); } /* ---- Scroll-progress thread ---- */ .ap-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #c79a4e, #e8c887 45%, #c1446c); box-shadow: 0 0 8px rgba(199, 154, 78, 0.55); } /* ---- Opening envelope video (full-screen intro) ---- Covers the screen by default so there is no flash before animations.js wires it up;