/**
 * Sportallia Animated Background v3
 * Nền động sôi động - Geometric shapes + bold silhouettes
 *
 * Nguyên tắc:
 * - Opacity cao: shapes 12-18%, silhouettes 8-12%, glow 10-15%
 * - Animation nhanh và sống động: 4-10s
 * - Geometric shapes lớn rõ ràng
 * - Kết hợp gradient mesh + floating elements
 * - Mobile: giảm opacity 50%, animation chậm hơn
 */

/* ============================================
   BASE WRAPPER
   ============================================ */
.sport-bg {
    position: absolute !important;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    border-radius: inherit;
}

/* ============================================
   LAYER 1: ANIMATED GRADIENT MESH
   Nền gradient động - tạo chiều sâu & năng lượng
   ============================================ */
.sport-mesh {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.12;
    animation: meshRotate 25s linear infinite;
}

.sport-mesh--orange {
    background: conic-gradient(
        from 0deg at 30% 40%,
        transparent 0deg,
        rgba(255,107,53,0.8) 40deg,
        rgba(255,107,53,0.3) 80deg,
        transparent 120deg,
        rgba(255,140,96,0.5) 160deg,
        transparent 200deg,
        rgba(255,107,53,0.6) 260deg,
        transparent 300deg,
        rgba(255,107,53,0.4) 340deg,
        transparent 360deg
    );
}

.sport-mesh--green {
    background: conic-gradient(
        from 180deg at 70% 60%,
        transparent 0deg,
        rgba(57,227,164,0.8) 35deg,
        rgba(57,227,164,0.3) 75deg,
        transparent 130deg,
        rgba(39,201,138,0.5) 170deg,
        transparent 210deg,
        rgba(57,227,164,0.6) 250deg,
        transparent 310deg,
        rgba(57,227,164,0.4) 350deg,
        transparent 360deg
    );
    animation: meshRotate 30s linear infinite reverse;
    animation-delay: -10s;
}

@keyframes meshRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   LAYER 2: GEOMETRIC SHAPES
   Các hình hình học động - circle, ring, triangle, diamond
   ============================================ */
.sport-shape {
    position: absolute;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Circle - lớn, bold */
.sport-shape--circle {
    border-radius: 50%;
    animation-name: shapeCircle;
}

.sport-shape--circle-lg {
    width: clamp(200px, 25vw, 400px);
    height: clamp(200px, 25vw, 400px);
}

.sport-shape--circle-md {
    width: clamp(120px, 15vw, 250px);
    height: clamp(120px, 15vw, 250px);
}

.sport-shape--circle-sm {
    width: clamp(60px, 8vw, 120px);
    height: clamp(60px, 8vw, 120px);
}

.sport-shape--orange {
    background: radial-gradient(circle, rgba(255,107,53,0.7) 0%, rgba(255,107,53,0.2) 60%, transparent 80%);
    border: 2px solid rgba(255,107,53,0.4);
}

.sport-shape--green {
    background: radial-gradient(circle, rgba(57,227,164,0.6) 0%, rgba(57,227,164,0.15) 60%, transparent 80%);
    border: 2px solid rgba(57,227,164,0.35);
}

.sport-shape--purple {
    background: radial-gradient(circle, rgba(168,85,247,0.5) 0%, rgba(168,85,247,0.1) 60%, transparent 80%);
    border: 2px solid rgba(168,85,247,0.3);
}

.sport-shape--blue {
    background: radial-gradient(circle, rgba(99,179,237,0.5) 0%, rgba(99,179,237,0.1) 60%, transparent 80%);
    border: 2px solid rgba(99,179,237,0.3);
}

@keyframes shapeCircle {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(15px, -20px) scale(1.08); }
}

/* Ring - vòng tròn nhânân */
.sport-shape--ring {
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    background: transparent !important;
    animation-name: shapeRing;
}

.sport-shape--ring-lg {
    width: clamp(180px, 22vw, 350px);
    height: clamp(180px, 22vw, 350px);
}

.sport-shape--ring-md {
    width: clamp(100px, 13vw, 200px);
    height: clamp(100px, 13vw, 200px);
}

.sport-shape--ring-sm {
    width: clamp(50px, 7vw, 100px);
    height: clamp(50px, 7vw, 100px);
}

