/* ============================================================
   NovaCloud — page-transitions.css  v3
   ============================================================ */

/* ── 1. VIEW TRANSITIONS API (Chrome/Edge 126+) ──────────────
   Attiva SOLO su navigazioni reali, non su refresh/load diretto.
   Il browser gestisce già questo automaticamente.              */
/* stylelint-disable-next-line at-rule-no-unknown */
@view-transition {
    navigation: auto;
}

@keyframes nc-vt-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes nc-vt-in {
    from { opacity: 0; transform: scale(0.997); }
    to   { opacity: 1; transform: scale(1); }
}

::view-transition-old(root) {
    animation: 130ms ease-in nc-vt-out;
}
::view-transition-new(root) {
    animation: 210ms cubic-bezier(0.0, 0, 0.2, 1) nc-vt-in;
}


/* ── 2. ENTRANCE ANIMATION ────────────────────────────────────
   SOLO quando html.nc-entered è presente — cioè solo quando si
   arriva cliccando un link interno. Mai su refresh o direct URL. */
@keyframes nc-main-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes nc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

html.nc-entered .main {
    animation: nc-main-in 240ms cubic-bezier(0.0, 0, 0.2, 1) both;
}
html.nc-entered .card,
html.nc-entered .invite-card {
    animation: nc-main-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.nc-entered .sb {
    animation: nc-fade-in 200ms ease both;
}


/* ── 3. PROGRESS BAR ─────────────────────────────────────── */
#nc-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #2563eb 0%, #22d3ee 50%, #2563eb 100%);
    background-size: 300% 100%;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    will-change: width, opacity;
    transition: opacity 180ms ease;
}
#nc-progress.active {
    opacity: 1;
    animation: nc-bar-flow 1.1s linear infinite;
}
#nc-progress.done {
    width: 100% !important;
    opacity: 0;
    transition: width 120ms ease, opacity 320ms ease 60ms;
}
@keyframes nc-bar-flow {
    0%   { background-position: 100% 0; }
    100% { background-position: -200% 0; }
}


/* ── 4. STAGGER ──────────────────────────────────────────── */
@keyframes nc-item-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nc-stagger {
    animation: nc-item-in 220ms cubic-bezier(0.0, 0, 0.2, 1) both;
    animation-delay: var(--nc-delay, 0ms);
}


/* ── 5. RIPPLE ───────────────────────────────────────────── */
.nc-ripple-host { position: relative; overflow: hidden; }
.nc-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: nc-ripple-anim 500ms linear;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
    will-change: transform, opacity;
}
@keyframes nc-ripple-anim {
    to { transform: scale(3.5); opacity: 0; }
}


/* ── 6. BUTTON LOADING ───────────────────────────────────── */
.nc-btn-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
    cursor: wait !important;
}
.nc-btn-loading::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 2px solid rgba(255,255,255,0.22);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nc-spin 0.6s linear infinite;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }


/* ── 7. CURSOR WAIT DURANTE NAVIGAZIONE ──────────────────── */
/* FIX #40 — su touch mobile cursor:wait è ignorato ma rallenta il rendering;
   applicato solo su dispositivi che supportano hover (mouse/trackpad) */
@media (hover: hover) {
    html.nc-navigating,
    html.nc-navigating * {
        cursor: wait !important;
    }
}


/* ── 8. NAV ITEM HOVER ───────────────────────────────────── */
.nav-it, .sb a {
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease !important;
}
.nav-it:hover  { transform: translateX(2px) !important; }
.sb a:hover    { transform: translateX(2px) !important; }
.nav-it.active, .sb a.active { transform: none !important; }


/* ── 9. FILE ITEM HOVER ──────────────────────────────────── */
.file-item {
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}
.file-item:hover {
    box-shadow: 0 2px 14px rgba(0,0,0,0.28) !important;
}


/* ── 10. TOAST ───────────────────────────────────────────── */
#nc-toasts {
    position: fixed;
    bottom: 28px; right: 24px;
    z-index: 99998;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
/* FIX #30 — toast era opaco e rompeva l'estetica glass del resto dell'app */
.nc-toast {
    background: rgba(16,29,50,0.85);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    padding: 11px 16px;
    font-size: 13px; font-weight: 600; color: #eef2ff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    pointer-events: auto;
    display: flex; align-items: center; gap: 9px;
    max-width: 300px;
    animation: nc-toast-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
    cursor: pointer;
    user-select: none;
}
.nc-toast.out { animation: nc-toast-out 0.2s ease forwards; }
.nc-toast-s   { border-left: 3px solid #10b981; }
.nc-toast-e   { border-left: 3px solid #ef4444; }
.nc-toast-i   { border-left: 3px solid #2563eb; }

@keyframes nc-toast-in  {
    from { opacity: 0; transform: translateX(14px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
@keyframes nc-toast-out {
    to { opacity: 0; transform: translateX(14px); }
}


/* ── 11. FOCUS VISIBLE ───────────────────────────────────── */
:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 5px;
}


/* ── 12. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* stylelint-disable-next-line at-rule-no-unknown */
    @view-transition { navigation: none; }
    html.nc-entered .main,
    html.nc-entered .card,
    html.nc-entered .invite-card,
    html.nc-entered .sb,
    .nc-stagger, .nc-ripple, .nc-toast {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}