/* =============================================
   COMBAT ANIMATIONS
   All animations are triggered via JS (IntersectionObserver).
   Elements with [data-anim] start hidden and animate
   when .is-visible is added.
   ============================================= */

@keyframes strike-in {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes scale-reveal {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes clip-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0% 0 0); }
}

@keyframes draw-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes number-pop {
    0% { opacity: 0; transform: scale(0.5) translateY(10px); }
    60% { transform: scale(1.08) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes diagonal-reveal {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes gold-shimmer {
    0% { box-shadow: 0 0 0 rgba(234, 179, 8, 0); }
    50% { box-shadow: 0 0 40px rgba(234, 179, 8, 0.1); }
    100% { box-shadow: 0 0 60px rgba(234, 179, 8, 0.05); }
}

/* When JS adds .is-visible, run the appropriate animation */
[data-anim="strike-in"].is-visible {
    animation: strike-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="fade-up"].is-visible {
    animation: fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="scale-reveal"].is-visible {
    animation: scale-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="clip-reveal"].is-visible {
    opacity: 1;
    animation: clip-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="draw-line"].is-visible {
    opacity: 1;
    transform-origin: left;
    animation: draw-line 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="number-pop"].is-visible {
    animation: number-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="diagonal-reveal"].is-visible {
    opacity: 1;
    animation: diagonal-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

[data-anim="gold-shimmer"].is-visible {
    animation: gold-shimmer 2s ease-in-out 0.3s both;
}

/* =============================================
   HERO EFFECTS
   ============================================= */

/* Octagon wireframe — slow rotate + draw-in */
@keyframes octagon-draw {
    from { stroke-dashoffset: 600; opacity: 0; }
    20% { opacity: 0.03; }
    to { stroke-dashoffset: 0; opacity: 0.03; }
}

@keyframes octagon-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes octagon-glow {
    0%, 100% { stroke: rgba(255, 255, 255, 0.6); }
    50% { stroke: rgba(229, 62, 69, 0.8); }
}

.hero-octagon {
    stroke-dasharray: 600;
    animation: octagon-draw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both,
               octagon-rotate 120s linear infinite,
               octagon-glow 8s ease-in-out 3s infinite;
}

/* Left accent bar glow pulse */
@keyframes accent-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(229, 62, 69, 0.2), 0 0 20px rgba(229, 62, 69, 0); }
    50% { box-shadow: 0 0 12px rgba(229, 62, 69, 0.5), 0 0 40px rgba(229, 62, 69, 0.15); }
}

.hero-accent-glow {
    animation: accent-glow-pulse 3s ease-in-out 1.5s infinite;
}