@keyframes shapeRing {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(-10px, 15px) rotate(180deg) scale(1.05); }
    100% { transform: translate(8px, -10px) rotate(360deg) scale(0.95); }
}

/* Triangle */
.sport-shape--triangle {
    width: 0;
    height: 0;
    border-left: clamp(50px, 6vw, 100px) solid transparent;
    border-right: clamp(50px, 6vw, 100px) solid transparent;
    border-bottom: clamp(80px, 10vw, 160px) solid;
    animation-name: shapeTriangle;
}

.sport-shape--triangle-orange {
    border-bottom-color: rgba(255,107,53,0.5);
    border-left-color: transparent;
    border-right-color: transparent;
}

.sport-shape--triangle-green {
    border-bottom-color: rgba(57,227,164,0.4);
    border-left-color: transparent;
    border-right-color: transparent;
}

@keyframes shapeTriangle {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.7; }
    50% { transform: translate(10px, -15px) rotate(10deg); opacity: 1; }
    100% { transform: translate(-8px, 8px) rotate(-5deg); opacity: 0.7; }
}

/* Diamond */
.sport-shape--diamond {
    width: clamp(40px, 5vw, 80px);
    height: clamp(40px, 5vw, 80px);
    background: transparent;
    transform: rotate(45deg);
    animation-name: shapeDiamond;
}

.sport-shape--diamond-orange {
    background: rgba(255,107,53,0.5);
    box-shadow: 0 0 20px rgba(255,107,53,0.3);
}

.sport-shape--diamond-green {
    background: rgba(57,227,164,0.4);
    box-shadow: 0 0 15px rgba(57,227,164,0.25);
}

@keyframes shapeDiamond {
    0% { transform: rotate(45deg) translate(0, 0) scale(1); }
    100% { transform: rotate(45deg) translate(12px, -18px) scale(1.15); }
}

/* Half-circle */
.sport-shape--half {
    border-radius: 0 0 50% 50%;
    animation-name: shapeHalf;
}

.sport-shape--half-lg {
    width: clamp(150px, 18vw, 280px);
    height: clamp(100px, 12vw, 180px);
}

@keyframes shapeHalf {
    0% { transform: translateX(0) scaleY(1); }
    100% { transform: translateX(20px) scaleY(1.1); }
}

/* ============================================
   LAYER 3: FLOATING SPORT ICONS
   Icon thể thao bay lơ lửng - rõ ràng hơn silhouette
   ============================================ */
.sport-icon {
    position: absolute;
    opacity: 0.15;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.sport-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.sport-icon svg path,
.sport-icon svg circle,
.sport-icon svg rect,
.sport-icon svg ellipse,
.sport-icon svg line,
.sport-icon svg polyline {
    fill: currentColor;
}

.sport-icon--lg { width: clamp(60px, 8vw, 120px); height: clamp(60px, 8vw, 120px); opacity: 0.18; }
.sport-icon--md { width: clamp(40px, 5vw, 70px); height: clamp(40px, 5vw, 70px); opacity: 0.2; }
.sport-icon--sm { width: clamp(25px, 3vw, 45px); height: clamp(25px, 3vw, 45px); opacity: 0.25; }

.sport-icon--orange { color: var(--accent); }
.sport-icon--green { color: var(--secondary); }
.sport-icon--white { color: rgba(255,255,255,0.8); }

.sport-icon--float {
    animation-name: iconFloat;
}

.sport-icon--spin {
    animation-name: iconSpin;
    animation-duration: 8s;
}

.sport-icon--bounce {
    animation-name: iconBounce;
    animation-duration: 3s;
}

.sport-icon--pulse {
    animation-name: iconPulse;
}

@keyframes iconFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -15px) rotate(5deg); }
    50% { transform: translate(-5px, -25px) rotate(-3deg); }
    75% { transform: translate(15px, -10px) rotate(8deg); }
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.2); opacity: 0.25; }
}

/* ============================================
   LAYER 4: GLOW ORBS (TĂNG OPACITY)
   ============================================ */
.sport-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: sportGlowPulse 6s ease-in-out infinite;
}

.sport-glow--orange {
    background: radial-gradient(circle, rgba(255,107,53,0.25) 0%, transparent 65%);
}

