/**
 * creative.css — VanGo Pet Care Creative Animations + Effects
 *
 * Loads AFTER clone.css and elevate.css.
 * References CSS custom properties from clone.css.
 *
 * Techniques active (Creative CSS Builder v2.8):
 *   6.13  Composite scroll entrance (opacity-only, Bold Premium)
 *   6.14  Varied-path grid stagger (Bold Premium calibration)
 *   6.7   Hover card effects (premium: +8px lift, gold border)
 *   6.8   Shimmer badge effect (cert strip)
 *   6.4   Parallax hero background layer
 *   6.15  Distributed parallax (Bold Premium — ON)
 *   6.10  Text reveal on scroll (opacity-only, premium)
 *   3.4   Spring easing tokens (in clone.css — applied here)
 *   CUSTOM: Hero CSS star-glow swirl overlay
 *   CUSTOM: Gallery frame gold border scaleX reveal (on cards)
 *
 * prefers-reduced-motion: ALL animations disabled via @media.
 * Creative build active — section-enter replaced by composite-enter.
 */


/* ═══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION MASTER GATE
   All scroll-driven and ambient animations wrap inside
   @supports so this single media query disables everything.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   6.13  COMPOSITE SCROLL ENTRANCE
   Bold Premium: opacity-only (no translateY — understated premium)
   Pacing: heavy = entry 0% 20% / medium = entry 0% 35% /
           light = entry 5% 40%
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

    /* Base: all sections except hero */
    main > section:not(.hero):not(:first-child) {
        animation: composite-enter linear both;
        animation-timeline: view();
    }

    [data-weight="heavy"] {
        animation-range: entry 0% entry 20%;
    }

    [data-weight="medium"] {
        animation-range: entry 0% entry 35%;
    }

    [data-weight="light"] {
        animation-range: entry 5% entry 40%;
    }

}

