/* A finite 2.2-second welcome. JavaScript owns starting, skipping, and removal. */
html.tea-intro-active,
html.tea-intro-active body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.tea-intro-active body > :not(#tea-intro):not(script) {
  visibility: hidden !important;
}

#tea-intro[hidden] {
  display: none !important;
}

#tea-intro {
  --intro-ink: #35213e;
  --intro-cream: #fff8eb;
  --intro-pitcher-width: clamp(148px, 20vw, 190px);
  --intro-pour-x: calc(50% - clamp(116px, 18vw, 190px));
  --intro-pour-y: clamp(108px, 24vh, 210px);
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #fffdf7;
  color: var(--intro-ink);
  opacity: 1;
  touch-action: none;
  transition: opacity 120ms ease-out;
}

#tea-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #f8f0df 0%, rgba(248, 240, 223, 0) 55%);
}

#tea-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

#tea-intro .tea-intro-pitcher {
  position: absolute;
  z-index: 2;
  top: calc(var(--intro-pour-y) - var(--intro-pitcher-width) * .308333);
  left: calc(var(--intro-pour-x) - var(--intro-pitcher-width) * .125);
  width: var(--intro-pitcher-width);
  aspect-ratio: 240 / 220;
  opacity: 0;
  transform-origin: 12.5% 33.636%;
  transform: translateY(-55vh) rotate(8deg);
  will-change: transform, opacity;
}

/* Explicit dimensions and paint prevent the site's generic icon SVG rule leaking in. */
#tea-intro .tea-intro-pitcher > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: none;
}

#tea-intro .tea-intro-stream {
  position: absolute;
  z-index: 2;
  top: calc(var(--intro-pour-y) - 1px);
  left: calc(var(--intro-pour-x) - 4px);
  width: 8px;
  height: calc(100% - var(--intro-pour-y) + 24px);
  border-radius: 45% 45% 0 0;
  background: linear-gradient(90deg, #b96d29, #efba67 48%, #c88737);
  box-shadow: 1px 0 0 rgba(130, 72, 29, .08);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  will-change: transform, opacity;
}

#tea-intro .tea-intro-stream::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 2px;
  width: 2px;
  border-radius: inherit;
  background: rgba(255, 238, 183, .5);
}

#tea-intro .tea-intro-liquid {
  position: absolute;
  z-index: 3;
  right: -5%;
  bottom: -10%;
  left: -5%;
  height: 120%;
  background: linear-gradient(180deg, #dfa34b 0%, #bb7b2e 20%, #9b5427 55%, #7e3e21 100%);
  transform: translateY(110%);
  will-change: transform;
}

#tea-intro .tea-intro-surface {
  position: absolute;
  top: -18px;
  left: -5%;
  width: 110%;
  height: 37px;
  border-radius: 50%;
  background: #ebba6c;
  box-shadow: 0 5px 12px rgba(255, 223, 145, .24);
  transform-origin: center;
}

#tea-intro .tea-intro-copy {
  position: absolute;
  z-index: 4;
  top: 46%;
  right: 20px;
  left: 20px;
  margin: 0;
  text-align: center;
  color: var(--intro-ink);
}

#tea-intro .tea-intro-wordmark {
  margin: 0 0 12px;
  font: 500 clamp(43px, 6vw, 65px)/1 var(--serif, Georgia, serif);
  letter-spacing: -.055em;
  color: inherit;
}

#tea-intro .tea-intro-wordmark > span {
  color: inherit;
  font-weight: 600;
}

#tea-intro .tea-intro-wordmark > .tea-intro-brand-dot {
  font-weight: 400;
}

#tea-intro .tea-intro-tagline {
  margin: 0;
  font: italic 400 clamp(18px, 2.4vw, 23px)/1.45 var(--serif, Georgia, serif);
  color: inherit;
}

#tea-intro .tea-intro-hint {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 20px;
  margin: 0;
  color: var(--intro-ink);
  font: 400 10px/1.6 var(--sans, Arial, sans-serif);
  letter-spacing: .02em;
  text-align: center;
}

#tea-intro .tea-intro-skip {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 92px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #dfcfd4;
  border-radius: 3px;
  background: rgba(255, 253, 247, .94);
  color: #63243f;
  font: 500 11px/1.5 var(--sans, Arial, sans-serif);
  letter-spacing: .015em;
  cursor: pointer;
}

