/* Landing page: auto-looping feature accordion progress bar */
@keyframes tb-feature-progress {
  from { width: 0%; }
  to { width: 100%; }
}

.tb-feature-bar-fill {
  width: 0%;
}

details[open] > .tb-feature-bar-track > .tb-feature-bar-fill {
  animation: tb-feature-progress 5s linear forwards;
}

[data-controller~="feature-loop"]:hover .tb-feature-bar-fill {
  animation-play-state: paused;
}

/* Landing page: section-divider waves breathing in constant, gentle motion.
   Same command sequence (M,H,V,C,C,Z) as the resting path so `d` can interpolate;
   only the curve's control points shift, not the pinned top/side corners. */
.tb-wave {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.tb-wave-a {
  animation-name: tb-wave-breathe-a;
  animation-duration: 10s;
}

.tb-wave-b {
  animation-name: tb-wave-breathe-b;
  animation-duration: 12s;
}

@keyframes tb-wave-breathe-a {
  0%, 100% { d: path("M0,0 H1440 V52 C1230,112 1010,26 780,58 C560,89 330,120 0,74 Z"); }
  50% { d: path("M0,0 H1440 V64 C1230,96 1010,40 780,70 C560,105 330,102 0,58 Z"); }
}

@keyframes tb-wave-breathe-b {
  0%, 100% { d: path("M0,0 H1440 V70 C1120,10 900,104 640,86 C400,70 200,20 0,44 Z"); }
  50% { d: path("M0,0 H1440 V82 C1120,26 900,88 640,100 C400,54 200,36 0,30 Z"); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-wave { animation: none; }
}

/* Landing page: scroll-reveal entrances (see scroll_reveal_controller.js) */
.tb-scroll-reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.tb-scroll-reveal-item.tb-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Landing page: hero entrance choreography. Runs once on load (not scroll-tied --
   the hero is always above the fold, so there's no viewport crossing to observe). */
@keyframes tb-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.tb-hero-in {
  opacity: 0;
  animation: tb-hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tb-hero-in-1 { animation-delay: 0.05s; }
.tb-hero-in-2 { animation-delay: 0.15s; }
.tb-hero-in-3 { animation-delay: 0.25s; }
.tb-hero-in-4 { animation-delay: 0.35s; }
.tb-hero-in-5 { animation-delay: 0.45s; }
.tb-hero-in-6 { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .tb-hero-in { animation: none; opacity: 1; }
}

/* Landing page: "Getting started" connector arrows nudge forward on a loop, hinting
   at flow direction between steps. Delays are offset so the two don't move in lockstep. */
@keyframes tb-flow-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(4px); opacity: 1; }
}

.tb-flow-arrow {
  display: inline-block;
  animation: tb-flow-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tb-flow-arrow { animation: none; }
}

/* Landing page: "Getting started" step icons -- motion literal to what each depicts. */
@keyframes tb-icon-flip {
  0%, 38% { transform: rotate(0deg); }
  50%, 88% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

.tb-icon-flip {
  animation: tb-icon-flip 4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes tb-icon-tick {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

.tb-icon-tick {
  animation: tb-icon-tick 2.4s ease-in-out infinite;
}

.tb-icon-tick-delay {
  animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .tb-icon-flip, .tb-icon-tick { animation: none; }
}

/* Landing page: FAQ section polish -- ambient watermark drift plus an entrance
   animation on the answer each time a question opens. */
@keyframes tb-watermark-spin {
  to { transform: rotate(360deg); }
}

.tb-watermark-spin {
  animation: tb-watermark-spin 90s linear infinite;
}

.tb-watermark-spin-reverse {
  animation: tb-watermark-spin 70s linear infinite reverse;
}

@keyframes tb-faq-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tb-faq-item[open] > .tb-faq-answer {
  animation: tb-faq-answer-in 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .tb-watermark-spin, .tb-watermark-spin-reverse { animation: none; }
  .tb-faq-item[open] > .tb-faq-answer { animation: none; }
}