@keyframes composite-enter {
    from {
        opacity: 0;
        filter: blur(1px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
   6.14  VARIED-PATH GRID STAGGER
   Bold Premium calibration: wider X (26px), tighter Y (32px/13px),
   range entry 0% entry 25%
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

    .services-grid > *,
    .reviews-grid > *,
    .city-grid > * {
        animation: stagger-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    /* Left-entry: 1st, 4th, 7th */
    .services-grid > *:nth-child(3n+1),
    .reviews-grid > *:nth-child(3n+1),
    .city-grid > *:nth-child(3n+1) {
        animation-name: stagger-left;
    }

    /* Right-entry: 3rd, 6th, 9th */
    .services-grid > *:nth-child(3n+3),
    .reviews-grid > *:nth-child(3n+3),
    .city-grid > *:nth-child(3n+3) {
        animation-name: stagger-right;
    }

}

@keyframes stagger-up {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes stagger-left {
    from {
        opacity: 0;
        transform: translateX(-26px) translateY(13px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes stagger-right {
    from {
        opacity: 0;
        transform: translateX(26px) translateY(13px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}


/* ═══════════════════════════════════════════════════════════════
   6.10  TEXT REVEAL ON SCROLL
   Bold Premium: opacity-only for premium understatement.
   Applied to section H2 headings and CTA title.
   Max 3 instances per page.
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

    [data-creative="text-reveal"] {
        animation: text-reveal-premium linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 35%;
    }

}

@keyframes text-reveal-premium {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
   6.4  PARALLAX HERO BACKGROUND
   CSS perspective-based. No JS.
   ═══════════════════════════════════════════════════════════════ */

.hero {
    perspective: 1200px;
}

.hero-bg {
    transform: translateZ(-3px) scale(4);
    transform-origin: center center;
    will-change: transform;
}

/* Fallback: if translateZ causes issues, use fixed attachment */
@supports not (transform: translateZ(-3px)) {
    .hero-bg {
        background-attachment: fixed;
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   6.15  DISTRIBUTED PARALLAX
   Bold Premium — ON.
   Review cards section accent drifts slower than content.
   Why section offset drift.
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {

    .reviews-section::before {
        content: '';
        position: absolute;
        top: -5%;
        right: -3%;
        width: 280px;
        height: 280px;
        background: radial-gradient(
            ellipse,
            rgba(232, 200, 74, 0.04) 0%,
            transparent 70%
        );
        border-radius: 50%;
        pointer-events: none;
        animation: parallax-drift-slow linear;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        z-index: 0;
    }

    .cta-section .cta-swirl-left {
        animation: parallax-drift-counter linear;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

}

@keyframes parallax-drift-slow {
    from { transform: translateY(-30px); }
    to   { transform: translateY(30px); }
}

@keyframes parallax-drift-counter {
    from { transform: translateY(20px) rotate(-2deg); }
    to   { transform: translateY(-20px) rotate(2deg); }
}


/* ═══════════════════════════════════════════════════════════════
   6.8  SHIMMER BADGE EFFECT
   On cert badges. Slow shimmer, premium not flashy (5s).
   ═══════════════════════════════════════════════════════════════ */

.cert-badge {
    position: relative;
    overflow: hidden;
}

.cert-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(232, 200, 74, 0.22) 45%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(232, 200, 74, 0.22) 55%,
        transparent 60%
    );
    background-size: 300% 100%;
    animation: shimmer-gold 5s ease-in-out infinite;
}

@keyframes shimmer-gold {
    0%, 100% { background-position: 300% 0; }
    50%       { background-position: -50% 0; }
}


/* ═══════════════════════════════════════════════════════════════
   CUSTOM: HERO STAR-GLOW SWIRL OVERLAY
   CSS-only animated luminous orbs layered over hero bg.
   Mimics the glowing stars in Starry Night.
   No images needed — pure CSS radial gradients.
   ═══════════════════════════════════════════════════════════════ */

.hero-swirl-overlay::before,
.hero-swirl-overlay::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: star-pulse 6s ease-in-out infinite;
}

/* Large moon/star glow — top right */
.hero-swirl-overlay::before {
    width: 220px;
    height: 220px;
    top: 8%;
    right: 10%;
    background: radial-gradient(
        ellipse,
        rgba(232, 200, 74, 0.22) 0%,
        rgba(232, 200, 74, 0.08) 35%,
        transparent 70%
    );
    animation-delay: 0s;
    animation-duration: 7s;
}

/* Smaller star cluster — left */
.hero-swirl-overlay::after {
    width: 120px;
    height: 120px;
    top: 22%;
    left: 12%;
    background: radial-gradient(
        ellipse,
        rgba(232, 200, 74, 0.16) 0%,
        rgba(74, 127, 193, 0.10) 40%,
        transparent 70%
    );
    animation-delay: 2s;
    animation-duration: 9s;
}

/* Additional star glows via box-shadow on a tiny pseudo element */
.hero-swirl-star {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(232, 200, 74, 0.7);
    pointer-events: none;
    animation: star-twinkle 4s ease-in-out infinite;
}

.hero-swirl-star:nth-child(1) { top: 15%; left: 30%; animation-delay: 0s; }
.hero-swirl-star:nth-child(2) { top: 25%; left: 65%; animation-delay: 1.2s; }
.hero-swirl-star:nth-child(3) { top: 10%; left: 50%; animation-delay: 0.6s; }
.hero-swirl-star:nth-child(4) { top: 35%; left: 20%; animation-delay: 2s; }
.hero-swirl-star:nth-child(5) { top: 18%; left: 78%; animation-delay: 1.8s; }
.hero-swirl-star:nth-child(6) { top: 42%; left: 85%; animation-delay: 0.3s; }

@keyframes star-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.12); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.6); box-shadow: 0 0 8px 3px rgba(232, 200, 74, 0.4); }
}


/* ═══════════════════════════════════════════════════════════════
   CUSTOM: SWIRL PATTERN IN DARK SECTION BACKGROUNDS
   SVG-based swirl texture via CSS background-image.
   Used on membership and CTA sections.
   ═══════════════════════════════════════════════════════════════ */

.membership-section::before,
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cpath d='M300,300 C320,240 380,220 400,260 C420,300 390,360 350,370 C310,380 270,350 270,310 C270,270 300,250 330,260 C360,270 370,300 360,320' fill='none' stroke='%23e8c84a' stroke-width='1.5' opacity='0.6'/%3E%3Cpath d='M150,150 C170,90 230,70 250,110 C270,150 240,210 200,220 C160,230 120,200 120,160' fill='none' stroke='%234a7fc1' stroke-width='1' opacity='0.5'/%3E%3Cpath d='M450,400 C470,340 530,320 550,360 C570,400 540,460 500,470 C460,480 420,450 420,410' fill='none' stroke='%23e8c84a' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 400px 400px;
    background-repeat: repeat;
}


/* ═══════════════════════════════════════════════════════════════
   CUSTOM: NAV LOGO GOLD RING GLOW
   Subtle gold aura on logo in nav that pulses gently.
   ═══════════════════════════════════════════════════════════════ */

.nav-logo-img {
    animation: logo-glow 6s ease-in-out infinite;
}

@keyframes logo-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 74, 0); }
    50%       { box-shadow: 0 0 12px 3px rgba(232, 200, 74, 0.3); }
}


/* ═══════════════════════════════════════════════════════════════
   HERO ENTRANCE — content fade-in on page load
   (NOT scroll-driven — fires on load. Separate from 6.13.)
   ═══════════════════════════════════════════════════════════════ */

.hero-content {
    animation: hero-content-enter 1.1s var(--ease-out-expo) forwards;
}

.hero-eyebrow {
    animation: hero-content-enter 0.9s var(--ease-out-expo) 0.15s both;
}

.hero-h1 {
    animation: hero-content-enter 0.9s var(--ease-out-expo) 0.3s both;
}

.hero-sub {
    animation: hero-content-enter 0.9s var(--ease-out-expo) 0.5s both;
}

.hero-ctas {
    animation: hero-content-enter 0.9s var(--ease-out-expo) 0.7s both;
}

.trust-bar {
    animation: hero-content-enter 0.9s var(--ease-out-expo) 0.9s both;
}

@keyframes hero-content-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
   PROCESS STEP NUMBERS — staggered entrance
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

    .process-step:nth-child(1) { animation-delay:   0ms; }
    .process-step:nth-child(2) { animation-delay:  80ms; }
    .process-step:nth-child(3) { animation-delay: 160ms; }
    .process-step:nth-child(4) { animation-delay: 240ms; }

    .process-grid > * {
        animation: stagger-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

}


/* ═══════════════════════════════════════════════════════════════
   MEMBERSHIP PLAN CARDS hover gold glow
   ═══════════════════════════════════════════════════════════════ */

.plan-card {
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
}

.plan-card:hover {
    box-shadow: 0 8px 32px rgba(232, 200, 74, 0.18);
}


/* ═══════════════════════════════════════════════════════════════
   CITY CARDS — gold hover border flash
   ═══════════════════════════════════════════════════════════════ */

.city-card {
    position: relative;
}

.city-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-spring-snappy);
}

.city-card:hover::after {
    transform: scaleX(1);
}


/* ═══════════════════════════════════════════════════════════════
   WHY VANGO — bullet items stagger
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {

    .why-bullets li {
        animation: stagger-left linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    .why-bullets li:nth-child(even) {
        animation-name: stagger-right;
    }

}


/* ═══════════════════════════════════════════════════════════════
   FOCUS VISIBLE RING — accessibility
   ═══════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}