/**
 * premium-effects.css — PharmAssist
 *
 * Companion styles for premium-fx.js:
 *   - Cursor-tracking spotlight on cards
 *   - View Transitions API page morphing
 *   - Aurora border utilities applied to existing elements
 */

/* ══════════════════════════════════════════════
   CURSOR-TRACKING SPOTLIGHT
   JS sets --spotlight-x / --spotlight-y per element.
   The ::before pseudo creates the radial glow.
══════════════════════════════════════════════ */

.tool-card,
.info-card,
.card,
.settings-card,
.theme-card {
    position: relative;
    isolation: isolate; /* contain the ::before within the card */
}

.tool-card::before,
.info-card::before,
.card::before,
.settings-card::before,
.theme-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(
        circle 180px at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
        rgba(var(--accent-primary-rgb, 0,212,255), 0.07) 0%,
        transparent 70%
    );
}

.tool-card:hover::before,
.info-card:hover::before,
.card:hover::before,
.settings-card:hover::before,
.theme-card:hover::before {
    opacity: 1;
}

/* Ensure card children sit above the spotlight layer */
.tool-card > *,
.info-card > *,
.card > *,
.settings-card > *,
.theme-card > * {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════
   VIEW TRANSITIONS API — page morphing styles
   Chrome/Edge/Safari TP support; Firefox graceful fallback.
══════════════════════════════════════════════ */

/* Allow the browser to capture named views */
.sidebar          { view-transition-name: sidebar; }
.app-content      { view-transition-name: app-content; }
.user-info-bar    { view-transition-name: user-info-bar; }

/* Cross-fade animation for the new page root */
::view-transition-old(root) {
    animation: 200ms ease-out both rxo-vt-fade-out;
}

::view-transition-new(root) {
    animation: 300ms ease-in  both rxo-vt-fade-in;
}

/* Sidebar and nav bar stay fixed — slide the main content */
::view-transition-old(app-content) {
    animation: 250ms var(--ease-spring, ease) both rxo-vt-slide-out;
}

::view-transition-new(app-content) {
    animation: 350ms var(--ease-spring, ease) both rxo-vt-slide-in;
}

/* Sidebar morphs in-place (no animation needed) */
::view-transition-old(sidebar),
::view-transition-new(sidebar),
::view-transition-old(user-info-bar),
::view-transition-new(user-info-bar) {
    animation: none;
    mix-blend-mode: normal;
}

@keyframes rxo-vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes rxo-vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rxo-vt-slide-out {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(-24px); opacity: 0; }
}

@keyframes rxo-vt-slide-in {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

/* ══════════════════════════════════════════════
   AURORA BORDERS — applied to existing site elements
══════════════════════════════════════════════ */

/* Inputs get aurora shimmer on focus */
.form-input,
.form-select,
.form-textarea {
    position: relative;
}

/* Widget/tool cards: aurora on hover */
.tool-card,
.info-card {
    /* aurora-border class is added by JS if not already present */
}

/* ══════════════════════════════════════════════
   3D TILT — support styles
   JS handles the transforms; CSS handles smoothing.
══════════════════════════════════════════════ */

.tool-card,
.info-card,
.theme-card {
    transform-style: preserve-3d;
    /* Smooth snap-back when mouse leaves */
    transition:
        transform      0.4s var(--ease-spring-gentle, ease),
        box-shadow     0.3s ease;
}

/* Subtle lift shadow during tilt */
.tool-card:hover,
.info-card:hover {
    box-shadow:
        var(--shadow-elevated, 0 10px 25px rgba(0,0,0,0.2)),
        0 0 0 1px rgba(var(--accent-primary-rgb, 0,212,255), 0.1);
}

/* ══════════════════════════════════════════════
   MAGNETIC BUTTON — support styles
   JS handles transforms; CSS adds cursor affordance.
══════════════════════════════════════════════ */

.btn,
.btn-save,
.card-button {
    /* cursor and will-change hint for compositor */
    will-change: transform;
    cursor: pointer;
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — all premium effects off
══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .tool-card::before,
    .info-card::before,
    .card::before,
    .settings-card::before,
    .theme-card::before {
        display: none;
    }

    .tool-card,
    .info-card,
    .theme-card {
        transform-style: flat;
        transition: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(app-content),
    ::view-transition-new(app-content) {
        animation: none;
    }
}