/* ========================================
   ASMAR Records — Cinematic Animations
   "Ancient Wisdom, Modern Spirit"
   ======================================== */

/* ---- Reduced Motion (accessibility-first) ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================
   HERO CINEMATIC ENTRANCE
   ============================================= */

/* Badge — slides down from above */
.js-hero-badge {
    animation: slideDown 0.6s cubic-bezier(.22,1,.36,1) forwards;
    opacity: 0;
    animation-delay: 0.15s;
}

/* Heading — fades up with subtle scale */
.js-hero-fade {
    animation: fadeUpScale 0.8s cubic-bezier(.22,1,.36,1) forwards;
    opacity: 0;
}
.js-hero-fade:nth-child(1) { animation-delay: 0.25s; }
.js-hero-fade:nth-child(2) { animation-delay: 0.45s; }
.js-hero-fade:nth-child(3) { animation-delay: 0.65s; }

/* Tagline — gentle fade */
.js-hero-tagline {
    animation: fadeUp 0.6s cubic-bezier(.22,1,.36,1) forwards;
    opacity: 0;
    animation-delay: 0.7s;
}

/* CTA Button — scales up with glow */
.js-hero-button {
    animation: scaleUpGlow 0.7s cubic-bezier(.22,1,.36,1) forwards;
    opacity: 0;
    animation-delay: 0.85s;
}

/* =============================================
   SECTION REVEALS (scroll-triggered via JS)
   ============================================= */

/* Base: visible by default (progressive enhancement) */
.js-reveal {
    opacity: 1;
    transform: none;
}

/* Only when JS adds .anim-ready do we hide + animate */
.js-reveal.anim-ready {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),
                transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal.anim-ready.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   CARD STAGGER (immediate on load, for hero area)
   ============================================= */
.js-stagger-child {
    animation: fadeUp 0.55s cubic-bezier(.22,1,.36,1) forwards;
    opacity: 0;
}
.js-stagger-child:nth-child(1) { animation-delay: .1s; }
.js-stagger-child:nth-child(2) { animation-delay: .25s; }
.js-stagger-child:nth-child(3) { animation-delay: .4s; }
.js-stagger-child:nth-child(4) { animation-delay: .5s; }
.js-stagger-child:nth-child(5) { animation-delay: .6s; }

/* =============================================
   EDITORIAL TIMELINE — scroll reveals
   ============================================= */
.editorial-article.anim-ready {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1),
                transform .65s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
}

.editorial-article.anim-ready.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   KEYFRAMES
   ============================================= */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUpScale {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUpGlow {
    from { opacity: 0; transform: scale(.9); }
    50%  { opacity: 1; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

/* =============================================
   MICRO-INTERACTIONS
   ============================================= */

/* Gold button hover glow */
.asmar-gold-button {
    transition: background .25s ease, transform .25s ease, box-shadow .3s ease;
}
.asmar-gold-button:hover {
    box-shadow: 0 0 24px rgba(214,179,106,.3), 0 20px 45px rgba(0,0,0,.35);
}

/* Outline button hover */
.asmar-outline-button {
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* Nav links — smooth color */
.asmar-nav a {
    transition: color .3s ease;
}

/* Card hover lift */
.asmar-release-card,
.asmar-article-card {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.asmar-release-card:hover,
.asmar-article-card:hover {
    transform: translateY(-3px);
}

/* Cover image zoom */
.asmar-cover img {
    transition: transform .5s ease;
}
.asmar-cover:hover img {
    transform: scale(1.04);
}