/*
 * animations.css — AmericanBond Public Site
 * Loaded only when UI.AnimationsEnabled = true
 */

/* ══════════════════════════════════════════════════════════════
   1. CURSOR — standard OS cursor (no custom cursor)
   ══════════════════════════════════════════════════════════════ */
/* Normal cursor is used — no overrides needed */

/* ══════════════════════════════════════════════════════════════
   2. PAGE-LOAD ENTRANCE — targets common existing HTML elements
   ══════════════════════════════════════════════════════════════ */

@keyframes ab-fade-up {
    from { opacity: 0; transform: translateY(28px); filter: blur(2px); }
    to   { opacity: 1; transform: none;             filter: blur(0);   }
}
@keyframes ab-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

main h1,
.cap__hero h1,
.cpx__hero h1 {
    animation: ab-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.05s;
}
main h1 + p,
.cap__hero p,
.cpx__hero p {
    animation: ab-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.18s;
}
.cap__hero-breadcrumb,
.cpx__sect-eyebrow,
.cpx__feats-hdr {
    animation: ab-fade-in 0.5s ease both;
}

/* ══════════════════════════════════════════════════════════════
   3. SCROLL-REVEAL base classes (assigned by JS)
   ══════════════════════════════════════════════════════════════ */

.ab-sr {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease,
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-sr.ab-sr--left  { transform: translateX(-36px); }
.ab-sr.ab-sr--right { transform: translateX(36px);  }
.ab-sr.ab-sr--scale { transform: scale(0.88); }

.ab-sr.ab-in { opacity: 1; transform: none; }

/* Stagger: JS sets --ab-i per child */
.ab-stagger-child {
    transition-delay: calc(var(--ab-i, 0) * 70ms);
}

/* ══════════════════════════════════════════════════════════════
   4. PRODUCT CARD — dramatic hover lift + shimmer + border glow
   ══════════════════════════════════════════════════════════════ */

.product-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s ease !important;
}
.product-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 18px 40px rgba(232, 96, 10, 0.18),
                0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Shimmer sweep */
.product-card::before {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 1;
}
.product-card:hover::before { left: 130%; }

/* Orange bottom border slides in on hover */
.product-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #E8600A, #1A3A5C);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 2;
}
.product-card:hover::after { transform: scaleX(1); }

/* ══════════════════════════════════════════════════════════════
   5. IMAGES — zoom on hover
   ══════════════════════════════════════════════════════════════ */

.product-card-img,
.product-card img {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.product-card:hover .product-card-img,
.product-card:hover img {
    transform: scale(1.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. BUTTONS — glow + scale on hover
   ══════════════════════════════════════════════════════════════ */

.btn,
.pcard__btn,
.nav-cta,
.cpx__see-all-btn,
[class*="btn"] {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease !important;
    position: relative;
    overflow: hidden;
}
.btn:hover,
.pcard__btn:hover,
.nav-cta:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 24px rgba(232, 96, 10, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   7. BUTTON RIPPLE (injected by JS on click)
   ══════════════════════════════════════════════════════════════ */

@keyframes ab-ripple {
    to { transform: scale(5); opacity: 0; }
}
.ab-ripple-el {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    width: 8px; height: 8px;
    transform: scale(0);
    animation: ab-ripple 0.55s ease-out;
    pointer-events: none;
    z-index: 10;
}

/* ══════════════════════════════════════════════════════════════
   8. NAV LINKS — animated underline
   ══════════════════════════════════════════════════════════════ */

.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 50%;
    width: 0; height: 2.5px;
    background: #E8600A;
    border-radius: 2px;
    transition: width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                left   0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-link:hover::after { width: 90%; left: 5%; }

/* ══════════════════════════════════════════════════════════════
   9. FLOATING BLOB PULSE (catalog hero)
   ══════════════════════════════════════════════════════════════ */

@keyframes ab-blob {
    0%, 100% { transform: scale(1)    rotate(0deg);   opacity: 0.55; }
    33%       { transform: scale(1.07) rotate(3deg);   opacity: 0.65; }
    66%       { transform: scale(0.95) rotate(-2.5deg); opacity: 0.5; }
}
.cpx__blob { animation: ab-blob 7s ease-in-out infinite !important; }
.cpx__blob:nth-child(2) { animation-delay: -2.5s !important; }
.cpx__blob:nth-child(3) { animation-delay: -5s   !important; }

/* ══════════════════════════════════════════════════════════════
   10. GRADIENT TEXT utility (.ab-grad-text)
   ══════════════════════════════════════════════════════════════ */

@keyframes ab-grad {
    0%   { background-position: 0%   60%; }
    50%  { background-position: 100% 60%; }
    100% { background-position: 0%   60%; }
}
.ab-grad-text {
    background: linear-gradient(90deg, #E8600A 0%, #1A3A5C 33%, #5FC2DE 66%, #E8600A 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ab-grad 6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════
   11. TILT CARDS (.ab-tilt set by JS)
   ══════════════════════════════════════════════════════════════ */

.ab-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.08s ease;
}

/* ══════════════════════════════════════════════════════════════
   12. FOOTER link hover
   ══════════════════════════════════════════════════════════════ */

.footer__col a {
    transition: color 0.18s, letter-spacing 0.18s !important;
}
.footer__col a:hover {
    color: #E8600A !important;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════
   13. SMOOTH PAGE ENTRANCE
   NOTE: body is intentionally NOT animated with transform/opacity.
   Any transform or opacity < 1 on <body> breaks position:fixed
   for all descendants (nav bar, cookie banner, contest popup etc.)
   instead the hero section fades in via rule 2 above.
   ══════════════════════════════════════════════════════════════ */