/* ══════════════════════════════════════════════════════════════
   teacup.css — saucer, cup, tea surface, spoon, and the shared
   steam system used by both the cup and the pie.
   ══════════════════════════════════════════════════════════════ */

.teaset {
  position: absolute;
  left: 64%;
  top: 18%;
  width: 19%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 18;
  /* Slightly behind the pie in depth → a touch of lens softness. */
  filter: blur(calc((1 - var(--px)) * 1.5px));
}

/* ── Saucer ─────────────────────────────────────────────────── */
.saucer {
  position: absolute;
  inset: 0;
}
.saucer__shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.48),
    transparent 76%
  );
  filter: blur(11px);
  transform: rotate(var(--sun-angle)) translateY(7%) scaleX(1.2) scaleY(0.86)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.5 + var(--sun-strength) * 0.35);
}
.saucer__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    var(--china-hi) 0%,
    var(--china) 30%,
    var(--china-lo) 68%,
    var(--china-sh) 100%
  );
  box-shadow:
    inset -6px -8px 18px rgba(80, 62, 42, 0.3),
    inset 8px 10px 20px rgba(255, 252, 244, 0.55),
    var(--sh-close);
}
.saucer__well {
  /* the recessed ring the cup sits in */
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 30%,
    rgba(255, 255, 255, 0.3),
    rgba(150, 138, 120, 0.22) 70%
  );
  box-shadow:
    inset 0 2px 5px rgba(90, 72, 50, 0.35),
    inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.saucer__glaze {
  /* the hard specular arc glazed china always has */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 190deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.34) 24deg,
    transparent 62deg,
    transparent 300deg,
    rgba(255, 250, 240, 0.16) 336deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: blur(1.5px);
}

/* ── Cup ────────────────────────────────────────────────────── */
.cup {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  outline: none;
}
.cup__shadow {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.42),
    transparent 74%
  );
  filter: blur(6px);
  transform: rotate(var(--sun-angle)) translateY(5%)
    rotate(calc(var(--sun-angle) * -1));
}
.cup__wall {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 24%,
    var(--china-hi) 0%,
    var(--china) 34%,
    var(--china-lo) 74%,
    var(--china-sh) 100%
  );
  box-shadow:
    inset -7px -9px 16px rgba(80, 62, 42, 0.34),
    inset 7px 9px 16px rgba(255, 253, 247, 0.6),
    0 4px 12px hsl(var(--shadow-hue) / 0.4);
}
.cup__glaze {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 205deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.4) 20deg,
    transparent 54deg,
    transparent 310deg,
    rgba(255, 252, 244, 0.18) 340deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: blur(1.2px);
}
/* Faint fingerprints on the glaze — smudges, not decals. */
.cup__print {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: overlay;
  opacity: 0.3;
}
.cup__print--a {
  left: 8%;
  top: 42%;
  width: 13%;
  aspect-ratio: 0.72;
  rotate: -18deg;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.34) 0 1px,
    transparent 1px 2.4px
  );
  filter: blur(0.5px);
}
.cup__print--b {
  right: 14%;
  bottom: 20%;
  width: 10%;
  aspect-ratio: 0.8;
  rotate: 24deg;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.28) 0 1px,
    transparent 1px 2.6px
  );
  filter: blur(0.6px);
  opacity: 0.22;
}
.cup__rim {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    var(--china-lo) 0deg,
    var(--china-hi) 30deg,
    var(--china) 90deg,
    var(--china-sh) 190deg,
    var(--china-lo) 280deg,
    var(--china-hi) 340deg,
    var(--china-lo) 360deg
  );
  box-shadow:
    inset 0 0 6px rgba(90, 72, 50, 0.4),
    0 1px 2px rgba(255, 255, 255, 0.5);
}
.cup__handle {
  position: absolute;
  right: -19%;
  top: 31%;
  width: 26%;
  height: 38%;
  border: 4.5px solid var(--china);
  border-left-color: transparent;
  border-radius: 0 60% 60% 0 / 0 50% 50% 0;
  background: transparent;
  box-shadow:
    2px 3px 6px hsl(var(--shadow-hue) / 0.45),
    inset -1px -1px 2px rgba(120, 100, 78, 0.5),
    inset 1px 1px 2px rgba(255, 255, 255, 0.7);
  z-index: -1;
}

