/* ═════════════════════════════════════════════════════════════
   Brekiz — Animations façon application de jeu mobile
   Chargé après officebreak.css et dark-mode.css
   ═════════════════════════════════════════════════════════════ */

/* === Badge "messages non lus" === */
.brekiz-unread-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #dc2626;
    color: #fff;
    font-size:12px; font-weight: 800; line-height: 18px;
    border-radius: 9px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(220,38,38,.55);
    animation: brekiz-pulse-badge 2s ease-in-out infinite;
    pointer-events: none;
}
.brekiz-unread-badge-inline {
    position: static;
    display: inline-block;
    margin-left: 6px;
    box-shadow: none;
    vertical-align: middle;
}
@keyframes brekiz-pulse-badge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* === Boutons : ripple + hover scale === */
.btn, button.btn, a.btn {
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    will-change: transform;
}
.btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.btn:active:not(:disabled) {
    transform: scale(.97);
}
.brekiz-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.55);
    pointer-events: none;
    animation: brekiz-ripple-anim .55s ease-out;
}
@keyframes brekiz-ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* === Cartes : hover scale + glow === */
.card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.card.brekiz-rarity-common:hover    { box-shadow: 0 6px 18px rgba(148,163,184,.45); }
.card.brekiz-rarity-rare:hover      { box-shadow: 0 6px 18px rgba(59,130,246,.55); }
.card.brekiz-rarity-epic:hover      { box-shadow: 0 6px 18px rgba(168,85,247,.55); }
.card.brekiz-rarity-legendary:hover { box-shadow: 0 6px 18px rgba(234,179,8,.65); }

/* === Apparition cartes : fade-in stagger === */
.brekiz-fade-in,
.row > .card,
.col > .card {
    animation: brekiz-fade-in .4s ease-out both;
}
@keyframes brekiz-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger via custom property index */
[data-stagger="0"] { animation-delay: 0s; }
[data-stagger="1"] { animation-delay: .05s; }
[data-stagger="2"] { animation-delay: .10s; }
[data-stagger="3"] { animation-delay: .15s; }
[data-stagger="4"] { animation-delay: .20s; }
[data-stagger="5"] { animation-delay: .25s; }
[data-stagger="6"] { animation-delay: .30s; }
[data-stagger="7"] { animation-delay: .35s; }

/* === Toast slide-down bounce === */
.ob-toast {
    animation: brekiz-toast-in .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes brekiz-toast-in {
    0%   { transform: translateY(-32px) scale(.9); opacity: 0; }
    60%  { transform: translateY(4px)  scale(1.04); opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* === Spinner loading-state pour boutons === */
.btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: brekiz-spin .7s linear infinite;
}
@keyframes brekiz-spin { to { transform: rotate(360deg); } }

/* === Confetti CSS-only === */
.brekiz-confetti {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.brekiz-confetti span {
    position: absolute;
    width: 8px; height: 14px;
    top: -20px;
    opacity: .9;
    animation: brekiz-confetti-fall 1.1s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes brekiz-confetti-fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* === Level up : étoiles éclatées === */
.brekiz-levelup-stars {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
}
.brekiz-levelup-stars span {
    position: absolute;
    font-size: 28px;
    animation: brekiz-star-burst 1.2s ease-out forwards;
}
@keyframes brekiz-star-burst {
    0%   { transform: translate(0,0) scale(.4); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; }
}

/* === Page transitions (View Transitions API) === */
@supports (view-transition-name: root) {
    ::view-transition-old(root) { animation: brekiz-vt-out .18s ease-out; }
    ::view-transition-new(root) { animation: brekiz-vt-in  .25s ease-out; }
}
@keyframes brekiz-vt-out { to { opacity: 0; } }
@keyframes brekiz-vt-in  { from { opacity: 0; } }

/* === Logo joyous bounce easter egg === */
.brekiz-logo-bounce {
    animation: brekiz-bounce-joy .9s cubic-bezier(.36,1.56,.64,1) both;
}
@keyframes brekiz-bounce-joy {
    0%   { transform: scale(1)    rotate(0); }
    25%  { transform: scale(1.25) rotate(-12deg); }
    50%  { transform: scale(.92)  rotate(8deg); }
    75%  { transform: scale(1.12) rotate(-4deg); }
    100% { transform: scale(1)    rotate(0); }
}

/* === Respect prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}