/* ===========================================================
   Preek AI — Animated Phone Hero
   Premium wellness, never clinical. Calm motion.
   =========================================================== */

/* override hero-visual chrome when it contains the animated phone */
.hero-grid { min-width: 0; }
.hero-grid > * { min-width: 0; }
.hero-visual:has(.phone-hero-mount) {
  background: transparent;
  box-shadow: none;
  border-radius: 36px;
  overflow: visible;
  width: 100%;
  min-width: 240px;
  margin-left: auto;
  margin-right: 0;
  transform: translateX(6%);
}
@media (max-width: 980px) {
  .hero-visual:has(.phone-hero-mount) { transform: none; margin: 0 auto; }
}
.hero-visual:has(.phone-hero-mount)::before { content: none; }
.hero-visual:has(.phone-hero-mount) .placeholder-tag { display: none; }
.phone-hero-mount { width: 100%; height: 100%; display: block; }


.ph-stage {
  --ph-peach-500: #FF8B6A;
  --ph-peach-600: #F26A4D;
  --ph-blush: #FFD9CC;
  --ph-cream: #FFF8F2;
  --ph-ink: #2A1A12;
  --ph-ink-700: #4A3528;
  --ph-ink-500: #8A6A55;
  --ph-glass: rgba(255, 252, 248, 0.62);
  --ph-glass-strong: rgba(255, 252, 248, 0.86);
  --ph-line: rgba(42, 26, 18, 0.08);

  --ph-serif-en: "Newsreader", ui-serif, Georgia, serif;
  --ph-serif-ko: "Gowun Batang", "Newsreader", ui-serif, serif;
  --ph-serif-ja: "Shippori Mincho", "Newsreader", ui-serif, serif;
  --ph-sans-en: "Manrope", system-ui, sans-serif;
  --ph-sans-ko: "Pretendard", "Pretendard Variable", "Manrope", system-ui, sans-serif;
  --ph-sans-ja: "Zen Maru Gothic", "Manrope", system-ui, sans-serif;
  --ph-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 36px;
  overflow: hidden;
  background: transparent;
  font-family: var(--ph-sans-en);
  color: var(--ph-ink);
  isolation: isolate;
}

.ph-stage[data-lang="ko"] { font-family: var(--ph-sans-ko); }
.ph-stage[data-lang="ja"] { font-family: var(--ph-sans-ja); }

/* warm radial glow behind phone — breathing */
.ph-glow {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 200, 170, 0.95) 0%,
    rgba(255, 170, 130, 0.55) 35%,
    rgba(255, 170, 130, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: ph-glow-breathe 7.2s ease-in-out infinite;
  z-index: 0;
}

@keyframes ph-glow-breathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* coral pulse rings emanating from phone */
.ph-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 106, 77, 0.5);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  animation: ph-pulse-out 3.6s ease-out infinite;
  z-index: 0;
}
.ph-pulse.p2 { animation-delay: 1.2s; }
.ph-pulse.p3 { animation-delay: 2.4s; }

@keyframes ph-pulse-out {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.95); }
  20%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.55); }
}

/* phone shell — floats */
.ph-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 9 / 19;
  transform: translate(-50%, -50%);
  background: linear-gradient(160deg, #1d1410, #0e0907);
  border-radius: 12% / 5.5%;
  padding: 2.4%;
  box-shadow:
    0 30px 60px -20px rgba(60, 25, 12, 0.45),
    0 0 0 1px rgba(255, 220, 200, 0.08),
    inset 0 1px 0 rgba(255, 230, 210, 0.18);
  animation: ph-phone-float 8s ease-in-out infinite;
  z-index: 2;
  will-change: transform;
}

@keyframes ph-phone-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-0.6deg); }
  50%      { transform: translate(-50%, calc(-50% - 8px)) rotate(0.6deg); }
}

.ph-screen {
  width: 100%;
  height: 100%;
  border-radius: 10% / 4.5%;
  background: linear-gradient(180deg, #FFF6EE 0%, #FFE9D9 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 7.5% 5% 5%;
  gap: 2.5%;
}

/* status bar */
.ph-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ph-sans-en);
  font-size: 10px;
  font-weight: 600;
  color: var(--ph-ink);
  padding: 0 2%;
  height: 14px;
  position: relative;
}
.ph-status .ph-notch {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 38%;
  height: 14px;
  background: #0e0907;
  border-radius: 0 0 12px 12px;
}
.ph-status .ph-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ph-ink);
}
.ph-status .ph-icons svg { width: 11px; height: 11px; }