/* ── Tea surface ────────────────────────────────────────────── */
.tea {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset 0 3px 8px rgba(20, 8, 2, 0.7),
    inset 0 -2px 6px rgba(255, 170, 90, 0.18);
}
.tea__body {
  position: absolute;
  inset: 0;
  /* Brewed tea is dark at the rim and only catches light near the
     centre — an even wash across the whole disc reads as milk. */
  background:
    radial-gradient(
      circle at 38% 32%,
      var(--tea-hi) 0%,
      var(--tea) 26%,
      #6b360f 52%,
      var(--tea-lo) 78%,
      #331706 100%
    ),
    var(--tea-lo);
}
/* Broad specular sheen — the liquid's own gloss. */
.tea__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(255, 236, 198, 0.4) 0%,
    rgba(255, 214, 150, 0.12) 22%,
    transparent 46%
  );
  mix-blend-mode: screen;
}
/* The reflection of the window itself: two panes and a bar. */
.tea__window {
  position: absolute;
  left: 14%;
  top: 12%;
  width: 40%;
  height: 32%;
  rotate: -22deg;
  /* Two panes with a mullion between them, but softened at the
     edges and warm rather than white — a reflection in liquid is
     never a crisp rectangle. */
  background: linear-gradient(
    90deg,
    rgba(255, 244, 212, 0.5) 0 42%,
    transparent 42% 58%,
    rgba(255, 242, 206, 0.4) 58% 100%
  );
  border-radius: 14% / 10%;
  /* Feathered only at the corners, so the panes keep their shape
     while the edges melt into the liquid. */
  -webkit-mask: radial-gradient(
    120% 120% at 50% 50%,
    #000 55%,
    transparent 100%
  );
  mask: radial-gradient(120% 120% at 50% 50%, #000 55%, transparent 100%);
  filter: blur(2.6px);
  mix-blend-mode: screen;
  opacity: calc(0.55 + var(--sun-strength) * 0.45);
  animation: tea-shimmer 8s ease-in-out infinite;
}
@keyframes tea-shimmer {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(2%, 1%) scale(1.04);
    opacity: 1;
  }
}
/* Meniscus: the bright hairline where tea meets ceramic. */
.tea__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 214, 156, 0.3),
    inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* ── Hover ripples: three expanding rings, staggered. ── */
.ripple {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 8%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 226, 178, 0.55);
  box-shadow: 0 0 6px rgba(255, 206, 140, 0.35);
  opacity: 0;
  pointer-events: none;
}
.cup:hover .ripple,
.cup:focus-visible .ripple {
  animation: ripple-out 2.6s var(--ease-soft) infinite;
}
.ripple--2 {
  animation-delay: 0.85s !important;
}
.ripple--3 {
  animation-delay: 1.7s !important;
}

@keyframes ripple-out {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  14% {
    opacity: 0.85;
  }
  100% {
    transform: scale(7.2);
    opacity: 0;
  }
}
/* The whole surface lifts slightly in brightness while disturbed. */
.cup:hover .tea__body,
.cup:focus-visible .tea__body {
  filter: brightness(1.06);
}
.tea__body {
  transition: filter 0.6s var(--ease-soft);
}

/* ── Teaspoon: resting on the saucer, bowl toward the cup. ─── */
.spoon {
  position: absolute;
  left: 4%;
  bottom: -6%;
  width: 62%;
  height: 15%;
  rotate: -24deg;
  transform-origin: 88% 50%;
  z-index: 3;
}
.spoon__shadow {
  position: absolute;
  inset: 8% -4% -34% 2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 60% 50%,
    hsl(var(--shadow-hue) / 0.5),
    transparent 72%
  );
  filter: blur(5px);
  transform: rotate(calc(var(--sun-angle) - 90deg)) translateY(10%)
    rotate(calc(90deg - var(--sun-angle)));
}
/* Polished metal = a hard, high-contrast gradient with a mirror
   flip in the middle. That flip is what sells "silver". */