.sport-glow--green {
    background: radial-gradient(circle, rgba(57,227,164,0.2) 0%, transparent 65%);
    animation-delay: -3s;
}

.sport-glow--purple {
    background: radial-gradient(circle, rgba(168,85,247,0.18) 0%, transparent 65%);
    animation-delay: -1.5s;
}

.sport-glow--sm { width: 150px; height: 150px; }
.sport-glow--md { width: 280px; height: 280px; }
.sport-glow--lg { width: 450px; height: 450px; }

.sport-glow--tl { top: -60px; left: -60px; }
.sport-glow--tr { top: -80px; right: -80px; }
.sport-glow--bl { bottom: -80px; left: -80px; }
.sport-glow--br { bottom: -60px; right: -60px; }

@keyframes sportGlowPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* ============================================
   LAYER 5: SILHOUETTES - NÂNG OPACITY LÊN 8-12%
   Bóng vận động viên rõ ràng hơn
   ============================================ */
.sport-sil {
    position: absolute;
    opacity: 0.1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.sport-sil svg {
    width: 100%;
    height: auto;
    display: block;
}

.sport-sil svg * {
    fill: var(--accent);
}

/* Kích thước */
.sport-sil--xl { width: clamp(200px, 25vw, 380px); }
.sport-sil--lg { width: clamp(140px, 18vw, 280px); }
.sport-sil--md { width: clamp(90px, 12vw, 180px); }

/* Vị trí góc */
.sport-sil--top-left { top: 0; left: 0; }
.sport-sil--top-right { top: 0; right: 0; }
.sport-sil--bottom-left { bottom: 0; left: 0; }
.sport-sil--bottom-right { bottom: 0; right: 0; }

/* Animation đa dạng - sống động hơn */
.sport-sil--p1 {
    animation-name: silAnim1;
    animation-duration: 8s;
}

.sport-sil--p2 {
    animation-name: silAnim2;
    animation-duration: 10s;
    animation-delay: -3s;
}

.sport-sil--p3 {
    animation-name: silAnim3;
    animation-duration: 12s;
    animation-delay: -5s;
}

.sport-sil--p4 {
    animation-name: silAnim4;
    animation-duration: 9s;
    animation-delay: -2s;
}

@keyframes silAnim1 {
    0% { opacity: 0; transform: translate(20px, 15px) scale(0.92); }
    20% { opacity: 0.1; transform: translate(0, 0) scale(1); }
    50% { opacity: 0.12; transform: translate(-15px, -10px) scale(1.03); }
    80% { opacity: 0.08; transform: translate(-25px, 10px) scale(0.97); }
    100% { opacity: 0; transform: translate(-30px, 20px) scale(0.92); }
}

@keyframes silAnim2 {
    0% { opacity: 0; transform: translate(-15px, 20px) scaleY(0.9); }
    25% { opacity: 0.1; transform: translate(0, 0) scaleY(1); }
    55% { opacity: 0.12; transform: translate(12px, -18px) scaleY(1.04); }
    85% { opacity: 0.06; transform: translate(20px, 5px) scaleY(0.96); }
    100% { opacity: 0; transform: translate(25px, 15px) scaleY(0.9); }
}

@keyframes silAnim3 {
    0% { opacity: 0; transform: translate(10px, -15px) rotate(3deg); }
    30% { opacity: 0.1; transform: translate(0, 0) rotate(0deg); }
    60% { opacity: 0.11; transform: translate(-20px, -8px) rotate(-4deg); }
    90% { opacity: 0.05; transform: translate(-28px, 12px) rotate(-6deg); }
    100% { opacity: 0; transform: translate(-32px, 20px) rotate(-8deg); }
}

@keyframes silAnim4 {
    0% { opacity: 0; transform: translate(-20px, -10px) scale(0.88); }
    22% { opacity: 0.1; transform: translate(0, 0) scale(1); }
    48% { opacity: 0.12; transform: translate(8px, -25px) scale(1.06); }
    75% { opacity: 0.07; transform: translate(18px, -8px) scale(0.98); }
    100% { opacity: 0; transform: translate(25px, 8px) scale(0.9); }
}

/* ============================================
   LAYER 6: GRID LINES
   Lưới đường thẳng nhẹ
   ============================================ */
.sport-grid {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image:
        linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: gridDrift 20s linear infinite;
}

@keyframes gridDrift {
    0% { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}

/* ============================================
   LAYER 7: BOLD STRIPE
   Sọc kẻ to rõ
   ============================================ */
.sport-stripe {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255,107,53,0.3), transparent);
    height: 2px;
    animation: stripeMove 8s ease-in-out infinite;
}

