/* Waptry — Hero right-side multi-category showcase animation. * * Pure CSS keyframe loop (no video, no canvas/WebGL) driving a 5-category * "Explore -> Visualize -> Try -> Shop" cross-fade around the central * brand hub in HeroShowcase.tsx. Kept in its own file (not style.css) so * it only loads on pages that render #hero-showcase (currently just the * homepage), and is trivially removable without touching the dashboard's * existing .analytics-range-btn rules in style.css. * * Total loop: 15s, 5 categories x 3s each, matching the brief's 12-15s * cadence. Each card fades/scales in, holds "active" (larger, glowing * border), then fades back — never more than one card fully active at a * time, so it reads as a single continuous story rather than clutter. */ #hero-showcase { --wap-cycle: 15s; } /* ------------------------------------------------------------------ */ /* Central hub — gentle breathing glow, always present */ /* ------------------------------------------------------------------ */ .hero-showcase-hub { animation: wap-hub-glow 3.4s ease-in-out infinite; } @keyframes wap-hub-glow { 0%, 100% { box-shadow: 0 20px 60px -10px rgba(10, 23, 48, 0.18), 0 0 0 0 rgba(21, 193, 147, 0.0); } 50% { box-shadow: 0 20px 60px -10px rgba(10, 23, 48, 0.18), 0 0 32px 4px rgba(21, 193, 147, 0.25); } } .hero-showcase-flow { animation: wap-flow-fade 15s ease-in-out infinite; } @keyframes wap-flow-fade { 0%, 96%, 100% { opacity: 1; } 48%, 52% { opacity: 0.55; } } /* ------------------------------------------------------------------ */ /* Orbit ring slow spin */ /* ------------------------------------------------------------------ */ .animate-spin-slow { animation: wap-spin 40s linear infinite; } @keyframes wap-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ */ /* Category cards — 5 fixed orbital positions (desktop/tablet). */ /* Each card animates through: hidden -> enter -> ACTIVE (larger, */ /* glow) -> exit -> hidden, using the SAME keyframe shape but a */ /* per-card `animation-delay` so exactly one card is "active" at once */ /* (3s slot each x 5 = 15s full loop). */ /* ------------------------------------------------------------------ */ .hero-showcase-card { opacity: 0; animation: wap-card-cycle 15s ease-in-out infinite; will-change: opacity, transform; } /* Base (small/inactive) resting position per slot — cards sit around the hub roughly at the 5 points of a star, tucked well inside the square viewport so nothing clips on smaller screens. */ .hero-showcase-card-0 { top: 3%; left: 6%; transform: scale(0.82); } .hero-showcase-card-1 { top: 4%; right: 4%; transform: scale(0.82); } .hero-showcase-card-2 { bottom: 20%; right: 0%; transform: scale(0.82); } .hero-showcase-card-3 { bottom: 20%; left: 0%; transform: scale(0.82); } .hero-showcase-card-4 { top: 38%; left: 50%; margin-left: -21%; transform: scale(0.82); } .hero-showcase-card-0 { animation-delay: 0s; } .hero-showcase-card-1 { animation-delay: -12s; } /* 15 - 3 */ .hero-showcase-card-2 { animation-delay: -9s; } /* 15 - 6 */ .hero-showcase-card-3 { animation-delay: -6s; } /* 15 - 9 */ .hero-showcase-card-4 { animation-delay: -3s; } /* 15 - 12 */ /* One shared keyframe: each card is idle/dim for most of the loop and gets exactly one 3s "hero" window (scaled up, full opacity, subtle lift) at its assigned delay. Percentages are relative to the full 15s timeline for card-0; the negative animation-delay above shifts each subsequent card's window earlier by 3s so they interleave. */ @keyframes wap-card-cycle { 0% { opacity: 0; transform: scale(0.78) translateY(6px); } 4% { opacity: 0.55; transform: scale(0.86) translateY(0); } 10% { opacity: 1; transform: scale(1.08) translateY(-4px); z-index: 15; } 20% { opacity: 1; transform: scale(1.08) translateY(-4px); z-index: 15; } 26% { opacity: 0.55; transform: scale(0.86) translateY(0); z-index: 10; } 33% { opacity: 0; transform: scale(0.78) translateY(6px); z-index: 10; } 100% { opacity: 0; transform: scale(0.78) translateY(6px); } } /* Active-window glow ring, synced to the same schedule via a second layered box-shadow animation on the card border (kept separate from the transform keyframe above for clarity). */ .hero-showcase-card { animation-name: wap-card-cycle, wap-card-glow; animation-duration: 15s, 15s; animation-timing-function: ease-in-out, ease-in-out; animation-iteration-count: infinite, infinite; } .hero-showcase-card-0 { animation-delay: 0s, 0s; } .hero-showcase-card-1 { animation-delay: -12s, -12s; } .hero-showcase-card-2 { animation-delay: -9s, -9s; } .hero-showcase-card-3 { animation-delay: -6s, -6s; } .hero-showcase-card-4 { animation-delay: -3s, -3s; } @keyframes wap-card-glow { 0%, 4% { box-shadow: 0 8px 32px 0 rgba(10, 23, 48, 0.08); border-color: rgba(255,255,255,0.6); } 10%, 20% { box-shadow: 0 20px 45px -8px rgba(21, 193, 147, 0.28), 0 0 0 1px rgba(21,193,147,0.25); border-color: rgba(21,193,147,0.45); } 26% { box-shadow: 0 8px 32px 0 rgba(10, 23, 48, 0.08); border-color: rgba(255,255,255,0.6); } 100% { box-shadow: 0 8px 32px 0 rgba(10, 23, 48, 0.08); border-color: rgba(255,255,255,0.6); } } /* The "cue" chip (View in Your Room / AI Try-On / etc.) fades in only during the card's active window so it doesn't read as clutter while the card is small/idle. */ .hero-showcase-cue { opacity: 0; transition: opacity 0.4s ease; } .hero-showcase-card { animation-fill-mode: none; } .hero-showcase-card-0 .hero-showcase-cue { animation: wap-cue-fade 15s ease-in-out infinite; animation-delay: 0s; } .hero-showcase-card-1 .hero-showcase-cue { animation: wap-cue-fade 15s ease-in-out infinite; animation-delay: -12s; } .hero-showcase-card-2 .hero-showcase-cue { animation: wap-cue-fade 15s ease-in-out infinite; animation-delay: -9s; } .hero-showcase-card-3 .hero-showcase-cue { animation: wap-cue-fade 15s ease-in-out infinite; animation-delay: -6s; } .hero-showcase-card-4 .hero-showcase-cue { animation: wap-cue-fade 15s ease-in-out infinite; animation-delay: -3s; } @keyframes wap-cue-fade { 0%, 8% { opacity: 0; } 11%, 19% { opacity: 1; } 23%, 100% { opacity: 0; } } /* ------------------------------------------------------------------ */ /* Progress dots — filled in in sync via hero-showcase.js; pure CSS */ /* fallback keeps them animating even if JS never runs. */ /* ------------------------------------------------------------------ */ .hero-showcase-dot { transition: background-color 0.4s ease, transform 0.4s ease; } .hero-showcase-dot.active { background-color: #15c193; transform: scale(1.5); } /* ------------------------------------------------------------------ */ /* Mobile tightening — keep every card comfortably inside the square */ /* viewport on small screens (this only adjusts scale/position of the */ /* NEW showcase; it does not touch any other section's responsive */ /* rules). */ /* ------------------------------------------------------------------ */ @media (max-width: 640px) { .hero-showcase-card-0 { top: 1%; left: 2%; } .hero-showcase-card-1 { top: 2%; right: 1%; } .hero-showcase-card-2 { bottom: 16%; right: -2%; } .hero-showcase-card-3 { bottom: 16%; left: -2%; } .hero-showcase-card-4 { top: 40%; } } /* ------------------------------------------------------------------ */ /* Respect prefers-reduced-motion: freeze on the Furniture card */ /* (first, largest-category) instead of animating, per accessibility */ /* best practice — HeroShowcase.tsx's