/* Campfire Scene Wrapper - FULL WIDTH */ .campfire-scene-wrapper { position: relative; width: 100%; /* max-width removed for full-width scene */ height: 400px; /* Optimal height for mobile and desktop */ margin: 0; /* Removed all margins */ overflow: hidden; background: #0a1520; border-radius: 0; /* Removed border-radius for seamless fit */ box-shadow: none; /* Removed shadow for cleaner look */ } /* ======================================== NIGHT SKY BACKGROUND - WARM NIGHT GRADIENT ======================================== */ .campfire-scene-wrapper .night-sky { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Deep night blue transitioning to warm brown horizon */ background: linear-gradient(to bottom, #0a1520 0%, /* Deep night blue at top */ #12182a 30%, /* Slightly lighter blue */ #1a1a20 60%, /* Transition purple-brown */ #1c0f08 85%, /* Warm brown near ground */ #2d1b00 100%); /* Forest brown at bottom */ z-index: 0; } /* Twinkling stars */ .campfire-scene-wrapper .star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 0 0 3px rgba(255, 255, 255, 0.8); animation: twinkle 3s ease-in-out infinite; will-change: opacity, transform; transform: translateZ(0); } @keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(1) translateZ(0); } 50% { opacity: 1; transform: scale(1.2) translateZ(0); } } /* Shooting stars (падащи звезди) - NO TRAILS */ .campfire-scene-wrapper .shooting-star { position: absolute; width: 3px; height: 3px; background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(200, 220, 255, 0.4) 100%); border-radius: 50%; box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.6); animation: shootingStar linear infinite; will-change: transform, opacity; transform: translateZ(0); } @keyframes shootingStar { 0% { transform: translateX(0) translateY(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(250px) translateY(250px); opacity: 0; } } /* Different shooting stars with delays */ .campfire-scene-wrapper .shooting-star:nth-child(1) { top: 15%; left: 10%; animation-duration: 3s; animation-delay: 2s; } .campfire-scene-wrapper .shooting-star:nth-child(2) { top: 25%; left: 60%; animation-duration: 2.5s; animation-delay: 5s; } .campfire-scene-wrapper .shooting-star:nth-child(3) { top: 35%; left: 30%; animation-duration: 3.5s; animation-delay: 8s; } /* Meteorites (метеорити) - larger, slower, orange */ .campfire-scene-wrapper .meteorite { position: absolute; width: 5px; height: 5px; background: radial-gradient(circle, rgba(255, 200, 100, 1) 0%, rgba(255, 150, 50, 0.9) 40%, rgba(255, 100, 0, 0.6) 100%); border-radius: 50%; box-shadow: 0 0 10px 4px rgba(255, 150, 50, 0.7); animation: meteoriteFall linear infinite; will-change: transform, opacity; transform: translateZ(0); } @keyframes meteoriteFall { 0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(200px) translateY(350px) rotate(180deg); opacity: 0; } } .campfire-scene-wrapper .meteorite:nth-child(1) { top: 12%; left: 25%; animation-duration: 5s; animation-delay: 4s; } .campfire-scene-wrapper .meteorite:nth-child(2) { top: 20%; left: 70%; animation-duration: 6s; animation-delay: 10s; } /* UFO (летяща чиния) - rare appearance */ .campfire-scene-wrapper .ufo { position: absolute; top: 25%; left: -80px; width: 60px; height: 20px; animation: ufoFly 28s linear infinite; will-change: transform, opacity; transform: translateZ(0); } .campfire-scene-wrapper .ufo-body { position: absolute; width: 60px; height: 18px; background: linear-gradient(to bottom, rgba(180, 180, 200, 0.9) 0%, rgba(140, 140, 160, 0.95) 40%, rgba(100, 100, 120, 0.9) 100%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 0 15px rgba(150, 200, 255, 0.6), inset 0 -5px 10px rgba(0, 0, 0, 0.3); } .campfire-scene-wrapper .ufo-dome { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 30px; height: 12px; background: radial-gradient(ellipse at center, rgba(200, 220, 255, 0.7) 0%, rgba(150, 180, 220, 0.6) 60%, rgba(100, 140, 200, 0.5) 100%); border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; } .campfire-scene-wrapper .ufo-light { position: absolute; bottom: -4px; width: 8px; height: 8px; background: radial-gradient(circle, rgba(150, 255, 200, 1) 0%, rgba(100, 200, 150, 0.8) 50%, rgba(50, 150, 100, 0) 100%); border-radius: 50%; box-shadow: 0 0 10px rgba(150, 255, 200, 0.8); animation: ufoLightBlink 0.5s ease-in-out infinite; } .campfire-scene-wrapper .ufo-light:nth-child(1) { left: 10px; } .campfire-scene-wrapper .ufo-light:nth-child(2) { left: 26px; animation-delay: 0.15s; } .campfire-scene-wrapper .ufo-light:nth-child(3) { right: 10px; animation-delay: 0.3s; } @keyframes ufoFly { 0% { left: -80px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: calc(100% + 80px); opacity: 0; } } @keyframes ufoLightBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Clouds (облаци) - slow moving, semi-transparent */ .campfire-scene-wrapper .cloud { position: absolute; background: radial-gradient(ellipse at center, rgba(200, 210, 220, 0.15) 0%, rgba(180, 190, 200, 0.12) 40%, rgba(160, 170, 180, 0.08) 70%, rgba(140, 150, 160, 0) 100%); border-radius: 50%; filter: blur(8px); animation: cloudDrift linear infinite; will-change: transform, opacity; transform: translateZ(0); } .campfire-scene-wrapper .cloud:nth-child(1) { top: 15%; left: -100px; width: 120px; height: 40px; animation-duration: 70s; animation-delay: 0s; } .campfire-scene-wrapper .cloud:nth-child(2) { top: 30%; left: -150px; width: 150px; height: 50px; animation-duration: 85s; animation-delay: 20s; } .campfire-scene-wrapper .cloud:nth-child(3) { top: 45%; left: -80px; width: 100px; height: 35px; animation-duration: 65s; animation-delay: 40s; } @keyframes cloudDrift { 0% { left: -150px; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { left: calc(100% + 150px); opacity: 0; } } /* Moon - Realistic silver-white color WITH COUNTER */ .campfire-scene-wrapper .moon { position: absolute; top: 20px; right: 20px; width: 70px; height: 70px; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 1) 0%, rgba(240, 245, 250, 0.95) 30%, rgba(200, 210, 220, 0.85) 60%, rgba(180, 190, 200, 0.7) 100%); border-radius: 50%; box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(200, 220, 240, 0.3), inset -8px -8px 24px rgba(150, 160, 180, 0.3); animation: moonGlow 5s ease-in-out infinite; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: #2d1b00; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); font-family: Georgia, serif; line-height: 1; } @keyframes moonGlow { 0%, 100% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(200, 220, 240, 0.3), inset -8px -8px 24px rgba(150, 160, 180, 0.3); } 50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 0 0 75px rgba(200, 220, 240, 0.4), inset -8px -8px 24px rgba(150, 160, 180, 0.3); } } /* ======================================== CONTAINER & HEADER ======================================== */ .campfire-scene-wrapper .container { max-width: 600px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; } .campfire-scene-wrapper .header { text-align: center; margin-bottom: 30px; } .campfire-scene-wrapper .header h1 { color: #fca311; font-size: clamp(20px, 5vw, 28px); text-shadow: 0 0 20px rgba(252, 163, 17, 0.8), 0 0 40px rgba(255, 111, 0, 0.4); margin-bottom: 15px; animation: headerGlow 3s ease-in-out infinite; } @keyframes headerGlow { 0%, 100% { text-shadow: 0 0 20px rgba(252, 163, 17, 0.8); } 50% { text-shadow: 0 0 30px rgba(252, 163, 17, 1), 0 0 50px rgba(255, 111, 0, 0.6); } } .campfire-scene-wrapper .counter-badge { display: inline-block; /* Site's fire gradient colors */ background: linear-gradient(135deg, #fca311 0%, #ff6b35 100%); color: #1c0a00; padding: 10px 24px; border-radius: 30px; font-weight: bold; font-size: 16px; /* Site's rust brown border */ border: 3px solid #92400e; box-shadow: 0 0 25px rgba(252, 163, 17, 0.8), 0 5px 20px rgba(0, 0, 0, 0.6); } /* ======================================== CAMPFIRE SCENE - ARC PERSPECTIVE ======================================== */ .campfire-scene-wrapper .campfire-scene { position: relative; z-index: 1; width: 100%; /* FULL WIDTH - expanded horizontally only */ height: 400px; /* Optimal height for mobile */ /* max-width removed */ margin: 0; perspective: 1000px; overflow: hidden; } /* Mountain silhouette background - WARM FOREST PEAKS */ .campfire-scene-wrapper .mountains { position: absolute; bottom: 120px; left: -5%; width: 110%; height: 100px; z-index: 1; background: /* Subtle warm highlights on peaks - ember glow */ radial-gradient(ellipse at 22% 8%, rgba(252, 163, 17, 0.15) 0%, transparent 3%), radial-gradient(ellipse at 35% 4%, rgba(247, 127, 0, 0.12) 0%, transparent 2.5%), radial-gradient(ellipse at 65% 5%, rgba(252, 163, 17, 0.14) 0%, transparent 3%), radial-gradient(ellipse at 78% 10%, rgba(247, 127, 0, 0.13) 0%, transparent 2.8%), /* Dark brown/wood silhouette matching site theme */ linear-gradient(to bottom, #2d1b00 0%, #1c0a00 50%, #1a0f00 100% ); clip-path: polygon( /* Dramatic sharp peaks */ 0% 100%, 0% 60%, /* Left section - medium peaks */ 4% 55%, 6% 50%, 8% 45%, 10% 40%, 12% 35%, 14% 30%, 16% 25%, 18% 20%, 20% 15%, 22% 8%, /* Drop to valley */ 24% 12%, 26% 18%, 28% 25%, 30% 32%, /* Central peak - highest */ 32% 25%, 34% 18%, 36% 10%, 38% 5%, 40% 3%, 42% 2%, 44% 1%, 46% 0%, 48% 1%, 50% 2%, /* Drop to valley */ 52% 8%, 54% 15%, 56% 22%, 58% 28%, /* Right section - sharp peaks */ 60% 22%, 62% 15%, 64% 10%, 66% 6%, 68% 4%, 70% 3%, 72% 5%, 74% 10%, 76% 18%, /* Final peaks */ 78% 12%, 80% 8%, 82% 12%, 84% 18%, 86% 25%, 88% 32%, 90% 40%, 92% 48%, 94% 54%, 96% 58%, 100% 62%, 100% 100% ); filter: blur(1px) contrast(1.2); opacity: 0.85; } /* Distant mountains (medium distance) - warm brown */ .campfire-scene-wrapper .mountains-distant { position: absolute; bottom: 140px; left: -5%; width: 110%; height: 90px; z-index: 0; background: linear-gradient(to bottom, rgba(80, 54, 40, 0.4) 0%, rgba(61, 40, 23, 0.5) 50%, rgba(45, 27, 0, 0.6) 100% ); clip-path: polygon( 0% 100%, 0% 70%, 6% 65%, 12% 60%, 18% 55%, 24% 50%, 30% 45%, 36% 42%, 42% 40%, 48% 38%, 54% 40%, 60% 43%, 66% 47%, 72% 52%, 78% 56%, 84% 60%, 90% 64%, 96% 68%, 100% 72%, 100% 100% ); filter: blur(4px); opacity: 0.5; } /* Far distant mountains (barely visible) - lightest brown */ .campfire-scene-wrapper .mountains-far { position: absolute; bottom: 160px; left: -5%; width: 110%; height: 80px; z-index: -1; background: linear-gradient(to bottom, rgba(122, 90, 71, 0.2) 0%, rgba(80, 54, 40, 0.25) 50%, rgba(61, 40, 23, 0.3) 100% ); clip-path: polygon( 0% 100%, 0% 75%, 10% 72%, 20% 68%, 30% 65%, 40% 63%, 50% 62%, 60% 64%, 70% 67%, 80% 71%, 90% 75%, 100% 78%, 100% 100% ); filter: blur(7px); opacity: 0.3; } /* Ground plane with perspective - DENSE MEADOW TEXTURE */ .campfire-scene-wrapper .ground { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotateX(65deg); transform-origin: center bottom; width: 120%; height: 250px; z-index: 10; background: /* Fire illumination zone */ radial-gradient(ellipse at 50% 60%, rgba(255, 111, 0, 0.18) 0%, rgba(255, 160, 0, 0.1) 15%, rgba(255, 193, 7, 0.05) 30%, transparent 45% ), /* SMALL FLOWERS - Yellow & White dots */ radial-gradient(circle at 18% 48%, rgba(255, 223, 0, 0.8) 0%, rgba(255, 223, 0, 0.8) 0.4%, transparent 0.4%), radial-gradient(circle at 24% 54%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 0.3%, transparent 0.3%), radial-gradient(circle at 33% 58%, rgba(255, 223, 0, 0.75) 0%, rgba(255, 223, 0, 0.75) 0.5%, transparent 0.5%), radial-gradient(circle at 41% 62%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 0.35%, transparent 0.35%), radial-gradient(circle at 59% 59%, rgba(255, 223, 0, 0.7) 0%, rgba(255, 223, 0, 0.7) 0.45%, transparent 0.45%), radial-gradient(circle at 66% 54%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 0.3%, transparent 0.3%), radial-gradient(circle at 76% 50%, rgba(255, 223, 0, 0.8) 0%, rgba(255, 223, 0, 0.8) 0.4%, transparent 0.4%), radial-gradient(circle at 82% 57%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 0.35%, transparent 0.35%), radial-gradient(circle at 28% 68%, rgba(255, 223, 0, 0.75) 0%, rgba(255, 223, 0, 0.75) 0.5%, transparent 0.5%), radial-gradient(circle at 46% 74%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 0.3%, transparent 0.3%), radial-gradient(circle at 54% 76%, rgba(255, 223, 0, 0.7) 0%, rgba(255, 223, 0, 0.7) 0.45%, transparent 0.45%), radial-gradient(circle at 72% 63%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 0.35%, transparent 0.35%), /* ROCKS - More scattered, various sizes */ radial-gradient(circle at 15% 44%, rgba(60, 60, 60, 0.9) 0%, rgba(60, 60, 60, 0.9) 1.2%, transparent 1.2%), radial-gradient(circle at 25% 45%, rgba(60, 60, 60, 0.9) 0%, rgba(60, 60, 60, 0.9) 1.5%, transparent 1.5%), radial-gradient(circle at 32% 50%, rgba(70, 70, 70, 0.85) 0%, rgba(70, 70, 70, 0.85) 2%, transparent 2%), radial-gradient(circle at 38% 47%, rgba(55, 55, 55, 0.8) 0%, rgba(55, 55, 55, 0.8) 1.3%, transparent 1.3%), radial-gradient(circle at 68% 48%, rgba(65, 65, 65, 0.9) 0%, rgba(65, 65, 65, 0.9) 1.8%, transparent 1.8%), radial-gradient(circle at 75% 52%, rgba(55, 55, 55, 0.85) 0%, rgba(55, 55, 55, 0.85) 1.5%, transparent 1.5%), radial-gradient(circle at 85% 54%, rgba(65, 65, 65, 0.8) 0%, rgba(65, 65, 65, 0.8) 1.4%, transparent 1.4%), radial-gradient(circle at 40% 58%, rgba(60, 60, 60, 0.8) 0%, rgba(60, 60, 60, 0.8) 1.2%, transparent 1.2%), radial-gradient(circle at 60% 55%, rgba(70, 70, 70, 0.9) 0%, rgba(70, 70, 70, 0.9) 2.2%, transparent 2.2%), radial-gradient(circle at 45% 65%, rgba(65, 65, 65, 0.85) 0%, rgba(65, 65, 65, 0.85) 1.6%, transparent 1.6%), radial-gradient(circle at 55% 62%, rgba(58, 58, 58, 0.8) 0%, rgba(58, 58, 58, 0.8) 1.4%, transparent 1.4%), radial-gradient(circle at 27% 60%, rgba(62, 62, 62, 0.75) 0%, rgba(62, 62, 62, 0.75) 1.1%, transparent 1.1%), radial-gradient(circle at 50% 70%, rgba(68, 68, 68, 0.8) 0%, rgba(68, 68, 68, 0.8) 1.7%, transparent 1.7%), radial-gradient(circle at 73% 68%, rgba(60, 60, 60, 0.75) 0%, rgba(60, 60, 60, 0.75) 1.3%, transparent 1.3%), radial-gradient(circle at 35% 75%, rgba(65, 65, 65, 0.8) 0%, rgba(65, 65, 65, 0.8) 1.5%, transparent 1.5%), /* GRASS TUFTS - Dense coverage, various sizes */ radial-gradient(circle at 12% 46%, rgba(74, 124, 89, 0.7) 0%, rgba(74, 124, 89, 0.35) 0.9%, transparent 1.4%), radial-gradient(circle at 20% 50%, rgba(74, 124, 89, 0.6) 0%, rgba(74, 124, 89, 0.3) 1%, transparent 1.5%), radial-gradient(circle at 22% 52%, rgba(85, 135, 100, 0.5) 0%, rgba(85, 135, 100, 0.2) 0.8%, transparent 1.2%), radial-gradient(circle at 28% 49%, rgba(80, 130, 95, 0.6) 0%, rgba(80, 130, 95, 0.3) 1.1%, transparent 1.6%), radial-gradient(circle at 35% 55%, rgba(74, 124, 89, 0.6) 0%, rgba(74, 124, 89, 0.3) 1.2%, transparent 1.8%), radial-gradient(circle at 37% 57%, rgba(90, 140, 105, 0.5) 0%, rgba(90, 140, 105, 0.2) 0.9%, transparent 1.3%), radial-gradient(circle at 43% 60%, rgba(74, 124, 89, 0.65) 0%, rgba(74, 124, 89, 0.3) 1%, transparent 1.5%), radial-gradient(circle at 50% 52%, rgba(85, 135, 100, 0.55) 0%, rgba(85, 135, 100, 0.25) 0.85%, transparent 1.3%), radial-gradient(circle at 57% 58%, rgba(74, 124, 89, 0.6) 0%, rgba(74, 124, 89, 0.3) 1.15%, transparent 1.7%), radial-gradient(circle at 65% 53%, rgba(74, 124, 89, 0.65) 0%, rgba(74, 124, 89, 0.3) 1.1%, transparent 1.7%), radial-gradient(circle at 67% 51%, rgba(80, 130, 95, 0.5) 0%, rgba(80, 130, 95, 0.2) 0.7%, transparent 1.1%), radial-gradient(circle at 72% 55%, rgba(90, 140, 105, 0.55) 0%, rgba(90, 140, 105, 0.25) 0.95%, transparent 1.4%), radial-gradient(circle at 78% 56%, rgba(74, 124, 89, 0.6) 0%, rgba(74, 124, 89, 0.3) 1%, transparent 1.6%), radial-gradient(circle at 88% 52%, rgba(85, 135, 100, 0.6) 0%, rgba(85, 135, 100, 0.3) 1.05%, transparent 1.55%), radial-gradient(circle at 17% 63%, rgba(74, 124, 89, 0.65) 0%, rgba(74, 124, 89, 0.3) 1.1%, transparent 1.65%), radial-gradient(circle at 25% 67%, rgba(90, 140, 105, 0.5) 0%, rgba(90, 140, 105, 0.2) 0.9%, transparent 1.35%), radial-gradient(circle at 32% 72%, rgba(74, 124, 89, 0.6) 0%, rgba(74, 124, 89, 0.3) 1%, transparent 1.5%), radial-gradient(circle at 48% 68%, rgba(85, 135, 100, 0.55) 0%, rgba(85, 135, 100, 0.25) 1%, transparent 1.5%), radial-gradient(circle at 52% 66%, rgba(74, 124, 89, 0.6) 0%, rgba(74, 124, 89, 0.3) 1.3%, transparent 1.9%), radial-gradient(circle at 42% 70%, rgba(90, 140, 105, 0.5) 0%, rgba(90, 140, 105, 0.2) 0.8%, transparent 1.2%), radial-gradient(circle at 58% 72%, rgba(74, 124, 89, 0.55) 0%, rgba(74, 124, 89, 0.25) 1.1%, transparent 1.6%), radial-gradient(circle at 64% 69%, rgba(85, 135, 100, 0.6) 0%, rgba(85, 135, 100, 0.3) 1%, transparent 1.5%), radial-gradient(circle at 77% 65%, rgba(74, 124, 89, 0.65) 0%, rgba(74, 124, 89, 0.3) 1.15%, transparent 1.7%), radial-gradient(circle at 85% 71%, rgba(90, 140, 105, 0.55) 0%, rgba(90, 140, 105, 0.25) 0.95%, transparent 1.4%), /* Perspective grid lines */ repeating-radial-gradient( ellipse at 50% 60%, transparent 0px, transparent 55px, rgba(0, 0, 0, 0.08) 56px, transparent 57px ), /* Base grass patches (larger zones) */ radial-gradient(ellipse at 30% 40%, rgba(74, 124, 89, 0.3) 0%, transparent 25%), radial-gradient(ellipse at 70% 60%, rgba(74, 124, 89, 0.25) 0%, transparent 20%), radial-gradient(ellipse at 20% 70%, rgba(74, 124, 89, 0.2) 0%, transparent 18%), radial-gradient(ellipse at 80% 45%, rgba(74, 124, 89, 0.25) 0%, transparent 22%), /* Base dirt with radial darkness */ radial-gradient(ellipse at center, #3d2817 0%, #2d1b00 40%, #1a0f00 100%); border-radius: 50%; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 -10px 40px rgba(0, 0, 0, 0.5); } /* Ambient fire glow on ground */ .campfire-scene-wrapper .ground-glow { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: 300px; height: 200px; background: radial-gradient(ellipse at center, rgba(255, 111, 0, 0.4) 0%, rgba(255, 160, 0, 0.2) 30%, rgba(255, 193, 7, 0.1) 50%, transparent 70%); filter: blur(40px); animation: groundGlowPulse 2s ease-in-out infinite; pointer-events: none; } @keyframes groundGlowPulse { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } } /* GRASS - Growing FROM ground, behind fire pit */ .campfire-scene-wrapper .grass-cluster { position: absolute; bottom: 95px; pointer-events: none; z-index: 47; } /* Left grass cluster */ .campfire-scene-wrapper .grass-left { left: 22%; width: 60px; height: 40px; } /* Right grass cluster */ .campfire-scene-wrapper .grass-right { right: 22%; width: 60px; height: 40px; } /* Grass tuft base */ .campfire-scene-wrapper .grass-tuft-base { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 12px; background: radial-gradient(ellipse at center bottom, rgba(74, 124, 89, 0.7) 0%, rgba(74, 124, 89, 0.4) 50%, transparent 100%); border-radius: 50%; } /* Individual grass blades growing up */ .campfire-scene-wrapper .grass-blade { position: absolute; bottom: 8px; width: 4px; height: 24px; background: linear-gradient(to top, rgba(74, 124, 89, 0) 0%, rgba(74, 124, 89, 0.9) 20%, rgba(95, 138, 106, 0.85) 60%, rgba(74, 124, 89, 0.5) 100%); border-radius: 50% 50% 0 0; transform-origin: bottom center; animation: grassSway 3s ease-in-out infinite; } .campfire-scene-wrapper .grass-blade:nth-child(1) { left: 10%; height: 22px; animation-delay: 0s; } .campfire-scene-wrapper .grass-blade:nth-child(2) { left: 25%; height: 26px; animation-delay: 0.3s; } .campfire-scene-wrapper .grass-blade:nth-child(3) { left: 40%; height: 20px; animation-delay: 0.6s; } .campfire-scene-wrapper .grass-blade:nth-child(4) { left: 55%; height: 24px; animation-delay: 0.9s; } .campfire-scene-wrapper .grass-blade:nth-child(5) { left: 70%; height: 23px; animation-delay: 1.2s; } .campfire-scene-wrapper .grass-blade:nth-child(6) { left: 85%; height: 25px; animation-delay: 1.5s; } @keyframes grassSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } /* ======================================== FIRE PIT - ULTRA REALISTIC 5-LAYER FIRE ======================================== */ /* Fire pit elevated base platform */ .campfire-scene-wrapper .fire-pit-base { position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%); width: 150px; height: 25px; background: radial-gradient(ellipse at center, rgba(61, 40, 23, 0.95) 0%, rgba(45, 27, 0, 0.8) 50%, rgba(26, 15, 0, 0.5) 80%, transparent 100%); border-radius: 50%; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.9), inset 0 3px 10px rgba(0, 0, 0, 0.7); z-index: 45; } .campfire-scene-wrapper .fire-pit { position: absolute; bottom: 85px; left: 50%; transform: translateX(-50%); width: 160px; height: 160px; z-index: 50; } /* Stone ring - ENHANCED */ .campfire-scene-wrapper .stone-ring { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 200px; height: 60px; filter: drop-shadow(0 0 20px rgba(255, 111, 0, 0.2)); } .campfire-scene-wrapper .stone { position: absolute; background: linear-gradient(135deg, #7a7a7a 0%, #4a4a4a 50%, #3a3a3a 100%); border-radius: 50% 40% 50% 40%; box-shadow: /* Fire glow on left side */ -3px 0 12px rgba(255, 111, 0, 0.5), /* Inner shadows */ inset -3px -3px 8px rgba(0, 0, 0, 0.7), inset 2px 2px 5px rgba(255, 255, 255, 0.1), /* Ground shadow */ 0 4px 12px rgba(0, 0, 0, 0.9); } .campfire-scene-wrapper .stone:nth-child(1) { width: 48px; height: 36px; top: 18%; left: 0%; transform: rotate(-15deg); } .campfire-scene-wrapper .stone:nth-child(2) { width: 42px; height: 33px; top: 8%; left: 18%; transform: rotate(8deg); } .campfire-scene-wrapper .stone:nth-child(3) { width: 50px; height: 38px; top: 3%; left: 43%; transform: rotate(-5deg); } .campfire-scene-wrapper .stone:nth-child(4) { width: 45px; height: 34px; top: 6%; right: 18%; transform: rotate(12deg); } .campfire-scene-wrapper .stone:nth-child(5) { width: 48px; height: 36px; top: 16%; right: 0%; transform: rotate(-8deg); } /* Wood logs (crossed) */ .campfire-scene-wrapper .logs { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 120px; height: 40px; } .campfire-scene-wrapper .log { position: absolute; width: 90px; height: 20px; background: /* Wood grain */ repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0px, transparent 1px, transparent 3px), /* Wood color with burn marks */ linear-gradient(135deg, #4e342e 0%, #3d2817 30%, #1a0f00 60%, #000 100%); border-radius: 25px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9), 0 3px 10px rgba(0, 0, 0, 0.8); top: 50%; left: 50%; } .campfire-scene-wrapper .log:nth-child(1) { transform: translate(-50%, -50%) rotate(-35deg); } .campfire-scene-wrapper .log:nth-child(2) { transform: translate(-50%, -50%) rotate(35deg); } .campfire-scene-wrapper .log:nth-child(3) { transform: translate(-50%, -50%) rotate(0deg); width: 70px; } /* Glowing embers on logs */ .campfire-scene-wrapper .log-ember { position: absolute; width: 8px; height: 8px; background: radial-gradient(circle, rgba(255, 255, 100, 1) 0%, rgba(255, 111, 0, 0.9) 40%, rgba(214, 40, 40, 0.6) 100%); border-radius: 50%; box-shadow: 0 0 15px rgba(255, 111, 0, 1); animation: emberGlow 2s ease-in-out infinite; } .campfire-scene-wrapper .log-ember:nth-child(1) { top: 30%; left: 25%; animation-delay: 0s; } .campfire-scene-wrapper .log-ember:nth-child(2) { top: 35%; right: 30%; animation-delay: 0.5s; } .campfire-scene-wrapper .log-ember:nth-child(3) { bottom: 25%; left: 40%; animation-delay: 1s; } @keyframes emberGlow { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } /* 5-LAYER REALISTIC FIRE */ .campfire-scene-wrapper .fire-container { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 100px; height: 120px; } .campfire-scene-wrapper .flame-layer { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; filter: blur(var(--blur)); animation: flameFlicker var(--duration) ease-in-out infinite alternate; will-change: transform, opacity; transform: translateZ(0); animation-delay: var(--delay); } /* Layer 1: Dark red base (largest, most blurred) */ .campfire-scene-wrapper .flame-layer-1 { width: 90px; height: 110px; background: radial-gradient(ellipse at center bottom, rgba(214, 40, 40, 0.8) 0%, rgba(214, 40, 40, 0.5) 40%, rgba(100, 20, 20, 0.3) 70%, transparent 100%); --blur: 12px; --duration: 1s; --delay: 0s; } /* Layer 2: Red-orange flames */ .campfire-scene-wrapper .flame-layer-2 { width: 75px; height: 95px; background: radial-gradient(ellipse at center bottom, rgba(255, 87, 34, 1) 0%, rgba(255, 111, 0, 0.9) 30%, rgba(214, 40, 40, 0.6) 60%, transparent 100%); --blur: 8px; --duration: 0.9s; --delay: 0.1s; } /* Layer 3: Orange flames */ .campfire-scene-wrapper .flame-layer-3 { width: 60px; height: 80px; background: radial-gradient(ellipse at center bottom, rgba(255, 160, 0, 1) 0%, rgba(255, 111, 0, 0.95) 35%, rgba(255, 87, 34, 0.7) 65%, transparent 100%); --blur: 5px; --duration: 0.8s; --delay: 0.2s; } /* Layer 4: Yellow flames */ .campfire-scene-wrapper .flame-layer-4 { width: 45px; height: 65px; background: radial-gradient(ellipse at center bottom, rgba(255, 223, 0, 1) 0%, rgba(255, 193, 7, 1) 25%, rgba(255, 160, 0, 0.9) 60%, transparent 100%); --blur: 3px; --duration: 0.7s; --delay: 0.3s; } /* Layer 5: White hot core */ .campfire-scene-wrapper .flame-layer-5 { width: 30px; height: 50px; background: radial-gradient(ellipse at center bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 200, 1) 15%, rgba(255, 223, 0, 1) 40%, rgba(255, 193, 7, 0.8) 70%, transparent 100%); --blur: 1px; --duration: 0.6s; --delay: 0.4s; } @keyframes flameFlicker { 0% { transform: translateX(-50%) scaleY(1) scaleX(1); opacity: 1; } 33% { transform: translateX(-48%) scaleY(1.08) scaleX(0.96); opacity: 0.95; } 66% { transform: translateX(-52%) scaleY(0.94) scaleX(1.04); opacity: 0.98; } 100% { transform: translateX(-50%) scaleY(1.02) scaleX(0.98); opacity: 1; } } /* Heat wave distortion */ .campfire-scene-wrapper .heat-wave { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 200px; height: 150px; backdrop-filter: blur(1px); animation: heatDistort 2s ease-in-out infinite; /* 🚀 PERF: Slowed from 0.15s */ pointer-events: none; z-index: 40; } @keyframes heatDistort { 0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1); } 25% { transform: translateX(-51%) translateY(-1px) scaleX(1.01); } 50% { transform: translateX(-49%) translateY(1px) scaleX(0.99); } 75% { transform: translateX(-50.5%) translateY(-0.5px) scaleX(1.005); } } /* Fire glow (radial pulse) - ENHANCED */ .campfire-scene-wrapper .fire-glow { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 180px; height: 70px; background: radial-gradient(ellipse at center, rgba(255, 111, 0, 1) 0%, rgba(255, 160, 0, 0.8) 25%, rgba(255, 193, 7, 0.5) 45%, rgba(252, 163, 17, 0.2) 65%, transparent 80%); filter: blur(25px); animation: fireGlowPulse 1.5s ease-in-out infinite; } @keyframes fireGlowPulse { 0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } } /* ======================================== EMBER PARTICLES (RISING SPARKS) ======================================== */ .campfire-scene-wrapper .embers-container { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); width: 120px; height: 300px; pointer-events: none; overflow: visible; } .campfire-scene-wrapper .ember-particle { position: absolute; width: 5px; height: 5px; background: radial-gradient(circle, rgba(255, 255, 150, 1) 0%, rgba(255, 193, 7, 1) 30%, rgba(255, 111, 0, 0.8) 60%, transparent 100%); border-radius: 50%; box-shadow: 0 0 10px rgba(255, 111, 0, 1); animation: emberRise linear infinite; will-change: transform, opacity; transform: translateZ(0); bottom: 0; } .campfire-scene-wrapper .ember-particle:nth-child(1) { left: 40%; animation-duration: 3.5s; animation-delay: 0s; } .campfire-scene-wrapper .ember-particle:nth-child(2) { left: 55%; animation-duration: 4s; animation-delay: 0.7s; } .campfire-scene-wrapper .ember-particle:nth-child(3) { left: 48%; animation-duration: 3.8s; animation-delay: 1.4s; } .campfire-scene-wrapper .ember-particle:nth-child(4) { left: 35%; animation-duration: 4.2s; animation-delay: 2.1s; } .campfire-scene-wrapper .ember-particle:nth-child(5) { left: 60%; animation-duration: 3.6s; animation-delay: 2.8s; } @keyframes emberRise { 0% { bottom: 0; opacity: 1; transform: translateX(0) scale(1); } 100% { bottom: 300px; opacity: 0; transform: translateX(calc(-30px + 60px * var(--drift, 0.5))) scale(0.3); } } /* ======================================== SMOKE PARTICLES ======================================== */ .campfire-scene-wrapper .smoke-container { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); width: 100px; height: 300px; pointer-events: none; overflow: visible; } .campfire-scene-wrapper .smoke-particle { position: absolute; width: 50px; height: 50px; background: radial-gradient(circle, rgba(158, 158, 158, 0.5) 0%, rgba(189, 189, 189, 0.3) 30%, rgba(200, 200, 200, 0.15) 60%, transparent 100%); border-radius: 50%; filter: blur(12px); animation: smokeRise linear infinite; will-change: transform, opacity; transform: translateZ(0); bottom: 0; } .campfire-scene-wrapper .smoke-particle:nth-child(1) { left: 30%; animation-duration: 5s; animation-delay: 0s; } .campfire-scene-wrapper .smoke-particle:nth-child(2) { left: 50%; animation-duration: 6s; animation-delay: 1.5s; } .campfire-scene-wrapper .smoke-particle:nth-child(3) { left: 40%; animation-duration: 5.5s; animation-delay: 3s; } @keyframes smokeRise { 0% { bottom: 0; opacity: 0; transform: translateX(0) scale(0.5) rotate(0deg); } 20% { opacity: 0.6; } 100% { bottom: 300px; opacity: 0; transform: translateX(calc(-60px + 120px * var(--drift, 0.5))) scale(2) rotate(360deg); } } /* ======================================== TOTEM POLE - VERTICAL STACKING FORMATION ======================================== */ /* Totem Pole Container */ .campfire-scene-wrapper .totem-pole { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; position: relative; z-index: 10; } /* Totem Segment */ .campfire-scene-wrapper .totem-segment { width: 130px; height: 100px; background: /* Wood grain */ linear-gradient(90deg, #5c4033 0%, #4a3428 20%, #5c4033 40%, #3d2817 60%, #5c4033 80%, #4a3428 100% ); border: 4px solid #2d1b00; border-radius: 12px; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset -8px 0 20px rgba(0,0,0,0.6), inset 8px 0 20px rgba(0,0,0,0.4), 0 6px 15px rgba(0,0,0,0.8); transition: all 0.6s ease; cursor: pointer; } /* Inactive state */ .campfire-scene-wrapper .totem-segment.inactive { filter: brightness(0.3) saturate(0.3); box-shadow: inset -8px 0 20px rgba(0,0,0,0.9), inset 8px 0 20px rgba(0,0,0,0.7), 0 6px 15px rgba(0,0,0,0.9); cursor: default; } .campfire-scene-wrapper .totem-segment.inactive .totem-animal { opacity: 0.3; } /* Active state */ .campfire-scene-wrapper .totem-segment.active { animation: segmentPulse 2s ease-in-out infinite; box-shadow: inset -8px 0 20px rgba(0,0,0,0.4), inset 8px 0 20px rgba(0,0,0,0.2), 0 6px 15px rgba(0,0,0,0.8), 0 0 30px rgba(252, 163, 17, 0.4), 0 0 50px rgba(255, 107, 53, 0.2); } @keyframes segmentPulse { 0%, 100% { box-shadow: inset -8px 0 20px rgba(0,0,0,0.4), inset 8px 0 20px rgba(0,0,0,0.2), 0 6px 15px rgba(0,0,0,0.8), 0 0 30px rgba(252, 163, 17, 0.4), 0 0 50px rgba(255, 107, 53, 0.2); } 50% { box-shadow: inset -8px 0 20px rgba(0,0,0,0.4), inset 8px 0 20px rgba(0,0,0,0.2), 0 6px 15px rgba(0,0,0,0.8), 0 0 40px rgba(252, 163, 17, 0.6), 0 0 70px rgba(255, 107, 53, 0.3); } } /* Wood grain vertical lines */ .campfire-scene-wrapper .totem-segment::before { content: ''; position: absolute; top: 0; left: 15%; width: 3px; height: 100%; background: linear-gradient(to bottom, rgba(122, 90, 71, 0.4) 0%, transparent 50%, rgba(45, 27, 0, 0.6) 100%); } .campfire-scene-wrapper .totem-segment::after { content: ''; position: absolute; top: 0; right: 20%; width: 2px; height: 100%; background: linear-gradient(to bottom, rgba(45, 27, 0, 0.5) 0%, transparent 50%, rgba(122, 90, 71, 0.3) 100%); } /* Tribal patterns */ .campfire-scene-wrapper .totem-pattern { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 20px; height: 60px; background: /* Zigzag pattern */ linear-gradient(45deg, transparent 48%, #fca311 48%, #fca311 52%, transparent 52%), linear-gradient(-45deg, transparent 48%, #fca311 48%, #fca311 52%, transparent 52%); background-size: 10px 10px; opacity: 0; transition: opacity 0.6s ease; } .campfire-scene-wrapper .totem-segment.active .totem-pattern { opacity: 0.6; } .campfire-scene-wrapper .totem-pattern.right { left: auto; right: 8px; } /* Animal image (Twemoji) */ .campfire-scene-wrapper .totem-animal { width: 75px; height: 75px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: sepia(0.2) contrast(1.15); transition: all 0.6s ease; position: relative; z-index: 2; } .campfire-scene-wrapper .totem-segment.active .totem-animal { filter: sepia(0.1) contrast(1.2) brightness(1.1); animation: animalGlow 2s ease-in-out infinite; } @keyframes animalGlow { 0%, 100% { filter: sepia(0.1) contrast(1.2) brightness(1.1) drop-shadow(0 0 5px rgba(252, 163, 17, 0.3)); } 50% { filter: sepia(0.1) contrast(1.2) brightness(1.15) drop-shadow(0 0 10px rgba(252, 163, 17, 0.5)); } } /* User name label */ .campfire-scene-wrapper .user-label { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); background: rgba(45, 27, 0, 0.8); padding: 4px 12px; border-radius: 6px; font-size: 11px; color: #7a5a47; white-space: nowrap; border: 1px solid #3d2817; transition: all 0.6s ease; pointer-events: none; } .campfire-scene-wrapper .totem-segment.active .user-label { color: #fca311; border-color: #fca311; background: rgba(45, 27, 0, 0.95); } /* Totem Base */ .campfire-scene-wrapper .totem-base { width: 160px; height: 30px; background: linear-gradient(to right, #2d1b00 0%, #3d2817 20%, #2d1b00 40%, #1a0f08 50%, #2d1b00 60%, #3d2817 80%, #2d1b00 100% ); border-radius: 6px; margin-top: -4px; box-shadow: 0 6px 12px rgba(0,0,0,0.9), inset 0 -4px 8px rgba(0,0,0,0.5); position: relative; } /* FULL ACTIVATION STATE (4/4 users online) */ .campfire-scene-wrapper .campfire-scene.full-activation .totem-segment { animation: fullPowerPulse 1s ease-in-out infinite !important; } @keyframes fullPowerPulse { 0%, 100% { box-shadow: inset -8px 0 20px rgba(0,0,0,0.3), inset 8px 0 20px rgba(0,0,0,0.1), 0 6px 15px rgba(0,0,0,0.8), 0 0 40px rgba(252, 163, 17, 0.8), 0 0 80px rgba(255, 107, 53, 0.5); } 50% { box-shadow: inset -8px 0 20px rgba(0,0,0,0.3), inset 8px 0 20px rgba(0,0,0,0.1), 0 6px 15px rgba(0,0,0,0.8), 0 0 60px rgba(252, 163, 17, 1), 0 0 120px rgba(255, 107, 53, 0.7); } } /* Lightning burst (full activation effect) */ .campfire-scene-wrapper .lightning-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .campfire-scene-wrapper .campfire-scene.full-activation .lightning-burst { opacity: 1; animation: lightningPulse 2s ease-in-out infinite; } @keyframes lightningPulse { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1) rotate(180deg); } } .campfire-scene-wrapper .lightning-bolt { position: absolute; width: 4px; height: 80px; background: linear-gradient(to bottom, rgba(252, 163, 17, 0.8) 0%, rgba(255, 193, 7, 0.6) 50%, transparent 100%); top: 50%; left: 50%; transform-origin: top center; } .campfire-scene-wrapper .lightning-bolt:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg); } .campfire-scene-wrapper .lightning-bolt:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg); } /* ======================================== FIREFLIES (СВЕТУЛКИ) ======================================== */ .campfire-scene-wrapper .firefly { position: absolute; width: 4px; height: 4px; background: #ffc107; border-radius: 50%; box-shadow: 0 0 12px #ffc107; animation: fireflyFloat linear infinite; will-change: transform, opacity; transform: translateZ(0); opacity: 0; } .campfire-scene-wrapper .firefly:nth-child(1) { left: 15%; top: 20%; animation-duration: 10s; animation-delay: 0s; } .campfire-scene-wrapper .firefly:nth-child(2) { left: 80%; top: 35%; animation-duration: 12s; animation-delay: 2s; } .campfire-scene-wrapper .firefly:nth-child(3) { left: 40%; top: 15%; animation-duration: 11s; animation-delay: 4s; } .campfire-scene-wrapper .firefly:nth-child(4) { left: 65%; top: 40%; animation-duration: 13s; animation-delay: 6s; } @keyframes fireflyFloat { 0%, 100% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 50% { transform: translate( calc(-40px + 80px * var(--fx, 0.5)), calc(-60px + 120px * var(--fy, 0.5)) ); opacity: 1; } 95% { opacity: 1; } } /* ======================================== INFO PANEL ======================================== */ .campfire-scene-wrapper .info-panel { margin-top: 30px; /* Site's dark wood background */ background: rgba(45, 27, 0, 0.85); padding: 20px; border-radius: 20px; /* Site's clay brown border */ border: 3px solid #6d4c41; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); } .campfire-scene-wrapper .info-panel h2 { /* Site's ember yellow */ color: #fca311; font-size: 18px; margin-bottom: 15px; text-shadow: 0 0 10px rgba(252, 163, 17, 0.5); } .campfire-scene-wrapper .info-panel ul { list-style: none; padding: 0; } .campfire-scene-wrapper .info-panel li { margin: 10px 0; padding-left: 30px; position: relative; color: #d7ccc8; font-size: 13px; line-height: 1.6; } .campfire-scene-wrapper .info-panel li::before { content: '🔥'; position: absolute; left: 0; top: 0; } .campfire-scene-wrapper .tech-badge { display: inline-block; background: rgba(252, 163, 17, 0.2); color: #fca311; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; margin: 0 4px; border: 1px solid rgba(252, 163, 17, 0.3); } /* ======================================== MOBILE OPTIMIZATIONS ======================================== */ @media (max-width: 768px) { .campfire-scene-wrapper .campfire-scene { height: 400px; /* Keep original height */ } .campfire-scene-wrapper .mountains { height: 80px; bottom: 100px; } /* MOBILE: Remove heavy backdrop-filter */ .campfire-scene-wrapper .heat-wave { backdrop-filter: none; -webkit-backdrop-filter: none; filter: opacity(0.7); } /* MOBILE: Simplified box-shadows for performance */ .campfire-scene-wrapper .moon { box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(200, 220, 240, 0.3), inset -6px -6px 18px rgba(150, 160, 180, 0.3); } .campfire-scene-wrapper .mountains-distant { height: 70px; bottom: 115px; } .campfire-scene-wrapper .mountains-far { height: 60px; bottom: 130px; } /* Totem responsive @768px */ .campfire-scene-wrapper .totem-segment { width: 110px; height: 85px; } .campfire-scene-wrapper .totem-animal { width: 60px; height: 60px; } .campfire-scene-wrapper .fire-pit { width: 140px; height: 140px; } .campfire-scene-wrapper .fire-container { width: 90px; height: 110px; } .campfire-scene-wrapper .moon { width: 60px; height: 60px; top: 20px; right: 20px; font-size: 18px; } .campfire-scene-wrapper .header h1 { font-size: 22px; } .campfire-scene-wrapper .counter-badge { font-size: 14px; padding: 8px 18px; } /* Reduce particles for performance */ .campfire-scene-wrapper .ember-particle:nth-child(n+4), .campfire-scene-wrapper .firefly:nth-child(n+3) { display: none; } /* 🚀 PERF: Reduce blur() filters on mobile */ .campfire-scene-wrapper .cloud { filter: blur(4px); /* was 8px */ } .campfire-scene-wrapper .smoke-particle { filter: blur(6px); /* was 12px */ } .campfire-scene-wrapper .fire-glow { filter: blur(15px); /* was 25px */ } .campfire-scene-wrapper .ground-glow { filter: blur(20px); /* was 40px */ } /* 🚀 PERF: Simplify mountain blur */ .campfire-scene-wrapper .mountains-distant { filter: blur(2px); /* was 4px */ } .campfire-scene-wrapper .mountains-far { filter: blur(3px); /* was 7px */ } } @media (max-width: 480px) { .campfire-scene-wrapper .campfire-scene { height: 400px; /* Keep original height */ } .campfire-scene-wrapper .mountains { height: 70px; bottom: 85px; } .campfire-scene-wrapper .mountains-distant { height: 60px; bottom: 98px; } .campfire-scene-wrapper .mountains-far { height: 50px; bottom: 112px; } /* Totem responsive @480px */ .campfire-scene-wrapper .totem-segment { width: 100px; height: 75px; } .campfire-scene-wrapper .totem-animal { width: 52px; height: 52px; } .campfire-scene-wrapper .user-label { font-size: 10px; padding: 3px 10px; } .campfire-scene-wrapper .grass-cluster { width: 50px; height: 35px; bottom: 92px; } .campfire-scene-wrapper .grass-blade { height: 18px; } } /* ======================================== PERFORMANCE: Reduce motion ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }