/* ====================== */
/* === BASE STYLES === */
/* ====================== */

html.fast-fade        { view-transition-name: root; }

@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }

body.fade-in  { animation: fadeIn 420ms ease-out both;  }
body.fade-out { animation: fadeOut 320ms ease-in  both; }

/* Optional: speed up only the grid to make it feel snappier */
.product-grid.fade-in  { animation-duration: 300ms; }
.product-grid.fade-out { animation-duration: 200ms; }


/* Shop Hero Section */
.shop-hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                  url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819') center/cover;
  perspective: 1000px;
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
  overflow: hidden;
  touch-action: manipulation;
}

/* Mouse Parallax Effect */
        .shop-hero:hover h1 span {
            text-shadow: 0 0 20px rgba(255,255,255,0.6);
        }


.hero-content {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  pointer-events: none;
}

.hero-content,
.hero-content h1 span {
  transition: transform .8s cubic-bezier(.22,.61,.36,1),
              text-shadow .8s ease;
}

.hero-content h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  font-size: 80px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  display: inline-block;
  padding-top: 20vh;
  transform-style: preserve-3d;
}



.hero-content h1 span{
   position: relative;
   display: inline-block;
   color: white;
   pointer-events: auto;
   text-shadow: 0 0 10px rgba(255,255,255,0.3);
   transform-style: preserve-3d;
   transition: transform 0.3s ease, text-shadow 0.3s ease;
   animation: float 3s ease-in-out infinite;
   animation-delay: calc(0.1s * var(--i));
  }

@keyframes float {
            0%, 100% { transform: translateY(0) translateZ(20px); }
            50% { transform: translateY(-10px) translateZ(30px); }
        }

.hero-content{
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 25px 45px rgba(0, 0, 0, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  z-index: -1;
  transform: translateZ(-20px);
        }


.hero-content p {
  font-size: 1rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0.8;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
  transform: translateZ(30px);
}

/* Floating Particles */
        .particle {
            position: absolute;
            background: rgba(255,255,255,0.8);
            border-radius: 50%;
            filter: blur(1px);
            animation: floatParticle linear infinite;
            transform-style: preserve-3d;
            pointer-events: none;
        }

        @keyframes floatParticle {
            to {
                transform: translate3d(0, -100vh, 0) rotate(360deg);
            }
        }

/* Main Shop Container */
.shop-container {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

@media only screen and (max-width: 768px) {
  .shop-hero {
    height: 50vh;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
    overflow: hidden;
    touch-action: manipulation;
  }

  .hero-content h1{ 
    padding-top: 20vh;
    font-size: 30px;
 }
  .hero-content p{
    font-size: 10px;
  }
}