/* Small supplemental styles beyond Tailwind CDN utilities */

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Header logo size slider (admin editor, header.logo_size, 80-130%).
   Header only grows a little past 100% so a bigger logo can sit slightly
   proud of the bar instead of stretching the whole nav to match it. */
.ws-header-bar {
  --ws-logo-scale: 1;
  height: calc(6rem + max(0rem, (var(--ws-logo-scale) - 1) * 3rem));
  transition: height 0.15s ease;
}

.ws-header-logo {
  height: calc(6rem * var(--ws-logo-scale));
  transition: height 0.15s ease;
}

/* Hero headline's circled-phrase marker (admin editor, hero.circle_size).
   Scales the whole circle graphic around its own center. The scale var is
   set on the outer wrapper (.ws-circle-visual's parent) and inherited here --
   don't redeclare it on this element or that inheritance breaks. */
.ws-circle-visual {
  transform: scale(var(--ws-circle-scale, 1));
  transform-origin: center;
  transition: transform 0.15s ease;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Soft drifting color blobs behind the hero / closing CTA sections. */
@keyframes ws-shimmer {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, -6%) scale(1.08); }
}

.ws-shimmer {
  animation: ws-shimmer 14s ease-in-out infinite;
}

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

/* Hero eyebrow pill: flips through "lead agencies" / "sales teams" /
   "local businesses" one at a time, each word owning a third of the cycle
   while the others sit hidden and rotated out of view. */
.ws-flip-word {
  position: relative;
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
  perspective: 240px;
}

.ws-eyebrow-accent {
  color: #f87171;
}

.ws-flip-word-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: ws-flip-cycle 5.4s infinite;
}

@keyframes ws-flip-cycle {
  0% { opacity: 0; transform: translateY(55%) scale(0.5) rotateX(-45deg); }
  2.5% { opacity: 1; transform: translateY(-6%) scale(1.22) rotateX(0deg); }
  5% { transform: translateY(0) scale(0.92) rotateX(0deg); }
  8% { transform: translateY(0) scale(1.04) rotateX(0deg); }
  11%, 29% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
  33.33% { opacity: 0; transform: translateY(-55%) scale(0.6) rotateX(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-flip-word-item {
    animation: none;
    opacity: 0;
    transform: none;
  }
  .ws-flip-word-item:first-child {
    position: static;
    opacity: 1;
  }
}

/* Mobile (<640px) sizing pass, modelled on PlusVibe's phone layout:
   compact header, one-line eyebrow pill, smaller headline/body so the hero
   fits the first screen. !important because Tailwind's CDN styles are
   injected after this sheet. */
@media (max-width: 639px) {
  .ws-header-bar {
    height: calc(3.75rem + max(0rem, (var(--ws-logo-scale) - 1) * 1.5rem)) !important;
  }
  .ws-header-logo {
    height: calc(2.5rem * var(--ws-logo-scale)) !important;
  }
  #ws-header-row {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #ws-header-row a[href$="/signup"] {
    white-space: nowrap;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.9rem !important;
  }

  section[data-section="hero"] > div.relative > p.inline-flex {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
    margin-bottom: 1.5rem !important;
    white-space: nowrap;
    max-width: 100%;
  }
  section[data-section="hero"] h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  section[data-section="hero"] > div.relative > p.text-lg {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-top: 1rem !important;
  }
  section[data-section="hero"] > div.relative > div.mt-11 {
    margin-top: 1.75rem !important;
  }
  section[data-section="hero"] > div.relative > div.mt-11 > a {
    padding: 0.85rem 1.75rem !important;
    font-size: 1rem !important;
  }
  section[data-section="hero"] > div.relative > div.mt-8 {
    margin-top: 1.5rem !important;
    gap: 0.6rem 1.5rem !important;
    font-size: 0.85rem !important;
  }
}