/* =====================================================================
   RIA — UX ANIMATIONS
   Additive layer on top of style.css. Loaded on the landing page and on
   any authed page that wants the upgraded bell/toast polish.

   Everything in here respects prefers-reduced-motion: if the user opted
   out, we collapse the animations to no-ops so the UI stays usable.
   ===================================================================== */

/* ── Landing: hero entrance ───────────────────────────────────────────── */

.hero h1,
.hero p,
.hero .hero-cta-row,
.hero .scroll-indicator {
    opacity: 0;
    transform: translateY(18px);
    animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero h1              { animation-delay: 0.05s; }
.hero p               { animation-delay: 0.20s; }
.hero .hero-cta-row   { animation-delay: 0.38s; }
.hero .scroll-indicator {
    animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.60s forwards,
               floaty 2.8s ease-in-out 1.6s infinite;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Gradient text shimmer — pans the gradient slowly across the headline. */
.hero h1 {
    background-size: 180% 180%;
    animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards,
               gradientPan 8s ease-in-out 1.2s infinite;
}
@keyframes gradientPan {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Aurora: the existing .hero::before/::after blobs breathe and drift
   slowly so the landing feels alive without being distracting. */
.hero::before {
    animation: auroraPulse 9s ease-in-out infinite;
}
.hero::after {
    animation: auroraDrift 14s ease-in-out infinite;
}
@keyframes auroraPulse {
    0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}
@keyframes auroraDrift {
    0%, 100% { transform: translate(0, 0);   opacity: 0.85; }
    50%      { transform: translate(-30px, 24px); opacity: 1; }
}

/* ── Landing: feature-card reveal (scroll-triggered) ─────────────────── */
/* JS adds .is-revealed when the card enters the viewport; until then we
   hold it invisible. The CSS .fade-in-up / .delay-* classes that used to
   live on these cards keep working but we layer a scroll-linked effect
   on top so the grid animates as you scroll, not all on page load. */

.feature-card[data-reveal] {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Tilt-on-hover: very subtle 3D lift. */
.feature-card {
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
}
.feature-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 24px 50px -18px rgba(139, 92, 246, 0.35),
                0 10px 20px -10px rgba(0, 0, 0, 0.25);
}
.feature-card .icon-box {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover .icon-box {
    transform: scale(1.08) rotate(-4deg);
}

/* ── CTA buttons: soft pulse on the primary gradient button ───────────── */

.btn.btn-gradient {
    position: relative;
    overflow: hidden;
}
.btn.btn-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}
.btn.btn-gradient:hover::after {
    animation: btnSheen 0.9s ease-out forwards;
}
@keyframes btnSheen {
    to { transform: translateX(120%); }
}

/* ── Notifications bell: wiggle when a new unread arrives ─────────────── */

.ria-bell-btn.is-wiggling svg {
    transform-origin: 50% 2px;
    animation: bellWiggle 0.9s ease-in-out;
}
@keyframes bellWiggle {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(-14deg); }
    30%  { transform: rotate(12deg); }
    45%  { transform: rotate(-8deg); }
    60%  { transform: rotate(6deg); }
    75%  { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}

/* Count badge: scale-in when it transitions from hidden → visible. */
.ria-bell-count:not([hidden]) {
    animation: badgePop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); }
}

/* Bell dropdown list items stagger in. */
.ria-bell-dropdown .ria-bell-item {
    animation: bellItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ria-bell-dropdown .ria-bell-item:nth-child(1) { animation-delay: 0.02s; }
.ria-bell-dropdown .ria-bell-item:nth-child(2) { animation-delay: 0.06s; }
.ria-bell-dropdown .ria-bell-item:nth-child(3) { animation-delay: 0.10s; }
.ria-bell-dropdown .ria-bell-item:nth-child(4) { animation-delay: 0.14s; }
.ria-bell-dropdown .ria-bell-item:nth-child(5) { animation-delay: 0.18s; }
.ria-bell-dropdown .ria-bell-item:nth-child(n+6) { animation-delay: 0.22s; }
@keyframes bellItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Toast: richer entrance/exit + auto-dismiss progress bar ──────────── */

.toast {
    animation: toastSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
@keyframes toastSlide {
    0%   { opacity: 0; transform: translateX(28px) scale(0.96); }
    60%  { opacity: 1; transform: translateX(-4px) scale(1.015); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

.toast.hiding {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes toastSlideOut {
    to { opacity: 0; transform: translateX(24px) scale(0.97); }
}

/* Thin progress bar at the bottom: JS sets --toast-duration so we can
   animate width from 100% → 0 linearly. If duration is 0 (sticky toast)
   the bar stays hidden. */
.toast .toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.45;
    width: 100%;
    transform-origin: left center;
    animation: toastProgress var(--toast-duration, 4s) linear forwards;
}
.toast-success .toast-progress { color: var(--c-success-400); }
.toast-error   .toast-progress { color: var(--c-danger-400); }
.toast-warning .toast-progress { color: var(--c-warning-400, #f59e0b); }
.toast-info    .toast-progress { color: var(--c-violet-400); }
@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Reduced motion: collapse every dynamic animation ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero h1,
    .hero p,
    .hero .hero-cta-row,
    .hero .scroll-indicator,
    .hero::before,
    .hero::after,
    .feature-card,
    .feature-card[data-reveal],
    .ria-bell-btn.is-wiggling svg,
    .ria-bell-count,
    .ria-bell-dropdown .ria-bell-item,
    .toast,
    .toast .toast-progress,
    .btn.btn-gradient::after {
        animation: none !important;
        transition: none !important;
    }
    .feature-card[data-reveal] { opacity: 1 !important; transform: none !important; }
    .hero h1, .hero p, .hero .hero-cta-row, .hero .scroll-indicator { opacity: 1 !important; transform: none !important; }
}