/* ===========================================================================
   Authsy FX layer — a shared, theme-adaptive motion + component skin that
   rides on top of both portal.css (blue-black / emerald) and landing.css
   (monochrome). Everything here reads the host page's own tokens so it looks
   native on every surface, and every decorative effect is switched off under
   prefers-reduced-motion. GSAP (see fx.js) drives the choreography; this file
   supplies the styling those animations paint into, plus a set of
   uiverse-flavoured loaders and button/card finishes.
   =========================================================================== */

:root {
    /* Resolve one glow accent from whichever theme is mounted. */
    --fx-glow: var(--accent, var(--lime, #34d399));
    --fx-glow-soft: color-mix(in srgb, var(--fx-glow) 22%, transparent);
    --fx-ease: cubic-bezier(.22, .8, .28, 1);
}

/* Hide-before-reveal: only when JS is live (html.fx-ready) so no-JS users and
   failed loads always see content. GSAP clears these inline. */
html.fx-ready .fx-reveal { opacity: 0; will-change: transform, opacity; }

/* ---------------------------------------------------------------------------
   Buttons — a light sweep that crosses on hover, plus a click ripple. Works
   for both .btn-primary (portal) and .btn-solid (landing) without touching
   their existing color rules.
--------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 20%,
        rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.35) 52%, transparent 80%);
    transform: translateX(-130%);
    transition: transform .55s var(--fx-ease);
    pointer-events: none;
}
.btn-primary:hover::before, .btn-solid:hover::before,
.btn-big:hover::before, .btn-huge:hover::before { transform: translateX(130%); }

/* JS-injected ripple */
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    z-index: 0;
    animation: fx-ripple .6s ease-out forwards;
}
@keyframes fx-ripple { to { transform: scale(2.4); opacity: 0; } }

/* ---------------------------------------------------------------------------
   Card pointer-sheen — a soft light follows the cursor across raised cards.
   fx.js sets --mx/--my (0–100%). Applies to portal stat/plan cards and the
   landing feature/price/step cards.
--------------------------------------------------------------------------- */
.stat-card, .plan-card, .feat, .price-card, .step, .panel,
.co-card, .auth-card {
    position: relative;
}
.stat-card::before, .plan-card::before, .co-card::before, .auth-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
        var(--fx-glow-soft), transparent 45%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
}
.stat-card:hover::before, .plan-card:hover::before,
.co-card:hover::before, .auth-card:hover::before { opacity: 1; }
.stat-card > *, .plan-card > *, .co-card > *, .auth-card > * { position: relative; z-index: 1; }

/* Tiltable cards get a smooth spring back when the pointer leaves. */
.fx-tilt { transform-style: preserve-3d; transition: transform .4s var(--fx-ease); will-change: transform; }

/* ---------------------------------------------------------------------------
   Animated gradient ring for the "hero" cards (featured stat / most-popular
   plan). A conic sheen rotates slowly behind the border.
--------------------------------------------------------------------------- */
.stat-card.featured, .plan-card.current, .price-card.pop {
    position: relative;
    isolation: isolate;
}
/* (the rotating conic ring is retired for the flat shadcn look) */
@keyframes fx-ring { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   uiverse-style loaders. Drop-in: <div class="fx-loader"></div>.
   Three flavours; all inherit the theme glow.
--------------------------------------------------------------------------- */
.fx-loader { width: 46px; height: 46px; position: relative; margin: 8px auto; }
/* orbiting conic ring */
.fx-loader::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 25%, var(--fx-glow) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: fx-spin .9s linear infinite;
}
/* pulsing core */
.fx-loader::after {
    content: '';
    position: absolute; inset: 34%;
    border-radius: 50%;
    background: var(--fx-glow);
    animation: fx-pulse 1.1s ease-in-out infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pulse { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }

/* three-dot bouncer, for inline "loading" rows */
.fx-dots { display: inline-flex; gap: 6px; align-items: center; }
.fx-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-glow); display: block; animation: fx-bounce 1s ease-in-out infinite; }
.fx-dots i:nth-child(2) { animation-delay: .15s; }
.fx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fx-bounce { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-7px); opacity: 1; } }

/* full-screen boot veil (portal / launcher first paint) */
.fx-boot {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: var(--bg, #0a0a0a);
    gap: 18px;
    transition: opacity .5s ease;
}
.fx-boot.gone { opacity: 0; pointer-events: none; }
.fx-boot .fx-boot-mark {
    font-family: var(--font-display, 'Griaste', 'Shrikhand', cursive);
    font-size: 40px; letter-spacing: .02em;
    color: var(--text, #fff);
    text-shadow: 3px 3px 0 color-mix(in srgb, var(--fx-glow) 40%, #000);
}

/* ---------------------------------------------------------------------------
   Number ticker: keeps digits from reflowing while counting up.
--------------------------------------------------------------------------- */
.fx-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Hero spotlight — a glow that tracks the pointer over the landing hero and
   any auth/checkout card screen. fx.js positions it.
--------------------------------------------------------------------------- */
.fx-spotlight {
    position: fixed;
    width: 620px; height: 620px;
    left: 0; top: 0;
    margin: -310px 0 0 -310px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--fx-glow-soft), transparent 62%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .4s ease;
    mix-blend-mode: screen;
}

/* Table rows: quiet background shift on hover (shadcn). */
.table tbody tr { transition: background .12s ease; }

/* Sidebar active-nav sliding indicator (fx.js moves .fx-nav-pill). shadcn
   secondary surface with a green rail on the leading edge. */
.sidebar-nav { position: relative; }
.fx-nav-pill {
    position: absolute;
    left: 0; top: 0;
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-3, #27272a);
    box-shadow: none;
    z-index: 0;
    pointer-events: none;
}
.fx-nav-pill::before {
    content: '';
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: var(--accent, #5ee88a);
}
.sidebar-nav .nav-item { position: relative; z-index: 1; }
/* the pill replaces the static active background — only once it exists, so a
   JS failure never leaves the active item unhighlighted. */
.sidebar-nav.fx-navpill-on .nav-item.active { background: transparent; border-color: transparent; box-shadow: none; }

/* Content lift so the pointer spotlight sits behind real content. */
.hero > * { position: relative; z-index: 1; }
.auth-card, .co-card { z-index: 1; }

/* When GSAP owns the hero intro, silence the CSS 'rise' keyframes so they
   don't double up. */
body.fx-hero-on .hero-kicker, body.fx-hero-on .hero-title,
body.fx-hero-on .squiggle, body.fx-hero-on .hero-sub, body.fx-hero-on .hero-ctas { animation: none; }

/* ---------------------------------------------------------------------------
   Reduced motion — kill every decorative animation/transition this file adds.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.fx-ready .fx-reveal { opacity: 1 !important; transform: none !important; }
    .btn::before, .stat-card::before, .plan-card::before, .co-card::before, .auth-card::before,
    .stat-card.featured::after, .fx-loader::before, .fx-loader::after, .fx-dots i,
    .fx-spotlight, .fx-boot { animation: none !important; transition: none !important; }
    .fx-spotlight { display: none; }
    .table tbody tr:hover { transform: none; }
    .fx-nav-pill { transition: none; }
    html.fx-ready .nav-item.active { background: color-mix(in srgb, var(--fx-glow) 12%, transparent); }
}