/* Smoke Effect Styles */
html, body {
  overscroll-behavior-y: none; /* Prevent "bounce" effect showing background */
  background-color: #0a0a0a;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
  
  /* Improve touch scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better safe area support for notched phones */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Custom scrollbar for mobile horizontal scroll areas */
.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #D32F2F;
  border-radius: 2px;
}

/* Hide scrollbar on mobile while keeping scroll functionality */
@media (max-width: 768px) {
  .custom-scrollbar {
    scrollbar-width: none; /* Firefox */
  }
  .custom-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

.smoke-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.smoke {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(20px);
  animation: smoke-rise 3s ease-out infinite;
  opacity: 0;
}

.smoke-1 {
  animation-delay: 0s;
  left: 40%;
}

.smoke-2 {
  animation-delay: 1s;
  left: 50%;
  width: 120px;
  height: 120px;
}

.smoke-3 {
  animation-delay: 2s;
  left: 60%;
  width: 80px;
  height: 80px;
}

@keyframes smoke-rise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-150px) scale(2);
  }
}

/* Additional floating smoke puffs */
.smoke::before,
.smoke::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(15px);
}

.smoke::before {
  top: -20%;
  left: -20%;
  animation: smoke-drift-left 3s ease-out infinite;
}

.smoke::after {
  top: -10%;
  right: -30%;
  animation: smoke-drift-right 3s ease-out infinite;
}

@keyframes smoke-drift-left {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-30px, -80px) scale(1.5);
    opacity: 0;
  }
}

@keyframes smoke-drift-right {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  100% {
    transform: translate(30px, -100px) scale(1.8);
    opacity: 0;
  }
}

/* Float animation for the sizzler */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* PRELOADER CSS */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a0a0a; /* match website void color */
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
}

.pl {
  width: 12em;
  height: 12em;
  contain: paint; /* Optimization: isolate painting */
}

.pl__drop,
.pl__drop-inner,
.pl__pan,
.pl__shadow {
  animation: pan 2s cubic-bezier(0.65,0,0.35,1) infinite;
  will-change: transform;
}

.pl__ring {
  animation: flip-ring 2s cubic-bezier(0.65,0,0.35,1) infinite;
  will-change: stroke-dashoffset, stroke-width;
}

.pl__drop {
  transform-origin: 13px 60px;
}

.pl__drop-inner {
  animation-timing-function: cubic-bezier(0.33,0.84,0.67,0.84);
}

.pl__drop--1 { animation-name: drop-1; }
.pl__drop--1 .pl__drop-inner { animation-name: drop-1-inner; }

.pl__drop--2 { animation-name: drop-2; }
.pl__drop--2 .pl__drop-inner { animation-name: drop-2-inner; }

.pl__drop--3 { animation-name: drop-3; transform-origin: 67px 72px; }
.pl__drop--3 .pl__drop-inner { animation-name: drop-3-inner; }

.pl__drop--4 { animation-name: drop-4; transform-origin: 67px 72px; }
.pl__drop--4 .pl__drop-inner { animation-name: drop-4-inner; }

.pl__drop--5 { animation-name: drop-5; transform-origin: 67px 72px; }
.pl__drop--5 .pl__drop-inner { animation-name: drop-5-inner; }

.pl__pan {
  transform-origin: 36px 74px;
}

.pl__ring {
  animation-name: flip-ring;
}

.pl__shadow {
  animation-name: pan-shadow;
  transform-origin: 36px 124.5px;
}

