/* Homepage Concept 2 — Dynamic Motion
   Loaded only from index.html. Honors prefers-reduced-motion. */

/* --- Hero phone video (portrait phone-fill 1080×1920) --- */
.hero-visual .phone[data-hero-phone],
.phone[data-hero-phone] {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #FAF6F0;
  aspect-ratio: 9 / 16;
  width: 100%;
  min-width: 0;
  max-width: 318.1px; /* 380px x 0.915 x 0.915 (2026-10-01) */
  margin: 0;
}

.phone[data-hero-phone] .hero-phone {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 1.5rem;
  background: #FAF6F0;
}

/* Poster (AVIF/WebP/PNG via <picture>) sits under the video; the video is transparent
   until its first frame, so this looks exactly like the old poster attribute. */
.phone[data-hero-phone] .hero-poster,
.phone[data-hero-phone] .hero-poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.phone[data-hero-phone] .hero-poster img {
  object-fit: contain;
  object-position: center center;
  border-radius: 1.5rem;
  background: #FAF6F0;
}
.phone[data-hero-phone] .hero-phone:not(.is-playing) {
  background: transparent;
}

.phone[data-hero-phone] .hero-phone-static {
  display: none;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 1.35rem 1.1rem 1.5rem;
  border-radius: 1.5rem;
  background: #FAF6F0;
}

.phone[data-hero-phone] .hero-phone-static .bubble {
  font-size: 1.05rem;
  line-height: 1.4;
  max-width: 95%;
}

.phone[data-hero-phone] .hero-phone-static .bubble small {
  font-size: 0.8rem;
}

/* Play-failure / forced static */
.phone[data-hero-phone].is-static .hero-phone,
.phone[data-hero-phone].is-static .hero-poster {
  display: none !important;
}

.phone[data-hero-phone].is-static .hero-phone-static {
  display: block;
}

/* Legacy bubble stagger (static / fallback bubbles) */
.phone[data-hero-phone] .bubble {
  opacity: 0;
  transform: translateY(12px);
  animation: tfh-bubble-in 0.55s ease-out forwards;
}
.phone[data-hero-phone] .bubble:nth-child(1) { animation-delay: 0.15s; }
.phone[data-hero-phone] .bubble:nth-child(2) { animation-delay: 0.45s; }
.phone[data-hero-phone] .bubble:nth-child(3) { animation-delay: 0.75s; }
.phone[data-hero-phone] .bubble:nth-child(4) { animation-delay: 1.05s; }
.phone[data-hero-phone] .bubble:nth-child(5) { animation-delay: 1.35s; }
.phone[data-hero-phone] .bubble:nth-child(6) { animation-delay: 1.65s; }

@keyframes tfh-bubble-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Scroll reveal for pulse / plan / trust cards --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease-out,
    transform 0.55s ease-out;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > [data-reveal] {
  transition-delay: calc(var(--reveal-i, 0) * 0.1s);
}

/* --- Reduced motion: static phone, no blur trails / chip float / stagger --- */
@media (prefers-reduced-motion: reduce) {
  .phone[data-hero-phone] .hero-phone,
  .phone[data-hero-phone] .hero-poster {
    display: none !important;
  }

  .phone[data-hero-phone] .hero-phone-static {
    display: block;
  }

  .phone[data-hero-phone] .bubble {
    opacity: 1;
    transform: none;
    animation: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .motion-chip {
    display: none !important;
  }

  /* No video frame in reduced motion: the static thread carries the same soft shadow (no bezel shape to follow). */
  .phone[data-hero-phone]::before {
    display: none;
  }
  .phone[data-hero-phone] .hero-phone-static {
    box-shadow: var(--tfh-phone-shadow);
  }
}

@media (max-width: 860px) {
  .hero-visual .phone[data-hero-phone],
  .phone[data-hero-phone] {
    max-width: min(267.9px, 100%); /* 320px x 0.915 x 0.915 */
    margin-inline: auto;
  }
}

/* --- Hero phone: no backdrop card, no blurred bars; just a soft drop shadow (2026-09-30) ---
   The video/poster frames are 1080x1920 with the black phone bezel at x 68-1012, y 38-1882 (radius ~106px) and a cream
   margin around it. The .phone box is now transparent and the frame is clipped to the bezel shape (sizes in cqw so it
   scales with the phone), so the cream margin and the old card vanish. The shadow is a ::before with the same shape. */
:root {
  --tfh-phone-shadow: 0 22px 38px -10px rgba(28, 25, 23, 0.22), 0 6px 14px rgba(28, 25, 23, 0.10);
}
.hero-visual .phone[data-hero-phone],
.phone[data-hero-phone] {
  container-type: inline-size;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.phone[data-hero-phone]::before {
  content: "";
  position: absolute;
  top: 3.519cqw;
  right: 6.204cqw;
  bottom: 3.426cqw;
  left: 6.296cqw;
  border-radius: 9.81cqw;
  box-shadow: var(--tfh-phone-shadow);
  z-index: -1;
  pointer-events: none;
}
.phone[data-hero-phone] .hero-phone,
.phone[data-hero-phone] .hero-poster {
  clip-path: inset(3.519cqw 6.204cqw 3.426cqw 6.296cqw round 9.81cqw);
  border-radius: 0;
}
.phone[data-hero-phone] .hero-poster img,
.phone[data-hero-phone] .hero-phone {
  background: transparent;
}
/* Forced-static (autoplay failed / reduced motion via JS): the static thread keeps its card look plus the same shadow. */
.phone[data-hero-phone].is-static::before {
  display: none;
}
.phone[data-hero-phone].is-static .hero-phone-static {
  box-shadow: var(--tfh-phone-shadow);
}

/* Static fallback chat (reduced motion / playback failure): size everything in container units so the six bubbles always fit inside
   the phone at every width (the phone box is now transparent with overflow visible, so overflow would spill below it). Staged 2026-10-03 (hero v5: message 5 is longer). */
.phone[data-hero-phone] .hero-phone-static {
  padding: 5.5cqw 4.6cqw 4.6cqw;
  overflow: hidden;
}
.phone[data-hero-phone] .hero-phone-static .bubble {
  font-size: 4.9cqw;
  line-height: 1.32;
  padding: 2.5cqw 3.7cqw;
  margin: 1.9cqw 0;
}
.phone[data-hero-phone] .hero-phone-static .bubble small {
  font-size: 3.7cqw;
  margin-bottom: 0.5cqw;
}