/* header — eyebrow + title */
.ph-header {
  padding: 4% 2% 2%;
}
.ph-eyebrow {
  font-family: var(--ph-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-peach-600);
  margin-bottom: 4px;
}
.ph-title {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ph-ink);
  margin: 0;
}
.ph-stage[data-lang="en"] .ph-title { font-family: var(--ph-serif-en); }
.ph-stage[data-lang="ko"] .ph-title { font-family: var(--ph-serif-ko); }
.ph-stage[data-lang="ja"] .ph-title { font-family: var(--ph-serif-ja); }

/* active call card */
.ph-call {
  background: var(--ph-glass-strong);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 8px 22px -10px rgba(60, 25, 12, 0.25);
}
.ph-avatar {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ph-peach-500), var(--ph-peach-600));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--ph-serif-en);
  font-size: 14px;
  flex: none;
}
.ph-avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--ph-peach-500);
  opacity: 0;
  animation: ph-call-ring 2.2s ease-out infinite;
}
@keyframes ph-call-ring {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.35); }
}
.ph-call-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  flex: 1;
}
.ph-call-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ph-ink);
}
.ph-call-status {
  font-size: 8.5px;
  color: var(--ph-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ph-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2ea66a;
  animation: ph-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes ph-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.ph-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  margin-left: auto;
}
.ph-wave i {
  display: block;
  width: 2px;
  background: var(--ph-peach-600);
  border-radius: 2px;
  animation: ph-wave 1.5s ease-in-out infinite;
}
@keyframes ph-wave {
  0%, 100% { height: 20%; }
  50%      { height: 90%; }
}

/* conversation */
.ph-convo {
  flex: 1;
  padding: 2% 2% 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.ph-bubble {
  max-width: 78%;
  padding: 7px 11px;
  font-size: 10.5px;
  line-height: 1.35;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(6px);
  animation: ph-bubble-in 600ms ease-out forwards;
  word-break: keep-all;
  text-wrap: pretty;
}
.ph-bubble.ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--ph-ink-700);
  border-bottom-left-radius: 5px;
  box-shadow: 0 3px 10px -4px rgba(60, 25, 12, 0.15);
}
.ph-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--ph-peach-500), var(--ph-peach-600));
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 12px -4px rgba(242, 106, 77, 0.55);
}
@keyframes ph-bubble-in {
  0%   { opacity: 0; transform: translateY(6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* summary chip at bottom */
.ph-summary {
  margin-top: auto;
  background: var(--ph-glass);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  color: var(--ph-ink-700);
  align-self: stretch;
}
.ph-summary svg { width: 12px; height: 12px; color: var(--ph-peach-600); flex: none; }
.ph-summary .ph-summary-meta {
  margin-left: auto;
  color: var(--ph-ink-500);
  font-family: var(--ph-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

/* floating glass context cards */
.ph-card {
  position: absolute;
  z-index: 3;
  background: var(--ph-glass);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  padding: 8px 11px;
  font-size: 11px;
  color: var(--ph-ink);
  box-shadow:
    0 24px 60px -24px rgba(60, 25, 12, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  max-width: 44%;
  will-change: transform;
}
.ph-card .ph-card-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFE0CE, #FFC9AF);
  display: grid;
  place-items: center;
  color: var(--ph-peach-600);
  flex: none;
}
.ph-card .ph-card-icon svg { width: 14px; height: 14px; }
.ph-card .ph-card-label {
  font-family: var(--ph-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-ink-500);
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}
.ph-card .ph-card-text {
  font-size: 10.5px;
  line-height: 1.15;
  color: var(--ph-ink);
  font-weight: 500;
  display: block;
}

.ph-card.top-left {
  top: 9%;
  left: 4%;
  animation: ph-float-a 8.4s ease-in-out infinite;
}
.ph-card.mid-right {
  top: 44%;
  right: 3%;
  animation: ph-float-b 7.6s ease-in-out infinite;
}
.ph-card.bottom-left {
  bottom: 11%;
  left: 5%;
  animation: ph-float-c 9.2s ease-in-out infinite;
}

@keyframes ph-float-a {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50%      { transform: translateY(-7px) rotate(0.8deg); }
}
@keyframes ph-float-b {
  0%, 100% { transform: translateY(0) rotate(1.6deg); }
  50%      { transform: translateY(8px) rotate(-1deg); }
}
@keyframes ph-float-c {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1.4deg); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ph-stage *,
  .ph-stage *::before,
  .ph-stage *::after {
    animation: none !important;
    transition: none !important;
  }
  .ph-pulse { display: none; }
  .ph-bubble { opacity: 1; transform: none; }
}

/* small screen tightening */
@media (max-width: 520px) {
  .ph-stage { aspect-ratio: 4 / 5; }
  .ph-card { font-size: 10px; padding: 6px 9px; }
  .ph-card .ph-card-text { font-size: 9.5px; }
  .ph-card .ph-card-icon { width: 22px; height: 22px; }
  .ph-title { font-size: 14px; }
  .ph-bubble { font-size: 9.5px; }
}