/* ═══════════════════════════════════════════════
   GRAIL VAULT — SHARED ANIMATIONS
   Link this in every HTML page:
   <link rel="stylesheet" href="animations.css">
   ═══════════════════════════════════════════════ */

/* ── 1. PAGE TRANSITIONS ── */
/* Wrap each page's main content in <div class="page-root"> */
.page-root {
    animation: pageSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pageSlideIn {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Going back: apply .page-exit before navigating */
.page-exit {
    animation: pageSlideOut 0.22s cubic-bezier(0.55, 0, 1, 0.45) both;
    pointer-events: none;
}
@keyframes pageSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-20px); }
}

/* ── 2. STAGGERED GRID FADE-IN ── */
/* Add .grid-item to each tile; JS sets --i (index) */
.grid-item {
    opacity: 0;
    animation: gridFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes gridFadeIn {
    from { opacity: 0; transform: scale(0.88) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 3. CATEGORY CARD BOUNCE ── */
.category-btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.18s ease,
                background 0.18s ease;
}
.category-btn:active {
    transform: scale(0.91);
}
.category-btn.selected {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.95);
}

/* ── 4. SPECIMEN CASE SHIMMER / GLOW ── */
@keyframes shimmerSweep {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.gallery-tile::after,
.specimen-case::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: shimmerSweep 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}
/* Glow pulse on hover / focus */
.gallery-tile:hover,
.specimen-case:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -10px 18px -10px rgba(0, 0, 0, 0.9),
        0 0 18px rgba(255, 255, 255, 0.08),
        0 8px 24px -6px rgba(0, 0, 0, 0.7);
    transition: box-shadow 0.3s ease;
}

/* ── 5. FIRE METER DRAMATIC REVEAL ── */
/* Applied to the arc SVG path */
#fire-arc {
    transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                stroke 0.6s ease;
}
.fire-label-reveal {
    animation: fireLabelPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 1s;
}
@keyframes fireLabelPop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
/* FIREEEEE gets an extra pulse */
.fire-FIREEEEE-pulse {
    animation: firePulse 0.8s ease 1.4s both;
}
@keyframes firePulse {
    0%   { filter: drop-shadow(0 0 4px #ff3333); }
    50%  { filter: drop-shadow(0 0 22px #ff3333) drop-shadow(0 0 40px #ff5533); }
    100% { filter: drop-shadow(0 0 12px rgba(255,51,51,0.8)) drop-shadow(0 0 24px rgba(255,51,51,0.4)); }
}

/* ── 6. VAULT IT — SAVE CONFIRMATION ── */
.vault-success-ring {
    animation: vaultRing 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vaultRing {
    from { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    to   { transform: scale(1); opacity: 1; }
}
.vault-success-check {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: vaultCheck 0.4s ease 0.35s both;
}
@keyframes vaultCheck {
    to { stroke-dashoffset: 0; }
}
.vault-success-burst {
    animation: vaultBurst 0.5s ease 0.5s both;
}
@keyframes vaultBurst {
    from { transform: scale(1); opacity: 0.8; }
    to   { transform: scale(2.2); opacity: 0; }
}
.vault-btn-success {
    animation: vaultBtnSuccess 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes vaultBtnSuccess {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

/* ── 7. MISC UTILITY ── */
.fade-up {
    animation: fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pop-in {
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
.pulse-once {
    animation: pulseOnce 0.5s ease both;
}
@keyframes pulseOnce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}