.sport-stripe--h1 { top: 20%; width: 35%; left: -35%; animation-name: stripeH; }
.sport-stripe--h2 { top: 55%; width: 25%; right: -25%; left: auto; animation-name: stripeH; animation-delay: -3s; }
.sport-stripe--h3 { top: 75%; width: 20%; left: -20%; animation-name: stripeH; animation-delay: -5s; }
.sport-stripe--v1 { left: 15%; width: 2px; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(57,227,164,0.3), transparent); animation-name: stripeV; }
.sport-stripe--v2 { right: 20%; width: 2px; height: 25%; bottom: -25%; top: auto; background: linear-gradient(180deg, transparent, rgba(168,85,247,0.25), transparent); animation-name: stripeV; animation-delay: -4s; }

@keyframes stripeH {
    0% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(400%); opacity: 0; }
}

@keyframes stripeV {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(400%); opacity: 0; }
}

/* ============================================
   Z-INDEX LAYERS
   ============================================ */
.sport-layer-mesh { z-index: 1; }
.sport-layer-shapes { z-index: 2; }
.sport-layer-icons { z-index: 3; }
.sport-layer-glow { z-index: 4; }
.sport-layer-grid { z-index: 5; }
.sport-layer-stripe { z-index: 6; }
.sport-layer-sil { z-index: 7; }

/* ============================================
   SCROLL REVEAL
   ============================================ */
.sport-bg-fade {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.sport-bg-fade.revealed {
    opacity: 1;
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .sport-mesh,
    .sport-shape,
    .sport-icon,
    .sport-glow,
    .sport-sil,
    .sport-grid,
    .sport-stripe,
    .sport-bg-fade {
        animation: none !important;
    }

    .sport-mesh { opacity: 0.06; }
    .sport-shape { opacity: 0.08; }
    .sport-icon { opacity: 0.1; }
    .sport-glow { opacity: 0.2; }
    .sport-sil { opacity: 0.06; }
    .sport-grid { opacity: 0.03; }
    .sport-stripe { opacity: 0; }
    .sport-bg-fade { opacity: 1; }
}

/* ============================================
   MOBILE: REDUCE BUT KEEP VISIBLE
   Giảm ~40% opacity và độ lớn trên mobile
   ============================================ */
@media (max-width: 768px) {
    .sport-mesh { opacity: 0.07; animation-duration: 60s; }

    .sport-shape { transform: scale(0.6); opacity: 0.08; }
    .sport-shape--circle-lg { width: clamp(100px, 35vw, 180px); height: clamp(100px, 35vw, 180px); }
    .sport-shape--circle-md { width: clamp(60px, 22vw, 110px); height: clamp(60px, 22vw, 110px); }
    .sport-shape--ring-lg { width: clamp(90px, 30vw, 160px); height: clamp(90px, 30vw, 160px); }

    .sport-icon { transform: scale(0.5); opacity: 0.1; }
    .sport-icon--lg { width: clamp(35px, 12vw, 60px); height: clamp(35px, 12vw, 60px); }

    .sport-sil { opacity: 0.06; }
    .sport-sil--xl { width: clamp(100px, 40vw, 160px); }
    .sport-sil--lg { width: clamp(70px, 28vw, 120px); }
    .sport-sil--md { width: clamp(45px, 18vw, 80px); }

    .sport-glow { opacity: 0.15; }
    .sport-glow--lg { width: 200px; height: 200px; }
    .sport-glow--md { width: 120px; height: 120px; }

    .sport-grid { opacity: 0.03; background-size: 60px 60px; }

    .sport-stripe { opacity: 0; }
}

@media (max-width: 480px) {
    .sport-mesh { opacity: 0.04; }
    .sport-shape { opacity: 0.05; transform: scale(0.4); }
    .sport-icon { opacity: 0.06; transform: scale(0.35); }
    .sport-sil { display: none; }
    .sport-grid { display: none; }
    .sport-stripe { display: none; }
}