.spoon__handle {
  position: absolute;
  left: 0;
  top: 26%;
  width: 66%;
  height: 46%;
  border-radius: 40% 8% 8% 40% / 50%;
  background: linear-gradient(
    178deg,
    var(--silver-sh) 0%,
    var(--silver-lo) 14%,
    var(--silver-hi) 38%,
    #eef1f5 48%,
    var(--silver) 56%,
    var(--silver-lo) 74%,
    var(--silver-sh) 100%
  );
  box-shadow:
    0 2px 5px hsl(var(--shadow-hue) / 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.spoon__neck {
  position: absolute;
  left: 60%;
  top: 33%;
  width: 20%;
  height: 32%;
  background: linear-gradient(
    178deg,
    var(--silver-sh) 0%,
    var(--silver-hi) 42%,
    var(--silver) 58%,
    var(--silver-sh) 100%
  );
  clip-path: polygon(0% 18%, 100% 4%, 100% 96%, 0% 82%);
  box-shadow: 0 2px 4px hsl(var(--shadow-hue) / 0.45);
}
.spoon__bowl {
  position: absolute;
  right: 0;
  top: 2%;
  width: 30%;
  height: 96%;
  border-radius: 44% 52% 52% 44% / 50%;
  background: linear-gradient(
    172deg,
    var(--silver-lo) 0%,
    var(--silver-hi) 30%,
    #f4f6f9 46%,
    var(--silver) 62%,
    var(--silver-sh) 100%
  );
  box-shadow:
    0 3px 7px hsl(var(--shadow-hue) / 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
}
.spoon__bowl-in {
  /* the concave dish, darker with a bright floor */
  position: absolute;
  inset: 16% 14%;
  border-radius: 50%;
  background: linear-gradient(
    168deg,
    var(--silver-sh) 0%,
    var(--silver-lo) 34%,
    var(--silver-hi) 62%,
    var(--silver) 100%
  );
  box-shadow: inset 0 2px 4px rgba(40, 44, 52, 0.7);
}
.spoon__glint {
  /* travelling highlight across the polish */
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 38%,
    rgba(255, 255, 255, 0.95) 50%,
    transparent 62%
  );
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: spoon-glint 9s ease-in-out infinite;
}
@keyframes spoon-glint {
  0%,
  40% {
    transform: translateX(-120%);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  70%,
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}
/* A used spoon: one small drop of tea still on it. */
.spoon__drip {
  position: absolute;
  right: 4%;
  bottom: -14%;
  width: 9%;
  aspect-ratio: 1.3;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 32%,
    rgba(214, 150, 88, 0.9),
    var(--tea) 60%,
    var(--tea-lo)
  );
  box-shadow:
    0 1px 2px hsl(var(--shadow-hue) / 0.5),
    inset 0 1px 1px rgba(255, 230, 190, 0.6);
}

/* ══ FLORAL CHINA ═══════════════════════════════════════════════
   Small sprigged roses round the cup wall and saucer rim, the way
   old cottage china is decorated. Each "flower" is a tiny cluster
   of soft pink dots with a green leaf pair, repeated round a ring
   with a conic mask so it follows the curve. */

.cup__floral,
.saucer__floral {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* rose clusters */
    radial-gradient(1.6% 1.6% at 50% 12%, #c4738f 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 46% 15%, #d894ab 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 54% 15%, #b25f7c 0 62%, transparent 70%),
    radial-gradient(1.1% 1.1% at 50% 17.5%, #8fa96a 0 62%, transparent 72%),
    radial-gradient(1.6% 1.6% at 88% 50%, #c4738f 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 85% 46%, #d894ab 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 85% 54%, #b25f7c 0 62%, transparent 70%),
    radial-gradient(1.6% 1.6% at 50% 88%, #c4738f 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 46% 85%, #d894ab 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 54% 85%, #b25f7c 0 62%, transparent 70%),
    radial-gradient(1.6% 1.6% at 12% 50%, #c4738f 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 15% 46%, #d894ab 0 62%, transparent 70%),
    radial-gradient(1.3% 1.3% at 15% 54%, #b25f7c 0 62%, transparent 70%),
    /* connecting vine */
    repeating-conic-gradient(
        from 0deg,
        transparent 0deg 8deg,
        rgba(143, 169, 106, 0.3) 8deg 9.4deg,
        transparent 9.4deg 22.5deg
      );
  opacity: 0.8;
  filter: blur(0.25px);
}
/* Keep the pattern in a band, not across the whole disc. */
.cup__floral {
  -webkit-mask: radial-gradient(
    circle,
    transparent 58%,
    #000 66%,
    #000 92%,
    transparent 98%
  );
  mask: radial-gradient(
    circle,
    transparent 58%,
    #000 66%,
    #000 92%,
    transparent 98%
  );
}
.saucer__floral {
  -webkit-mask: radial-gradient(
    circle,
    transparent 66%,
    #000 74%,
    #000 93%,
    transparent 99%
  );
  mask: radial-gradient(
    circle,
    transparent 66%,
    #000 74%,
    #000 93%,
    transparent 99%
  );
  opacity: 0.62;
}

/* A paper tea-bag tag hanging over the cup's edge. */
.teatag {
  position: absolute;
  right: -2%;
  top: 46%;
  width: 15%;
  aspect-ratio: 1.25;
  rotate: 13deg;
  z-index: 4;
  background:
    radial-gradient(
      0.5px 0.5px at 30% 40%,
      rgba(140, 110, 70, 0.3),
      transparent
    ),
    linear-gradient(150deg, #f7efdb 0%, #ece0c4 56%, #d6c7a4 100%);
  background-size:
    6px 6px,
    auto;
  border-radius: 1px;
  box-shadow:
    0 1px 3px hsl(var(--shadow-hue) / 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
/* The string running from tag to cup. */
.teatag::before {
  content: "";
  position: absolute;
  left: -78%;
  top: 42%;
  width: 82%;
  height: 1.4px;
  rotate: -16deg;
  background: linear-gradient(
    90deg,
    rgba(190, 172, 138, 0.9),
    rgba(214, 198, 166, 0.75)
  );
  border-radius: 1px;
}
/* A faint printed mark on the tag. */
.teatag::after {
  content: "";
  position: absolute;
  inset: 26% 22%;
  background: repeating-linear-gradient(
    180deg,
    rgba(120, 96, 60, 0.34) 0 1px,
    transparent 1px 3px
  );
}

/* The steeping bag itself, sunk in the tea. */
.tea__bag {
  position: absolute;
  right: 16%;
  bottom: 18%;
  width: 34%;
  aspect-ratio: 1.15;
  rotate: -12deg;
  border-radius: 12% 12% 16% 16%;
  background: linear-gradient(
    160deg,
    rgba(96, 58, 24, 0.82) 0%,
    rgba(66, 36, 12, 0.9) 52%,
    rgba(38, 19, 5, 0.95) 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(190, 140, 90, 0.3),
    0 1px 4px rgba(20, 8, 2, 0.6);
  filter: blur(0.4px);
}

/* ══ STEAM ══════════════════════════════════════════════════════
   Each wisp is a blurred vertical smear that rises, drifts, and
   dissipates. Per-wisp --i offsets duration, delay, x-origin and
   scale so no two follow the same path. --drift (set by JS from
   cursor position) pushes the whole column sideways.
   ═══════════════════════════════════════════════════════════════ */

.steam {
  position: absolute;
  pointer-events: none;
  z-index: 30;
}
.steam--tea {
  left: 14%;
  top: -52%;
  width: 72%;
  height: 92%;
}
.steam--pie {
  left: 20%;
  top: -44%;
  width: 60%;
  height: 84%;
}

.wisp {
  position: absolute;
  bottom: 0;
  left: calc(6% + var(--i) * 15%);
  width: 15%;
  height: 42%;
  border-radius: 50% 50% 44% 56% / 62% 58% 42% 38%;
  background: radial-gradient(
    ellipse at 50% 78%,
    rgba(255, 252, 246, 0.92) 0%,
    rgba(255, 248, 234, 0.55) 38%,
    rgba(255, 244, 226, 0.2) 68%,
    transparent 88%
  );
  filter: blur(calc(5px + var(--i) * 1.1px));
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  animation: wisp-rise calc(var(--t-steam) + var(--i) * 1.15s)
    var(--ease-organic) calc(var(--i) * -1.35s) infinite;
}
/* Pie steam is thinner and cooler-moving than the cup's. */
.steam--pie .wisp {
  width: 13%;
  height: 36%;
  filter: blur(calc(6px + var(--i) * 1.3px));
  animation-duration: calc(var(--t-steam) + 1.6s + var(--i) * 1.3s);
}

/* Rise, lean into the drift, swell, thin out, gone. The sideways
   term mixes a fixed lean with the cursor-driven --drift. */
@keyframes wisp-rise {
  0% {
    transform: translate3d(0, 12%, 0) scale(0.45, 0.5) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: calc(0.6 + var(--i) * 0.05);
  }
  38% {
    transform: translate3d(calc(-14% + var(--drift) * 0.55px), -52%, 0)
      scale(0.85, 1.05) rotate(-5deg);
    opacity: calc(0.7 + var(--i) * 0.04);
  }
  68% {
    transform: translate3d(calc(6% + var(--drift) * 1px), -108%, 0)
      scale(1.25, 1.5) rotate(6deg);
    opacity: 0.34;
  }
  100% {
    transform: translate3d(calc(-4% + var(--drift) * 1.5px), -168%, 0)
      scale(1.85, 2.1) rotate(-3deg);
    opacity: 0;
  }
}