/* Routine animation — 3-step mixing loop (12s). Base styles are the finished
   frame so reduced-motion users see a complete, static scene. */
.routine-section {
  --routine-loop: 12s;
  align-items: center;
  background:
    radial-gradient(circle at 78% 42%, rgba(228, 199, 122, 0.12), transparent 34%),
    linear-gradient(160deg, var(--navy-deep), var(--navy) 62%, #0a1e3a);
  border-bottom: 1px solid rgba(228, 199, 122, 0.16);
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  padding: clamp(78px, 9vw, 120px) clamp(24px, 6vw, 90px);
}
.routine-section.is-paused *,
.routine-section.is-paused *::before,
.routine-section.is-paused *::after { animation-play-state: paused; }
.routine-copy { max-width: 540px; }
.routine-copy h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(50px, 5vw, 76px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
}
.routine-copy h2 em { color: var(--gold-light); font-style: normal; }
.routine-intro {
  color: #d3d9e3;
  font-size: 15px;
  line-height: 1.8;
  margin: 26px 0 30px;
}
.routine-steps { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.routine-step {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(228, 199, 122, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 16px;
  grid-template-columns: 40px 1fr;
  overflow: hidden;
  padding: 16px 18px 18px;
  position: relative;
}
.routine-step__no {
  color: var(--gold-light);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
}
.routine-step strong { display: block; font-size: 15px; }
.routine-step p { color: #aeb8c8; font-size: 13px; margin: 3px 0 0; }
.routine-step__bar {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  bottom: 0;
  height: 3px;
  left: 0;
  position: absolute;
  transform-origin: left;
  width: 100%;
}
.routine-step--1 { animation: routine-step-1 var(--routine-loop) infinite both; }
.routine-step--2 { animation: routine-step-2 var(--routine-loop) infinite both; }
.routine-step--3 { animation: routine-step-3 var(--routine-loop) infinite both; }
.routine-step--1 .routine-step__bar { animation: routine-bar-1 var(--routine-loop) linear infinite both; }
.routine-step--2 .routine-step__bar { animation: routine-bar-2 var(--routine-loop) linear infinite both; }
.routine-step--3 .routine-step__bar { animation: routine-bar-3 var(--routine-loop) linear infinite both; }

.routine-stage {
  aspect-ratio: 1;
  container-type: inline-size;
  justify-self: center;
  max-width: 560px;
  position: relative;
  width: 100%;
}
.routine-stage > * { position: absolute; }
.routine-halo {
  animation: routine-halo var(--routine-loop) ease-in-out infinite both;
  background: radial-gradient(circle, rgba(245, 238, 220, 0.2), rgba(245, 238, 220, 0.05) 58%, transparent 70%);
  border-radius: 50%;
  inset: 4cqw;
}
.routine-ring {
  animation: routine-spin 48s linear infinite;
  border: 1px dashed rgba(228, 199, 122, 0.45);
  border-radius: 50%;
  inset: 8cqw;
}

/* SVG mixing scene. Base styles are the finished frame (reduced motion). */
.mix { height: 100%; inset: 0; overflow: visible; width: 100%; }
.mix * { transform-box: view-box; transform-origin: 0 0; }
.mx-shadow { fill: rgba(0, 0, 0, 0.32); }
.mx-glass-back { fill: url(#mx-glass); }
.mx-glass-edge { fill: none; stroke: rgba(255, 255, 255, 0.62); stroke-linejoin: round; stroke-width: 3; }
.mx-glass-shine { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-linecap: round; stroke-width: 6; }
.mx-glass-shine--thin { stroke: rgba(255, 255, 255, 0.18); stroke-width: 3; }
.mx-rim { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; }
.mx-marks { fill: none; stroke: rgba(16, 33, 61, 0.35); stroke-width: 1.5; }
.mx-pile { animation: mx-pile var(--routine-loop) ease-out infinite both; fill: #efdcb0; opacity: 0; transform: translateY(0) scaleY(1); }
.mx-level { animation: mx-level var(--routine-loop) cubic-bezier(.4, 0, .3, 1) infinite both; transform: translateY(176px); }
.mx-wave { animation: mx-wave 1.8s linear infinite; }
.mx-wave--slow { animation-duration: 2.6s; animation-direction: reverse; }
.mx-milk { animation: mx-milk var(--routine-loop) linear infinite both; }
.mx-swirl { animation: mx-swirl var(--routine-loop) linear infinite both; fill: none; opacity: 0; stroke: rgba(185, 133, 44, 0.65); stroke-dasharray: 60 220; stroke-linecap: round; stroke-width: 3; }
.mx-bubbles { animation: mx-bubbles var(--routine-loop) linear infinite both; fill: rgba(255, 255, 255, 0.85); opacity: 0; }
.mx-powder { animation: mx-powder-gate var(--routine-loop) linear infinite both; fill: #f6e8c8; opacity: 0; }
.mx-powder circle { animation: mx-fall 0.62s cubic-bezier(.5, 0, .9, .6) infinite; }
.mx-powder circle:nth-child(2) { animation-delay: -0.034s; }
.mx-powder circle:nth-child(3) { animation-delay: -0.068s; }
.mx-powder circle:nth-child(4) { animation-delay: -0.102s; }
.mx-powder circle:nth-child(5) { animation-delay: -0.136s; }
.mx-powder circle:nth-child(6) { animation-delay: -0.17s; }
.mx-powder circle:nth-child(7) { animation-delay: -0.204s; }
.mx-powder circle:nth-child(8) { animation-delay: -0.238s; }
.mx-powder circle:nth-child(9) { animation-delay: -0.272s; }
.mx-powder circle:nth-child(10) { animation-delay: -0.306s; }
.mx-powder circle:nth-child(11) { animation-delay: -0.34s; }
.mx-powder circle:nth-child(12) { animation-delay: -0.374s; }
.mx-powder circle:nth-child(13) { animation-delay: -0.408s; }
.mx-powder circle:nth-child(14) { animation-delay: -0.442s; }
.mx-powder circle:nth-child(15) { animation-delay: -0.476s; }
.mx-powder circle:nth-child(16) { animation-delay: -0.51s; }
.mx-powder circle:nth-child(17) { animation-delay: -0.544s; }
.mx-powder circle:nth-child(18) { animation-delay: -0.578s; }
.mx-pour { animation: mx-pour var(--routine-loop) cubic-bezier(.4, 0, .2, 1) infinite both; opacity: 0; }
.mx-spout { fill: url(#mx-steel); }
.mx-stream { animation: mx-flow 0.35s linear infinite; fill: none; stroke: rgba(214, 230, 250, 0.85); stroke-dasharray: 46 3; stroke-linecap: round; stroke-width: 8; }
.mx-stream--hi { stroke: rgba(255, 255, 255, 0.75); stroke-dasharray: 10 30; stroke-width: 2.4; animation-duration: 0.28s; }
.mx-mltag rect { fill: rgba(4, 16, 33, 0.92); stroke: rgba(228, 199, 122, 0.6); }
.mx-mltag text { fill: var(--gold-light); font: 800 13px var(--sans, Arial, sans-serif); letter-spacing: 0.04em; }
.mx-spoon { animation: mx-spoon var(--routine-loop) ease-in-out infinite both; transform: translate(216px, 252px) rotate(14deg); }
.mx-steam { animation: mx-steam-gate var(--routine-loop) linear infinite both; fill: none; stroke: rgba(255, 253, 248, 0.6); stroke-linecap: round; stroke-width: 3; }
.mx-steam path { animation: mx-steam 2.4s ease-out infinite; stroke-dasharray: 80; }
.mx-steam path:nth-child(2) { animation-delay: 0.8s; }
.mx-steam path:nth-child(3) { animation-delay: 1.6s; }
.mx-sparkles { animation: mx-steam-gate var(--routine-loop) linear infinite both; fill: var(--gold-light); }
.mx-sparkles path { animation: mx-twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mx-sparkles g:nth-child(2) path { animation-delay: 0.4s; }
.mx-sparkles g:nth-child(3) path { animation-delay: 0.8s; }
.mx-sparkles g:nth-child(4) path { animation-delay: 1.2s; }
.mx-sachet { animation: mx-sachet var(--routine-loop) cubic-bezier(.45, .05, .3, 1) infinite both; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); transform: translate(322px, 238px) rotate(8deg); }
.mx-tear { animation: mx-tear var(--routine-loop) ease-in infinite both; opacity: 0; transform: translate(30px, -40px) rotate(38deg); }

.routine-chip {
  align-items: center;
  background: var(--cream);
  border: 1px solid rgba(198, 155, 69, 0.7);
  border-radius: 999px;
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.28);
  color: var(--ink);
  display: inline-flex;
  font-size: max(11px, 2.8cqw);
  font-weight: 800;
  gap: 1.6cqw;
  padding: 1.4cqw 3cqw 1.4cqw 1.4cqw;
}
.routine-chip b {
  background: var(--navy);
  border-radius: 50%;
  color: var(--gold-light);
  display: grid;
  font-size: max(9px, 2cqw);
  height: 5.4cqw;
  place-items: center;
  width: 5.4cqw;
}
.routine-chip--1 { animation: routine-chip-1 var(--routine-loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; left: 4cqw; top: 20cqw; }
.routine-chip--2 { animation: routine-chip-2 var(--routine-loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; left: 2cqw; top: 56cqw; }
.routine-chip--3 { animation: routine-chip-3 var(--routine-loop) cubic-bezier(.3, 1.4, .5, 1) infinite both; right: 4cqw; top: 22cqw; }
.routine-tagline {
  animation: routine-tagline var(--routine-loop) ease-out infinite both;
  bottom: 3cqw;
  color: var(--white);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: max(20px, 5.4cqw);
  font-weight: 600;
  left: 0;
  letter-spacing: -0.02em;
  margin: 0;
  right: 0;
  text-align: center;
}
.routine-tagline em { color: var(--gold-light); font-style: normal; }

/* Timeline: 0–32% sachet tear + pour · 32–54% water · 54–74% stir · 74–96% result */
@keyframes mx-sachet {
  0% { opacity: 0; transform: translate(380px, 238px) rotate(18deg); }
  5% { opacity: 1; transform: translate(322px, 238px) rotate(8deg); }
  10% { transform: translate(322px, 238px) rotate(8deg); }
  15%, 28% { transform: translate(234px, 94px) rotate(-140deg); }
  33%, 95% { opacity: 1; transform: translate(322px, 238px) rotate(8deg); }
  100% { opacity: 0; transform: translate(322px, 238px) rotate(8deg); }
}
@keyframes mx-tear {
  0%, 6% { opacity: 1; transform: none; }
  10% { opacity: 1; transform: translate(14px, -18px) rotate(16deg); }
  13%, 100% { opacity: 0; transform: translate(30px, -40px) rotate(38deg); }
}
@keyframes mx-powder-gate {
  0%, 15% { opacity: 0; }
  17%, 27% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes mx-fall {
  from { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  to { opacity: 0.2; transform: translateY(192px); }
}
@keyframes mx-pile {
  0%, 16% { opacity: 0; transform: translateY(40px); }
  30%, 40% { opacity: 1; transform: translateY(0); }
  58% { opacity: 0.6; }
  66%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes mx-pour {
  0%, 31% { opacity: 0; transform: translate(-40px, -40px); }
  35%, 51% { opacity: 1; transform: none; }
  55%, 100% { opacity: 0; transform: translate(-40px, -40px); }
}
@keyframes mx-flow { to { stroke-dashoffset: -49; } }
@keyframes mx-level {
  0%, 35% { transform: translateY(336px); }
  52%, 96% { transform: translateY(176px); }
  100% { transform: translateY(336px); }
}
@keyframes mx-wave { to { transform: translateX(-100px); } }
@keyframes mx-milk {
  0%, 56% { opacity: 0; }
  72%, 100% { opacity: 1; }
}
@keyframes mx-swirl {
  0%, 56% { opacity: 0; stroke-dashoffset: 0; }
  59% { opacity: 1; }
  71% { opacity: 1; }
  75%, 100% { opacity: 0; stroke-dashoffset: -840; }
}
@keyframes mx-bubbles {
  0%, 58% { opacity: 0; }
  64%, 78% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes mx-spoon {
  0%, 53% { opacity: 0; transform: translate(216px, 150px) rotate(14deg); }
  57% { opacity: 1; transform: translate(216px, 252px) rotate(14deg); }
  60% { transform: translate(186px, 248px) rotate(4deg); }
  63% { transform: translate(214px, 254px) rotate(14deg); }
  66% { transform: translate(186px, 248px) rotate(4deg); }
  69% { transform: translate(214px, 254px) rotate(14deg); }
  72% { transform: translate(190px, 250px) rotate(6deg); }
  75%, 95% { opacity: 1; transform: translate(216px, 252px) rotate(14deg); }
  100% { opacity: 0; transform: translate(216px, 252px) rotate(14deg); }
}
@keyframes mx-steam-gate {
  0%, 74% { opacity: 0; }
  80%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes mx-steam {
  from { opacity: 0; stroke-dashoffset: 80; transform: translateY(10px); }
  40% { opacity: 1; }
  to { opacity: 0; stroke-dashoffset: 0; transform: translateY(-14px); }
}
@keyframes mx-twinkle { 50% { opacity: 0.35; transform: scale(0.55) rotate(45deg); } }
@keyframes routine-spin { to { transform: rotate(360deg); } }
@keyframes routine-chip-1 {
  0%, 74% { opacity: 0; transform: scale(0.5) translateY(3cqw); }
  78%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes routine-chip-2 {
  0%, 77% { opacity: 0; transform: scale(0.5) translateY(3cqw); }
  81%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes routine-chip-3 {
  0%, 80% { opacity: 0; transform: scale(0.5) translateY(3cqw); }
  84%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes routine-tagline {
  0%, 84% { opacity: 0; transform: translateY(3cqw); }
  88%, 95% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes routine-halo {
  0%, 74% { opacity: 0.55; transform: scale(0.94); }
  84%, 95% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0.55; transform: scale(0.94); }
}
@keyframes routine-step-1 {
  0%, 32% { border-color: rgba(228, 199, 122, 0.7); background: rgba(228, 199, 122, 0.1); }
  36%, 100% { border-color: rgba(228, 199, 122, 0.18); background: rgba(255, 255, 255, 0.04); }
}
@keyframes routine-step-2 {
  0%, 30% { border-color: rgba(228, 199, 122, 0.18); background: rgba(255, 255, 255, 0.04); }
  34%, 54% { border-color: rgba(228, 199, 122, 0.7); background: rgba(228, 199, 122, 0.1); }
  58%, 100% { border-color: rgba(228, 199, 122, 0.18); background: rgba(255, 255, 255, 0.04); }
}
@keyframes routine-step-3 {
  0%, 52% { border-color: rgba(228, 199, 122, 0.18); background: rgba(255, 255, 255, 0.04); }
  56%, 96% { border-color: rgba(228, 199, 122, 0.7); background: rgba(228, 199, 122, 0.1); }
  100% { border-color: rgba(228, 199, 122, 0.18); background: rgba(255, 255, 255, 0.04); }
}
@keyframes routine-bar-1 {
  0% { opacity: 1; transform: scaleX(0); }
  32% { opacity: 1; transform: scaleX(1); }
  36%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes routine-bar-2 {
  0%, 32% { opacity: 1; transform: scaleX(0); }
  54% { opacity: 1; transform: scaleX(1); }
  58%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes routine-bar-3 {
  0%, 54% { opacity: 1; transform: scaleX(0); }
  96% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@media (max-width: 1040px) {
  .routine-section { grid-template-columns: 1fr; }
  .routine-copy { max-width: 700px; }
}
@media (max-width: 780px) {
  .routine-section { gap: 34px; padding: 74px 20px; }
  .routine-copy h2 { font-size: clamp(44px, 13vw, 60px); }
  .routine-step { padding: 14px 16px 16px; }
}