@keyframes drop-1 {
  from { animation-timing-function: steps(1,end); transform: translate(0,0); visibility: hidden; }
  30% { animation-timing-function: linear; transform: translate(0,0); visibility: visible; }
  50%, to { transform: translate(-6px,0); }
}
@keyframes drop-1-inner {
  from, 30% { fill: #D32F2F; transform: translate(0,0); } /* Rust color */
  50%, to { fill: rgba(211,47,47,0); transform: translate(0,-27px); }
}

@keyframes drop-2 {
  from { animation-timing-function: steps(1,end); transform: translate(0,0); visibility: hidden; }
  30% { animation-timing-function: linear; transform: translate(0,0); visibility: visible; }
  50%, to { transform: translate(-8px,0); }
}
@keyframes drop-2-inner {
  from, 30% { fill: #D32F2F; transform: translate(0,0); }
  50%, to { fill: rgba(211,47,47,0); transform: translate(0,-9px); }
}

@keyframes drop-3 {
  from { animation-timing-function: steps(1,end); transform: translate(0,0); visibility: hidden; }
  78% { animation-timing-function: linear; transform: translate(0,0); visibility: visible; }
  98%, to { transform: translate(-24px,0); }
}
@keyframes drop-3-inner {
  from, 78% { fill: #D32F2F; transform: translate(0,0); }
  98%, to { fill: rgba(211,47,47,0); transform: translate(0,-28px); }
}

@keyframes drop-4 {
  from { animation-timing-function: steps(1,end); transform: translate(0,0); visibility: hidden; }
  78% { animation-timing-function: linear; transform: translate(0,0); visibility: visible; }
  98%, to { transform: translate(-8px,0); }
}
@keyframes drop-4-inner {
  from, 78% { fill: #D32F2F; transform: translate(0,0); }
  98%, to { fill: rgba(211,47,47,0); transform: translate(0,-36px); }
}

@keyframes drop-5 {
  from { animation-timing-function: steps(1,end); transform: translate(0,0); visibility: hidden; }
  78% { animation-timing-function: linear; transform: translate(0,0); visibility: visible; }
  98%, to { transform: translate(8px,0); }
}
@keyframes drop-5-inner {
  from, 78% { fill: #D32F2F; transform: translate(0,0); }
  98%, to { fill: rgba(211,47,47,0); transform: translate(0,-32px); }
}

@keyframes flip-ring {
  from, 27% { animation-timing-function: cubic-bezier(0.33,0.84,0.67,0.84); stroke-dashoffset: 20; stroke-width: 4px; }
  53.5% { animation-timing-function: cubic-bezier(0.33,0.16,0.67,0.16); stroke-dashoffset: -100; stroke-width: 10px; }
  80%, to { stroke-dashoffset: -220; stroke-width: 4px; }
}

@keyframes pan {
  from, 88%, to { transform: translate(0,0) rotate(0); }
  20% { animation-timing-function: cubic-bezier(0.33,0.16,0.67,0.16); transform: translate(-5px,0) rotate(-30deg); }
  30% { animation-timing-function: cubic-bezier(0.33,0.84,0.67,0.84); transform: translate(0,0) rotate(20deg); }
  60%, 78% { animation-timing-function: linear; transform: translate(0,0) rotate(0); }
  81.33% { animation-timing-function: linear; transform: translate(0,4px) rotate(0); }
  84.67% { animation-timing-function: linear; transform: translate(0,-2px) rotate(0); }
}

@keyframes pan-shadow {
  from, 88%, to { fill: hsla(223,10%,50%,0.2); transform: scaleX(1); }
  20% { animation-timing-function: cubic-bezier(0.33,0.16,0.67,0.16); fill: hsla(223,10%,50%,0.2); transform: scaleX(0.77); }
  30% { animation-timing-function: cubic-bezier(0.33,0.84,0.67,0.84); fill: hsla(223,10%,50%,0.2); transform: scaleX(1); }
  60%, 78% { animation-timing-function: linear; fill: hsla(223,10%,50%,0.2); transform: scaleX(1); }
  81.33% { animation-timing-function: linear; fill: hsla(223,10%,50%,0.25); transform: scaleX(0.87); }
  84.67% { animation-timing-function: linear; fill: hsla(223,10%,50%,0.225); transform: scaleX(1.065); }
}