/* Small extras on top of the compiled Tailwind file (app.css). */

/* Reveal-on-scroll (replaces framer-motion whileInView) */
[data-reveal] { opacity: 0; transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; }
[data-reveal="up"]    { transform: translateY(24px); }
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Same as the React app: no scroll animations on small screens */
@media (max-width: 767px) { [data-reveal] { opacity: 1; transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { [data-reveal], .hero-anim { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } }

/* Hero entrance */
.hero-anim { opacity: 0; transform: translateY(20px); animation: hpHeroIn .8s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes hpHeroIn { to { opacity: 1; transform: none; } }

/* Exit-intent modal pop */
.hp-pop { animation: hpPop .25s ease-out; }
@keyframes hpPop { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }

/* Custom select arrow */
.hp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* Toasts */
.hp-toasts { position: fixed; z-index: 200; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; max-width: 420px; width: calc(100% - 2rem); pointer-events: none; }
.hp-toast { pointer-events: auto; padding: 1rem 1.25rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.2); animation: hpToastIn .3s ease-out; transition: opacity .4s, transform .4s; }
.hp-toast-success { background: #1f7a4d; }
.hp-toast-error { background: #d83b2c; }
.hp-toast-out { opacity: 0; transform: translateX(20px); }
@keyframes hpToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }