/* =============================================================================
   Yaprakzade — Harman Live Visualizer (Cinematic v2)
   ============================================================================= */

.harman-visualizer-wrap {
  position: sticky;
  top: 84px;
  /* Phase 509b — editorial cream + paper grain + premium border-frame */
  background:
    radial-gradient(ellipse at 50% 0%, #fff 0%, var(--yz-cream, #faf7f0) 60%, #f1ebd9 100%);
  border: 1px solid #d4c8a8;
  border-radius: 24px;
  padding: 32px 22px 28px;
  box-shadow:
    0 24px 64px -20px rgba(120, 85, 30, .18),
    0 8px 24px -8px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
  text-align: center;
  overflow: hidden;
}
/* Inner frame — editorial border-inside-border */
.harman-visualizer-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(184, 136, 75, .25);
  border-radius: 18px;
  pointer-events: none;
  z-index: 0;
}

/* Editorial corner stamps — vintage magazine vol marks */
.harman-visualizer-wrap > h3::before {
  content: "✦";
  display: inline-block;
  color: #b8884b;
  font-size: 14px;
  margin-right: 10px;
  vertical-align: middle;
  opacity: .7;
}
.harman-visualizer-wrap > h3::after {
  content: "✦";
  display: inline-block;
  color: #b8884b;
  font-size: 14px;
  margin-left: 10px;
  vertical-align: middle;
  opacity: .7;
}

/* Ambient warm glow + paper grain overlay */
.harman-visualizer-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(184, 136, 75, .18), transparent 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .26  0 0 0 0 .14  0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: cover, 180px;
  animation: hv-ambient 8s ease-in-out infinite;
  border-radius: inherit;
  z-index: 0;
}

@keyframes hv-ambient {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}

.harman-visualizer-wrap > * { position: relative; z-index: 1; }

.harman-visualizer-wrap h3 {
  margin: 0 0 6px;
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 50;
  color: #1a2820;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.01em;
}

.harman-visualizer-wrap .hv-sub {
  margin: 0 0 22px;
  color: #6b7280;
  font-size: 11.5px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.harman-visualizer-wrap .hv-sub::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: #b8884b;
  margin: 12px auto 0;
}

.hv-canvas {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 470px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Phase 509b — subtle 3D perspective for parallax tilt */
  perspective: 1400px;
  transform-style: preserve-3d;
}
/* Floor ellipse — soft contact shadow under the whole canvas */
.hv-canvas::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 78%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(60, 35, 12, .22) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.hv-teapot {
  width: 82%;
  transition: transform 600ms var(--yz-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  transform-origin: center bottom;
  /* Phase 509b — subtle idle "breathing" so the scene feels alive */
  animation: hv-breathe 7s ease-in-out infinite;
}
@keyframes hv-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.005); }
}
.hv-canvas[data-pouring="true"] .hv-teapot,
.hv-canvas[data-pour-idle="true"] .hv-teapot {
  /* Sıvı dökerken nefes animasyonunu pasifleştir */
  animation-play-state: paused;
}

.hv-teapot svg {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms var(--yz-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 22px rgba(90, 52, 16, 0.28));
}

/* Bardak: artık emziğin TAM ALTINA hizalı (sol-üst quadrant).
   Teapot scale=0.82 + spout SVG (100,168) → canvas ≈ (124, 215).
   Glass rim center sabit canvas-x ~%32 (124/380). */
.hv-glass {
  width: 22%;
  position: absolute;
  left: 21%;
  bottom: 14%;
  right: auto;
  transform: translateY(0);
  z-index: 3;
  /* Phase 509b — glass enters with subtle float on render */
  animation: hv-glass-rise 1.2s cubic-bezier(.22, 1, .36, 1) backwards;
}
@keyframes hv-glass-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.hv-glass svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(107, 46, 21, 0.28));
}

/* Filtreli akan çay overlay — teapot ile glass arasında */
.hv-pour-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s var(--yz-ease-out, cubic-bezier(.2,.7,.2,1));
}
.hv-pour-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sürekli akış — dem aktif değiştirildiği sürece veya idle pour modunda görünür */
.hv-canvas[data-pouring="true"] .hv-pour-overlay,
.hv-canvas[data-pour-idle="true"] .hv-pour-overlay { opacity: 1; }

