/* ====================================================
   LAYOUT GLOBALS
   Styles shared across all pages via layouts/app.blade.php
   and layouts/auth.blade.php.
   ==================================================== */

/* ── Page-load progress bar ── */
#dpx-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    z-index: 99999;
    background: linear-gradient(to right, #13618C, #297B35);
    box-shadow: 0 0 8px rgba(41,123,53,0.6);
    transition: width 0.25s ease, opacity 0.4s ease;
    opacity: 1;
    pointer-events: none;
}
#dpx-loader.dpx-loader--done {
    width: 100% !important;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.5s ease 0.15s;
}

/* ── Network status toast animations ── */
@keyframes ntSlideUp   { from{opacity:0;transform:translateX(-50%) translateY(-32px) scale(0.9)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes ntSlideDown { from{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} to{opacity:0;transform:translateX(-50%) translateY(-32px) scale(0.9)} }
@keyframes ntIconPop   { 0%{transform:scale(0)} 60%{transform:scale(1.25)} 80%{transform:scale(0.9)} 100%{transform:scale(1)} }
@keyframes ntCheckDraw { from{stroke-dashoffset:30} to{stroke-dashoffset:0} }
@keyframes ntRipple    { 0%{transform:scale(0);opacity:0.6} 100%{transform:scale(2.5);opacity:0} }
@keyframes ntShake     { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes ntPulseRed  { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.35)} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0)} }

#networkToast.nt-show  { animation: ntSlideUp 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
#networkToast.nt-hide  { animation: ntSlideDown 0.35s ease-in forwards; }
.nt-icon-anim          { animation: ntIconPop 0.45s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
.nt-check              { stroke-dasharray:30; stroke-dashoffset:30; animation: ntCheckDraw 0.4s ease 0.25s forwards; }
.nt-shake              { animation: ntShake 0.5s ease 0.1s; }
.nt-ripple-anim        { animation: ntRipple 0.7s ease-out forwards; }
.nt-pulse-red          { animation: ntPulseRed 1.8s ease-in-out infinite 0.5s; }

/* ── Page reveal animations ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(0.96) translateY(16px); }

[data-reveal].is-visible { opacity: 1; transform: none !important; }

[data-reveal-group] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal-group].is-visible > *:nth-child(1)  { transition-delay: 0s;     opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(2)  { transition-delay: 0.08s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(3)  { transition-delay: 0.16s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(4)  { transition-delay: 0.24s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(5)  { transition-delay: 0.32s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(6)  { transition-delay: 0.40s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(7)  { transition-delay: 0.48s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(8)  { transition-delay: 0.56s;  opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(n+9){ transition-delay: 0.60s;  opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-reveal-group] > * {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}