/* ============================================================
   COOPNIX — Animations & Enhancements V.4
   Unique page heroes, pricing decorations, micro-animations
   ============================================================ */

/* === ICON BASE (inline SVG) === */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* === PAGE HERO — Each page gets unique accent === */
.page-hero > div,
.page-hero > .hero-bg-icon { position: relative; z-index: 2; }

/* Floating accent orb (right side) */
.page-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    z-index: 0;
    animation: heroOrb 10s ease-in-out infinite;
    pointer-events: none;
}

/* Per-page hero accent colors */
.hero-hosting::after    { background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%); }
.hero-vps::after        { background: radial-gradient(circle, rgba(129, 140, 248, 0.22) 0%, transparent 70%); }
.hero-server::after     { background: radial-gradient(circle, rgba(244, 114, 182, 0.22) 0%, transparent 70%); }
.hero-about::after      { background: radial-gradient(circle, rgba(52, 211, 153, 0.22) 0%, transparent 70%); }
.hero-contact::after    { background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 70%); }
.hero-legal::after      { background: radial-gradient(circle, rgba(148, 163, 184, 0.18) 0%, transparent 70%); }

/* Decorative line accent at bottom of hero */
.page-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 3;
}
.hero-hosting::before   { background: linear-gradient(90deg, #38bdf8, #0099FF, #38bdf8); }
.hero-vps::before       { background: linear-gradient(90deg, #818cf8, #6366f1, #818cf8); }
.hero-server::before    { background: linear-gradient(90deg, #f472b6, #e11d48, #f472b6); }
.hero-about::before     { background: linear-gradient(90deg, #34d399, #059669, #34d399); }
.hero-contact::before   { background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24); }
.hero-legal::before     { background: linear-gradient(90deg, #94a3b8, #64748b, #94a3b8); }

/* Subtle floating icon inside hero — per page */
.page-hero .hero-icon-deco {
    position: absolute;
    opacity: 0.06;
    z-index: 1;
    animation: heroIconFloat 14s ease-in-out infinite;
    pointer-events: none;
}
.page-hero .hero-icon-deco:nth-child(1) { top: 18%; left: 6%; }
.page-hero .hero-icon-deco:nth-child(2) { bottom: 22%; right: 8%; animation-delay: -5s; }

/* Homepage hero orb */
.hero::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -8%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 153, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: heroOrb 12s ease-in-out infinite reverse;
    pointer-events: none;
}

/* Homepage floating decorative icons */
.hero .hero-bg-icon {
    position: absolute;
    opacity: 0.04;
    z-index: 0;
    animation: heroIconFloat 16s ease-in-out infinite;
    pointer-events: none;
}

/* === PRICING CARD — Decorative server icon in corner === */
.pricing-card::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230099FF' stroke-width='1'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Ccircle cx='6' cy='6' r='1'/%3E%3Ccircle cx='6' cy='18' r='1'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.06;
    z-index: 0;
    transition: transform 0.5s ease;
    pointer-events: none;
}
.pricing-card:hover::after {
    transform: rotate(12deg) scale(1.15);
    opacity: 0.1;
}
.pricing-card > * { position: relative; z-index: 1; }

/* Popular glow pulse */
.pricing-card.popular {
    animation: glowPulse 3s ease-in-out infinite;
}

/* === FEATURE CARD — Icon lift on hover === */
.feature-card .feature-icon {
    transition: all var(--transition-base);
}
.feature-card:hover .feature-icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 153, 255, 0.12);
}

/* === CARD ICON — Pulse on hover === */
.card-icon {
    transition: all var(--transition-base);
}
.card:hover .card-icon {
    transform: scale(1.1);
}

/* === STAT NUMBER — Scale on hover === */
.stat-number { transition: transform 0.3s ease; }
.stat-item:hover .stat-number { transform: scale(1.08); }

/* === TIMELINE DOT — Pulse ring === */
.timeline-dot { animation: dotPulse 2.5s ease-in-out infinite; }

/* === SCROLL ANIMATIONS === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.grid .animate-on-scroll:nth-child(1),
.pricing-grid .animate-on-scroll:nth-child(1),
.feature-grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.grid .animate-on-scroll:nth-child(2),
.pricing-grid .animate-on-scroll:nth-child(2),
.feature-grid .animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.grid .animate-on-scroll:nth-child(3),
.pricing-grid .animate-on-scroll:nth-child(3),
.feature-grid .animate-on-scroll:nth-child(3) { transition-delay: 160ms; }
.grid .animate-on-scroll:nth-child(4),
.pricing-grid .animate-on-scroll:nth-child(4),
.feature-grid .animate-on-scroll:nth-child(4) { transition-delay: 240ms; }
.grid .animate-on-scroll:nth-child(5) { transition-delay: 320ms; }
.grid .animate-on-scroll:nth-child(6) { transition-delay: 400ms; }

/* Slide left/right */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-slide-left.visible,
.animate-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* === KEYFRAMES === */
@keyframes heroOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(15px, -12px) scale(1.04); }
    66% { transform: translate(-8px, 8px) scale(0.97); }
}
@keyframes heroIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 177, 33, 0.15); }
    50% { box-shadow: 0 0 35px rgba(255, 177, 33, 0.3); }
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.08); }
    50% { box-shadow: 0 0 0 7px rgba(0, 153, 255, 0.18); }
}
@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* === FAQ SECTION === */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-md);
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-item.open {
    border-color: var(--color-primary-light);
    border-left: 3px solid var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 153, 255, 0.1);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
    text-align: left;
    gap: var(--space-md);
    transition: color var(--transition-fast);
}
.faq-item.open .faq-question { color: var(--color-primary); font-weight: var(--fw-bold); }
.faq-question:hover { color: var(--color-primary); }
.faq-question .faq-toggle {
    transition: transform var(--transition-base);
    color: var(--text-muted);
    flex-shrink: 0;
}
.faq-item.open .faq-toggle {
    transform: rotate(180deg);
    color: var(--color-primary);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 var(--space-xl);
}
.faq-item.open .faq-answer {
    max-height: 400px;
    padding: 0 var(--space-xl) var(--space-lg);
}
.faq-answer p {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    line-height: var(--lh-relaxed);
}

/* === BACKGROUND DRIFT ANIMATION === */
@keyframes driftBackground {
    from { background-position: 0 0, 0 0; }
    to { background-position: -120px 120px, 0 0; }
}

/* === HERO BOUNCE ICONS === */
@keyframes bounceIconLeft {
    0% { transform: translateY(0) rotate(0deg) scale(0.9); opacity: 0.2; }
    50% { opacity: 0.6; }
    100% { transform: translateY(-30px) rotate(15deg) scale(1.1); opacity: 0.3; }
}
@keyframes bounceIconRight {
    0% { transform: translateY(0) rotate(0deg) scale(0.9); opacity: 0.3; }
    50% { opacity: 0.5; }
    100% { transform: translateY(40px) rotate(-20deg) scale(1.1); opacity: 0.2; }
}
@keyframes popUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}