/* Akış animasyonu — stroke-dashoffset ile sürekli aşağı akar (filtreli/süzgeçli his) */
.hv-pour-overlay #pour-main {
  stroke-dasharray: 8 5;
  stroke-dashoffset: 0;
  animation: hv-pour-flow-main .55s linear infinite;
}
.hv-pour-overlay #pour-left {
  stroke-dasharray: 5 4;
  animation: hv-pour-flow-strand .7s linear infinite;
}
.hv-pour-overlay #pour-right {
  stroke-dasharray: 5 4;
  animation: hv-pour-flow-strand .65s linear infinite reverse;
}
.hv-pour-overlay #pour-shine {
  stroke-dasharray: 14 6;
  animation: hv-pour-flow-shine .5s linear infinite;
  opacity: .55;
}
@keyframes hv-pour-flow-main {
  to { stroke-dashoffset: -13; }
}
@keyframes hv-pour-flow-strand {
  to { stroke-dashoffset: -9; }
}
@keyframes hv-pour-flow-shine {
  to { stroke-dashoffset: -20; }
}

/* Sıçrama damlaları — bardak yüzeyine değdiğinde patlama */
.hv-canvas[data-pouring="true"] #splash-1,
.hv-canvas[data-pouring="true"] #splash-2,
.hv-canvas[data-pouring="true"] #splash-3,
.hv-canvas[data-pouring="true"] #splash-4,
.hv-canvas[data-pouring="true"] #splash-5,
.hv-canvas[data-pour-idle="true"] #splash-1,
.hv-canvas[data-pour-idle="true"] #splash-2,
.hv-canvas[data-pour-idle="true"] #splash-3,
.hv-canvas[data-pour-idle="true"] #splash-4,
.hv-canvas[data-pour-idle="true"] #splash-5 {
  animation: hv-splash 1.1s ease-in-out infinite;
}
.hv-canvas #splash-2 { animation-delay: .22s; }
.hv-canvas #splash-3 { animation-delay: .44s; }
.hv-canvas #splash-4 { animation-delay: .65s; }
.hv-canvas #splash-5 { animation-delay: .88s; }
@keyframes hv-splash {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.5); }
  40%      { opacity: .9; transform: translateY(-2px) scale(1); }
  80%      { opacity: 0;  transform: translateY(4px) scale(.7); }
}

/* Drop-start (emzik altı küçük damla ipliği) hafif nabız */
.hv-pour-overlay #pour-drop-start {
  animation: hv-drop-start 1.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hv-drop-start {
  0%, 100% { opacity: .7; transform: scaleY(1); }
  50%      { opacity: .95; transform: scaleY(1.4); }
}

/* Profil chip — editorial typographic */
.hv-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #2d5e3e 0%, #1f4530 100%);
  color: #f8f4e9;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(45, 94, 62, 0.4);
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s ease;
  position: relative;
}
.hv-profile-chip::before {
  content: "";
  width: 6px; height: 6px;
  background: #b8884b;
  border-radius: 50%;
  display: inline-block;
}

/* Snapshot btn — editorial typographic */
.hv-snapshot-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: transparent;
  border: 1px solid #b8884b;
  color: #1a2820;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hv-snapshot-btn:hover {
  background: #1a2820;
  color: #f8f4e9;
  border-color: #1a2820;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(26, 40, 32, .35);
}

/* ============================================================================
   STEAM — 5 path, kıvrımlı yükselen, stagger 0.7s
   ============================================================================ */
.hv-canvas[data-steaming="true"] #steam { opacity: 1 !important; }
.hv-canvas[data-steaming="true"] #steam1,
.hv-canvas[data-steaming="true"] #steam2,
.hv-canvas[data-steaming="true"] #steam3,
.hv-canvas[data-steaming="true"] #steam4,
.hv-canvas[data-steaming="true"] #steam5 {
  animation: hv-steam-rise 3.5s ease-in-out infinite;
  transform-origin: bottom center;
  filter: blur(1.2px);
}
.hv-canvas[data-steaming="true"] #steam2 { animation-delay: .7s; }
.hv-canvas[data-steaming="true"] #steam3 { animation-delay: 1.4s; }
.hv-canvas[data-steaming="true"] #steam4 { animation-delay: 2.1s; }
.hv-canvas[data-steaming="true"] #steam5 { animation-delay: 2.8s; }

