/* ============================================
   SHOPIFY LANDING PAGE — ANIMATION LIBRARY
   ============================================ */

/* ── Scroll-triggered Reveal Animations ── */

/* Elements with [data-animate] start hidden, JS adds .is-visible */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--duration-slower);
  transition-timing-function: var(--ease-out-expo);
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* Fade variants */
[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-left"] {
  transform: translateX(40px);
}

[data-animate="fade-right"] {
  transform: translateX(-40px);
}

[data-animate="fade-in"] {
  transform: none;
}

/* Scale variants */
[data-animate="scale-up"] {
  transform: scale(0.9);
}

[data-animate="scale-down"] {
  transform: scale(1.1);
}

/* Flip variants */
[data-animate="flip-up"] {
  transform: perspective(800px) rotateX(10deg) translateY(30px);
}

[data-animate="flip-left"] {
  transform: perspective(800px) rotateY(-10deg) translateX(30px);
}

/* Blur variant */
[data-animate="blur-in"] {
  transform: scale(0.95);
  filter: blur(10px);
  transition-property: opacity, transform, filter;
}

[data-animate="blur-in"].is-visible {
  filter: blur(0);
}

/* ── Stagger Delays ── */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }
[data-delay="900"] { transition-delay: 0.9s; }
[data-delay="1000"] { transition-delay: 1s; }

/* ── Keyframe Animations ── */

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

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

/* Slow rotate */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.anim-rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

/* Shimmer / Shine effect */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.anim-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsla(0, 0%, 100%, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* Gradient shift */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.anim-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}

/* Glow pulse */
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.05);
  }
}

.anim-glow-pulse {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* Marquee / ticker */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.anim-marquee {
  animation: marquee 30s linear infinite;
}

/* Bounce subtle */
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.anim-bounce {
  animation: bounce-subtle 2s ease-in-out infinite;
}

/* Slide in from bottom */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-slide-up {
  animation: slide-up 0.6s var(--ease-out-expo) forwards;
}

/* Scale in */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-scale-in {
  animation: scale-in 0.5s var(--ease-out-expo) forwards;
}

/* Typing cursor blink */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.anim-blink {
  animation: blink 1s step-end infinite;
}

/* Count up number ticker */
@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Parallax layer markers (JS reads these) ── */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Hero specific animations ── */

.hero-title-line {
  overflow: hidden;
}

.hero-title-line span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.8s var(--ease-out-expo);
}

.hero-title-line.is-visible span {
  transform: translateY(0);
}

/* Stagger for hero title lines */
.hero-title-line:nth-child(1) span { transition-delay: 0.1s; }
.hero-title-line:nth-child(2) span { transition-delay: 0.25s; }
.hero-title-line:nth-child(3) span { transition-delay: 0.4s; }

/* ── Page transition ── */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: var(--z-max);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-in-out);
}

.page-transition-overlay.is-active {
  transform: scaleY(1);
  transform-origin: top;
}

/* ── Hover lift ── */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Hover scale ── */
.hover-scale {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* ── Image hover zoom ── */
.img-zoom-wrapper {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.img-zoom-wrapper img {
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.img-zoom-wrapper:hover img {
  transform: scale(1.08);
}

/* ── Magnetic button effect (JS controlled) ── */
.magnetic {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

/* ── Underline animation for links ── */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── 3D Product Card Tilt ── */
.product-card-3d {
  perspective: 1000px;
}

.product-card-3d .product-card {
  transition: all var(--duration-slow) var(--ease-out-expo);
  transform-style: preserve-3d;
}

.product-card-3d .product-card:hover {
  transform: perspective(800px) rotateY(-5deg) rotateX(3deg) translateY(-8px);
  box-shadow: 20px 20px 60px hsla(0, 0%, 0%, 0.4), 0 0 40px var(--primary-glow);
}

/* ── Scroll-driven parallax text ── */
[data-animate="stagger-lines"] .line {
  opacity: 0;
  transform: translateY(100%) rotateX(-10deg);
  transition: all 0.8s var(--ease-out-expo);
  transform-origin: bottom;
  display: block;
}

[data-animate="stagger-lines"].is-visible .line:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
[data-animate="stagger-lines"].is-visible .line:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
[data-animate="stagger-lines"].is-visible .line:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.3s; }
[data-animate="stagger-lines"].is-visible .line:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.45s; }

/* ── Decorative ring rotation ── */
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.deco-ring {
  position: absolute;
  border: 1px solid hsla(256, 67%, 59%, 0.15);
  border-radius: var(--radius-full);
  pointer-events: none;
  animation: ring-rotate 25s linear infinite;
}

.deco-ring--reverse {
  animation-direction: reverse;
  animation-duration: 35s;
}

/* ── Script font decorative text ── */
.script-accent {
  font-family: var(--font-script);
  font-weight: 500;
  font-style: italic;
  color: var(--primary-light);
  opacity: 0.85;
}

/* ── Image reveal on scroll ── */
[data-animate="reveal-clip"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-out-expo);
}

[data-animate="reveal-clip"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ── Floating SVG decoration animation ── */
@keyframes svg-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(2deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

.deco-svg {
  position: absolute;
  pointer-events: none;
  animation: svg-float 8s ease-in-out infinite;
  opacity: 0.12;
}

/* ── Product-centric Animations ── */
@keyframes product-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-12px) rotate(1deg);
  }
  66% {
    transform: translateY(4px) rotate(-0.5deg);
  }
}

@keyframes glow-breathe {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1.15);
  }
}

@keyframes orbit-pulse {
  0%, 100% {
    border-color: hsla(256, 67%, 59%, 0.12);
  }
  50% {
    border-color: hsla(256, 67%, 59%, 0.25);
  }
}

[data-animate="product-reveal"] {
  opacity: 0;
  transform: scale(0.85);
  filter: blur(15px);
  transition: all 1.2s var(--ease-out-expo);
}

[data-animate="product-reveal"].is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }
}