/* ============================================================
   box-reveal-animation.css — MyBest24
   Staggered "fade-and-rise" entrance for the 24-hour box grid.

   Naming convention: box-icon-reveal-animation
   All selectors and keyframes are namespaced to avoid
   conflicts with other animations in styles.css.

   Do not edit opacity or transform on .hour-block elsewhere
   while this animation is active — it will fight the keyframe.
   ============================================================ */


/* ── KEYFRAME ─────────────────────────────────────────────── */

@keyframes box-icon-reveal-animation {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── TRIGGER CLASS ────────────────────────────────────────── */
/*
   Added to #hour-grid by JS before each render.
   Each .hour-block inside reads its own --reveal-delay variable
   (set inline by JS) to stagger its entrance.

   Two speeds controlled by JS:
     Initial page load  → --reveal-interval: 40ms  (grand entrance)
     Day navigation     → --reveal-interval: 20ms  (snappy refresh)
*/

#hour-grid.boxes-revealing .hour-block {
    animation: box-icon-reveal-animation 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
}


/* ── RESERVED DIMENSIONS (prevents CLS) ──────────────────── */
/*
   Ensures the grid area is fully sized before boxes animate in,
   so nothing below the grid jumps during the reveal.
   These values mirror the .allocation-grid defaults in styles.css.
*/

#hour-grid.boxes-revealing {
    min-height: 1px; /* grid is already sized; this is a CLS safety net */
}


/* ── REDUCED MOTION ───────────────────────────────────────── */
/*
   Respects the OS-level "Reduce Motion" accessibility setting.
   Boxes still appear, just instantly.
*/

@media (prefers-reduced-motion: reduce) {
    #hour-grid.boxes-revealing .hour-block {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ============================================================
   FREE ICON PULSE ANIMATION
   Plays on [data-type="FREE"] blocks when the user picks a
   new free icon from the hamburger menu.
   Triggered by JS: triggerFreeIconAnimation() in app.js.
   ============================================================ */

@keyframes free-icon-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    30%  { transform: scale(1.12); opacity: 0.85; }
    60%  { transform: scale(0.96); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.hour-block.free-icon-pulse {
    animation: free-icon-pulse 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--free-pulse-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .hour-block.free-icon-pulse {
        animation: none;
    }
}