@keyframes hv-steam-rise {
  0%   { transform: translateY(40px) scale(.8);  opacity: 0;  }
  20%  {                                          opacity: .7; }
  60%  { transform: translateY(-20px) scale(1.1); opacity: .5; }
  100% { transform: translateY(-80px) scale(1.4); opacity: 0;  }
}

/* ============================================================================
   LID BOUNCE — basınç titreşim
   ============================================================================ */
.hv-canvas[data-brewing="true"] #teapot-lid {
  animation: hv-lid-bounce 1.2s ease-in-out infinite;
  transform-origin: center;
}
.hv-canvas[data-brewing="true"] #teapot-lid-knob {
  animation: hv-knob-rotate 1.2s ease-in-out infinite;
  transform-origin: 180px 128px;
}
@keyframes hv-lid-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@keyframes hv-knob-rotate {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(2deg); }
}

/* ============================================================================
   WATER SHIMMER — kettle içi yansıma
   ============================================================================ */
#water-shimmer {
  animation: hv-shimmer 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hv-shimmer {
  0%, 100% { opacity: .15; transform: translateY(0); }
  50%      { opacity: .45; transform: translateY(-4px); }
}

/* ============================================================================
   CONDENSATION DROPLETS — dem ≥7
   ============================================================================ */
.hv-canvas[data-condensing="true"] #glass-droplet-1,
.hv-canvas[data-condensing="true"] #glass-droplet-2,
.hv-canvas[data-condensing="true"] #glass-droplet-3 {
  animation: hv-droplet-fall 4.5s ease-in infinite;
}
.hv-canvas[data-condensing="true"] #glass-droplet-2 { animation-delay: 1.5s; }
.hv-canvas[data-condensing="true"] #glass-droplet-3 { animation-delay: 3s; }

@keyframes hv-droplet-fall {
  0%   { transform: translateY(0);    opacity: 0;  }
  20%  {                              opacity: .75; }
  100% { transform: translateY(40px); opacity: 0;  }
}

/* ============================================================================
   POUR STREAM — fill artınca demlikten kısa akıtma
   ============================================================================ */
#pour-stream { stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0; }
.hv-canvas[data-pouring="true"] #pour-stream {
  animation: hv-pour 0.7s ease-out forwards;
}
@keyframes hv-pour {
  0%   { stroke-dashoffset: 200; opacity: 0;   }
  20%  {                          opacity: .85; }
  100% { stroke-dashoffset: 0;   opacity: 0;   }
}

/* ============================================================================
   TEA / WATER FILL — smooth cubic transitions
   ============================================================================ */
#glass-tea,
#teapot-tea,
#kettle-water {
  transition: y .7s cubic-bezier(.4, 0, .2, 1),
              height .7s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hv-teapot,
  .hv-teapot svg,
  .hv-glass,
  #glass-tea,
  #teapot-tea,
  #kettle-water { transition: none; }
  .hv-canvas[data-steaming="true"] #steam1,
  .hv-canvas[data-steaming="true"] #steam2,
  .hv-canvas[data-steaming="true"] #steam3,
  .hv-canvas[data-steaming="true"] #steam4,
  .hv-canvas[data-steaming="true"] #steam5,
  .hv-canvas[data-brewing="true"] #teapot-lid,
  .hv-canvas[data-brewing="true"] #teapot-lid-knob,
  #water-shimmer,
  .harman-visualizer-wrap::after,
  .hv-canvas[data-condensing="true"] #glass-droplet-1,
  .hv-canvas[data-condensing="true"] #glass-droplet-2,
  .hv-canvas[data-condensing="true"] #glass-droplet-3 { animation: none !important; }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 980px) {
  .harman-visualizer-wrap {
    position: static;
    margin-bottom: var(--yz-sp-6, 28px);
  }
  .hv-canvas { height: 420px; }
}

@media (max-width: 520px) {
  .hv-canvas { height: 370px; max-width: 320px; }
  .hv-glass  { width: 24%; right: 4%; bottom: 10px; }
}