#tea-intro .tea-intro-skip:hover {
  border-color: #aa7a8c;
  background: #fffdf7;
}

#tea-intro .tea-intro-skip:focus-visible {
  outline: 2px solid #63243f;
  outline-offset: 4px;
}

#tea-intro .tea-intro-skip > svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

#tea-intro.is-playing .tea-intro-pitcher {
  animation: tea-intro-pitcher-pour 2200ms cubic-bezier(.25, .7, .3, 1) both;
}

#tea-intro.is-playing .tea-intro-stream {
  animation: tea-intro-tea-stream 2200ms linear both;
}

#tea-intro.is-playing .tea-intro-liquid {
  animation: tea-intro-tea-rise 2200ms linear both;
}

#tea-intro.is-playing .tea-intro-surface {
  animation: tea-intro-surface-sway 2200ms ease-in-out both;
}

#tea-intro.is-playing .tea-intro-copy {
  animation: tea-intro-copy-arrive 550ms 200ms both, tea-intro-copy-ink 2200ms linear both;
}

#tea-intro.is-playing .tea-intro-hint {
  animation: tea-intro-hint-ink 2200ms linear both;
}

@media (max-width: 600px) {
  #tea-intro {
    --intro-pitcher-width: 148px;
    --intro-pour-y: clamp(108px, 23vh, 185px);
  }
  #tea-intro .tea-intro-copy {
    top: 44%;
  }
  #tea-intro .tea-intro-skip {
    top: max(12px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
  }
  #tea-intro .tea-intro-hint {
    font-size: 9px;
  }
}

@media (max-height: 480px) {
  #tea-intro {
    --intro-pitcher-width: 116px;
    --intro-pour-y: 90px;
  }
  #tea-intro .tea-intro-copy {
    top: 51%;
  }
  #tea-intro .tea-intro-wordmark {
    font-size: 40px;
    margin-bottom: 7px;
  }
  #tea-intro .tea-intro-tagline {
    font-size: 18px;
  }
}

/* 0–550ms: arrive; 680–720ms: tip; 750–970ms: stream; 970–2070ms: fill. */
@keyframes tea-intro-pitcher-pour {
  0% { opacity: 0; transform: translateY(-55vh) rotate(8deg); }
  8% { opacity: 1; }
  25% { opacity: 1; transform: translateY(0) rotate(0); }
  33%, 76% { opacity: 1; transform: translateY(0) rotate(-27deg); }
  88% { opacity: 1; transform: translateY(-7px) rotate(-12deg); }
  100% { opacity: 0; transform: translateY(-12vh) rotate(0); }
}

@keyframes tea-intro-tea-stream {
  0%, 32% { opacity: 0; transform: scaleY(0); }
  35% { opacity: 1; transform: scaleY(.15); }
  44%, 82% { opacity: 1; transform: scaleY(1); }
  91%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes tea-intro-tea-rise {
  0%, 31% { transform: translateY(110%); }
  45% { transform: translateY(92%); }
  62% { transform: translateY(62%); }
  80% { transform: translateY(26%); }
  94%, 100% { transform: translateY(0); }
}

@keyframes tea-intro-surface-sway {
  0%, 31% { transform: rotate(-.7deg) scaleY(.8); }
  50% { transform: rotate(.6deg) scaleY(1.12); }
  67% { transform: rotate(-.5deg) scaleY(.9); }
  83% { transform: rotate(.3deg) scaleY(1.05); }
  100% { transform: rotate(0) scaleY(1); }
}

@keyframes tea-intro-copy-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tea-intro-copy-ink {
  0%, 65% { color: var(--intro-ink); }
  77%, 100% { color: var(--intro-cream); }
}

@keyframes tea-intro-hint-ink {
  0%, 65% { color: var(--intro-ink); opacity: 1; }
  80%, 100% { color: var(--intro-ink); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #tea-intro,
  #tea-intro *,
  #tea-intro *::before,
  #tea-intro *::after {
    animation: none !important;
    transition: none !important;
  }
  #tea-intro {
    display: none !important;
  }
  html.tea-intro-active body > :not(#tea-intro):not(script) {
    visibility: visible !important;
  }
}