/* =========================================================
   Hero — Armudu glass as the brand's signature moment
   ========================================================= */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6.5rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg{
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 50% at 78% 28%, rgba(201,132,63,0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(169,58,46,0.12), transparent 60%),
    var(--ink);
}

.hero__grain{
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
}

.hero__eyebrow{ margin-bottom: 1.3rem; }

.hero__title{
  font-size: var(--step-5);
  max-width: 12ch;
}
.hero__title .line{ display: block; }
.hero__title .accent{ color: var(--copper); font-style: normal; }

.hero__word{
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw + 1rem, 4.4rem);
  margin-top: 1.1rem;
  letter-spacing: 0.01em;
  background: linear-gradient(95deg, var(--copper), #EAC08A 45%, var(--pomegranate) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__desc{
  margin-top: 1.5rem;
  font-size: var(--step-1);
  color: var(--sand);
  max-width: 46ch;
}

.hero__cta{
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__meta{
  margin-top: 2.8rem;
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--sand);
}
.hero__meta b{ display: block; color: var(--cream); font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; }

/* --- Glass stage --- */
.hero__stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__medallion{
  position: absolute;
  inset: 0;
  color: var(--copper);
  opacity: 0.55;
  animation: spin-slow 90s linear infinite;
}
.hero__medallion path, .hero__medallion circle{ vector-effect: non-scaling-stroke; }

@keyframes spin-slow{
  to{ transform: rotate(360deg); }
}

.tea-glass{
  position: relative;
  width: 46%;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tea-glass:hover{ transform: translateY(-4px) scale(1.02); }
.tea-glass:active{ transform: translateY(-1px) scale(0.99); }

.tea-glass svg{ overflow: visible; }

.tea-glass__liquid-group{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(1);
  transition: transform 1100ms cubic-bezier(.6,0,.4,1);
}
.tea-glass.is-drinking .tea-glass__liquid-group{
  transform: scaleY(0.06);
  transition: transform 900ms cubic-bezier(.7,0,.5,1);
}
.tea-glass.is-refilling .tea-glass__liquid-group{
  transform: scaleY(1);
  transition: transform 1000ms cubic-bezier(.2,.8,.3,1);
}

.tea-glass__shine{
  opacity: 0.55;
  animation: shine-drift 6s ease-in-out infinite;
}
@keyframes shine-drift{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(4px); }
}

.steam{
  position: absolute;
  color: var(--sand);
  opacity: 0.55;
}
.steam path{
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: steam-rise 6.5s var(--ease-soft) infinite;
}
.steam path:nth-child(2){ animation-delay: 1.1s; }
.steam path:nth-child(3){ animation-delay: 2.3s; }

@keyframes steam-rise{
  0%{ stroke-dashoffset: 220; opacity: 0; transform: translateY(0); }
  12%{ opacity: 0.7; }
  75%{ opacity: 0.25; }
  100%{ stroke-dashoffset: 0; opacity: 0; transform: translateY(-14px); }
}

.hero__glyph{
  position: absolute;
  top: 6%;
  right: 14%;
  font-family: var(--f-mono);
  color: var(--sand);
  opacity: 0.35;
  font-size: 0.9rem;
  animation: glyph-fade 6.5s ease-in-out infinite;
}
@keyframes glyph-fade{
  0%, 100%{ opacity: 0; transform: translateY(6px); }
  50%{ opacity: 0.45; transform: translateY(-6px); }
}

.hero__qr{
  position: absolute;
  bottom: 4%;
  left: 2%;
  width: 15%;
  opacity: 0.85;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

.hero__toast{
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%) translateY(6px);
  background: var(--bark-soft);
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.hero__toast.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }

.hero__hint{
  position: absolute;
  bottom: -14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--sand);
  opacity: 0.6;
  white-space: nowrap;
}

.scroll-cue{
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--sand);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.scroll-cue span{ writing-mode: vertical-rl; }
.scroll-cue__line{
  width: 1px; height: 34px;
  background: linear-gradient(var(--copper), transparent);
  animation: cue-move 2.2s ease-in-out infinite;
}
@keyframes cue-move{
  0%{ transform: scaleY(0.4); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  100%{ transform: scaleY(0.4); transform-origin: bottom; }
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; text-align: center; }
  .hero__desc{ margin-inline: auto; }
  .hero__cta{ justify-content: center; }
  .hero__meta{ justify-content: center; }
  .hero__stage{ margin-top: 1rem; max-width: 380px; }
  .hero__title{ margin-inline: auto; }
  .scroll-cue{ display: none; }
}