/*
Theme Name: Tattoo Spray Glossier DTC
Theme URI: https://tattoospray.co.uk/
Author: Antigravity DeepMind Team
Author URI: https://tattoospray.co.uk/
Description: A bold, premium Glossier-style DTC e-commerce WordPress theme for TATTOO SPRAY®. Designed with high-impact color blocks, Playfair italic headlines, Tailwind CSS, touchless spray aftercare showcases, and seamless single-product purchase flows.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: tattoospray
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Base Styles */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-sans {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Custom Utilities */
.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.text-gradient-pink {
  background: linear-gradient(135deg, #FF007A 0%, #FF4D4D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-glossier-gradient {
  background: linear-gradient(135deg, #FF007A 0%, #FF4D4D 50%, #FF9F1C 100%);
}

/* Micro-animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Infinite Logo Marquee Animation */
@keyframes marqueeScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-scroll {
  display: flex;
  width: max-content;
  animation: marqueeScroll 35s linear infinite;
}

.animate-marquee-scroll:hover {
  animation-play-state: paused;
}