/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   Authentic Japanese & Kigo Studio Motion Aesthetics
   ========================================================================== */

@keyframes ambient-petal-fall {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift, 60px)) rotate(360deg);
    opacity: 0;
  }
}

@keyframes ambient-petal-sway {
  0% {
    transform: rotate(-15deg) scale(1);
  }
  50% {
    transform: rotate(15deg) scale(0.9);
  }
  100% {
    transform: rotate(-15deg) scale(1);
  }
}

@keyframes cloud-drift-left {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-40px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes cloud-drift-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(40px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes cta-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 14px 4px rgba(214, 40, 40, 0.2);
  }
}

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

/* Floating Hand-Drawn Watercolor Keyframes */
@keyframes shokunin-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(0.8deg);
  }
}

@keyframes mask-drift {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-20px) rotate(3deg);
  }
}

@keyframes brushes-float {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) translateX(8px) rotate(-1.5deg);
  }
}

@keyframes sun-glow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(214, 40, 40, 0.45));
  }
  50% {
    filter: drop-shadow(0 0 45px rgba(247, 127, 0, 0.65));
  }
}

/* Helper animation classes */
.anim-marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

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

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

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

.anim-mask-drift {
  animation: mask-drift 10s ease-in-out infinite;
}

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

.anim-sun-glow {
  animation: sun-glow 8s ease-in-out infinite;
}

/* ==========================================================================
   SHOKUNIN ENTRANCE CEREMONY KEYFRAMES (序破急 / JO-HA-KYŪ)
   Traditional Japanese Sumi/Hanko/Shōji × Minimalist Modernist Precision
   ========================================================================== */

@keyframes intro-enso-draw {
  0% {
    stroke-dashoffset: 555;
    opacity: 0;
    transform: rotate(-110deg) scale(0.94);
  }
  20% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 42;
    opacity: 1;
    transform: rotate(-18deg) scale(1);
  }
}

@keyframes intro-ring-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes intro-hanko-stamp {
  0% {
    opacity: 0;
    transform: scale(1.75) rotate(-6deg);
    filter: blur(6px);
  }
  65% {
    opacity: 1;
    transform: scale(0.94) rotate(0deg);
    filter: blur(0px);
  }
  82% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes intro-stamp-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
  25% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.15);
  }
}

@keyframes intro-text-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 110%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
}

@keyframes intro-divider-expand {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes intro-seam-ignite {
  0% {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }
}

@keyframes intro-motto-reveal {
  0% {
    opacity: 0;
    transform: translateY(-10px);
    letter-spacing: 0.6em;
  }
  100% {
    opacity: 0.78;
    transform: translateY(0);
    letter-spacing: 0.36em;
  }
}