/* ============================================================
   ROYAL TERRACOTTA — Animations & Keyframes
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes floatCup {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-20px) rotate(1.5deg); }
}
@keyframes glowPulse {
  0%,100% { opacity: 0.45; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.9;  transform: translateX(-50%) scaleX(1.4); }
}
@keyframes bgDrift {
  0%,100% { letter-spacing: 18px; opacity: 0.04; }
  50%      { letter-spacing: 30px; opacity: 0.08; }
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
  49%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@keyframes steamRise {
  0%   { transform: translateY(0) scaleX(1) rotate(0deg); opacity: 0; }
  18%  { opacity: 0.55; }
  65%  { transform: translateY(-90px) scaleX(2.2) rotate(var(--s-rot,10deg)); opacity: 0.28; }
  100% { transform: translateY(-160px) scaleX(3.2) rotate(var(--s-rot,22deg)); opacity: 0; }
}
@keyframes particleFly {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  15%  { opacity: 0.7; }
  80%  { opacity: 0.2; }
  100% { transform: translateY(-110vh) translateX(var(--p-dx,0)); opacity: 0; }
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* ---- Utility animation classes ---- */
.anim-fade-up { animation: fadeUp 0.9s var(--ease-out) forwards; opacity: 0; }
.anim-fade-in { animation: fadeIn 0.9s var(--ease-out) forwards; opacity: 0; }

/* Delay helpers */
.ad1 { animation-delay: 0.15s; }
.ad2 { animation-delay: 0.30s; }
.ad3 { animation-delay: 0.48s; }
.ad4 { animation-delay: 0.66s; }
.ad5 { animation-delay: 0.86s; }
.ad6 { animation-delay: 1.06s; }

/* Float — continuous */
.anim-float { animation: floatCup 4.5s ease-in-out infinite; }

/* ---- Steam strands ---- */
.steam-strand {
  position: absolute; bottom: 0;
  width: 8px; height: 55px; border-radius: 50%;
  opacity: 0; filter: blur(5px);
  background: radial-gradient(ellipse, rgba(255,255,255,0.72), transparent 70%);
  animation: steamRise var(--s-dur,3s) ease-out infinite var(--s-delay,0s);
  pointer-events: none;
}

/* ---- Hero particles ---- */
.hero__particle {
  position: absolute; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: particleFly var(--p-dur,6s) ease-in-out infinite var(--p-delay,0s);
  pointer-events: none;
}

/* ---- Scroll indicator ---- */
.scroll-line {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}

/* ---- BG watermark text ---- */
.bg-text {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px,16vw,210px);
  font-weight: 900;
  color: rgba(200,155,109,0.05);
  letter-spacing: 18px;
  user-select: none; pointer-events: none;
  white-space: nowrap;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: bgDrift 18s ease-in-out infinite;
}