/* =========================================================
   CWF WOW EFFECTS v1.0 — premium motion layer
   Progressive enhancement: all effects are additive.
   If JS fails, content stays fully visible (SEO-safe).
   Scope: .cwf-landing-root.cwf-v4415
   ========================================================= */

/* ===================================================
   0. MOTION-SAFE — respect reduced motion
=================================================== */
@media (prefers-reduced-motion: reduce) {
  .cwf-landing-root.cwf-v4415 *,
  .cwf-landing-root.cwf-v4415 *::before,
  .cwf-landing-root.cwf-v4415 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===================================================
   1. HERO — mouse-follow spotlight + aurora
=================================================== */
.cwf-landing-root.cwf-v4415 .cwf-hero {
  --mx: 50%;
  --my: 30%;
}

/* Spotlight that follows the cursor (driven by JS --mx/--my) */
.cwf-landing-root.cwf-v4415 .cwf-hero .cwf-hero-spot {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(91, 214, 255, .20) 0%,
    rgba(91, 214, 255, .08) 32%,
    transparent 60%
  ) !important;
  transition: background .12s ease-out !important;
  mix-blend-mode: screen !important;
}

/* Aurora ribbon sweeping across the hero */
.cwf-landing-root.cwf-v4415 .cwf-hero .cwf-aurora {
  position: absolute !important;
  inset: -40% -10% auto -10% !important;
  height: 120% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(21,184,255,0) 0deg,
      rgba(21,184,255,.16) 70deg,
      rgba(124,77,255,.18) 150deg,
      rgba(6,238,125,.12) 220deg,
      rgba(255,212,41,.14) 300deg,
      rgba(21,184,255,0) 360deg) !important;
  filter: blur(60px) !important;
  opacity: .8 !important;
  animation: cwfAuroraSpin 26s linear infinite !important;
}
@keyframes cwfAuroraSpin {
  0%   { transform: rotate(0deg)   scale(1.1); }
  100% { transform: rotate(360deg) scale(1.1); }
}

/* ===================================================
   2. H1 — animated gradient shimmer on the .grad span
=================================================== */
.cwf-landing-root.cwf-v4415 .hero-copy h1 .grad,
.cwf-landing-root.cwf-v4415 .hero-copy h1 span.grad {
  background: linear-gradient(
    100deg,
    #4dd9ff 0%, #8be9ff 18%, #ffd429 40%,
    #fff0a8 52%, #12f07e 72%, #4dd9ff 100%
  ) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: cwfGradFlow 6s linear infinite !important;
}
@keyframes cwfGradFlow {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* ===================================================
   3. SCROLL REVEAL — JS adds .cwf-wow-hidden then .cwf-in
   Default (no JS) = fully visible.
=================================================== */
.cwf-landing-root.cwf-v4415 .cwf-wow-hidden {
  opacity: 0 !important;
  transform: translateY(34px) scale(.985) !important;
  transition:
    opacity .7s cubic-bezier(.22,.8,.2,1),
    transform .7s cubic-bezier(.22,.8,.2,1) !important;
  will-change: opacity, transform !important;
}
.cwf-landing-root.cwf-v4415 .cwf-wow-hidden.cwf-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* ===================================================
   4. CARD SHIMMER SWEEP — light sweeps once on reveal
=================================================== */
.cwf-landing-root.cwf-v4415 .svc-card,
.cwf-landing-root.cwf-v4415 .why-card,
.cwf-landing-root.cwf-v4415 #rainy-promo .price-bubble,
.cwf-landing-root.cwf-v4415 .faq-item {
  position: relative !important;
  overflow: hidden !important;
}
.cwf-landing-root.cwf-v4415 .svc-card::after,
.cwf-landing-root.cwf-v4415 .why-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 75% !important;
  height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  ) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.cwf-landing-root.cwf-v4415 .svc-card.cwf-in::after,
.cwf-landing-root.cwf-v4415 .why-card.cwf-in::after {
  animation: cwfSweep 1.1s ease .15s 1 !important;
}
@keyframes cwfSweep {
  0%   { left: -130%; }
  100% { left: 130%; }
}

/* ===================================================
   5. 3D TILT — JS sets --tx/--ty; smooth spring
=================================================== */
.cwf-landing-root.cwf-v4415 .cwf-tilt {
  transform:
    perspective(900px)
    rotateX(var(--ty, 0deg))
    rotateY(var(--tx, 0deg))
    translateY(var(--tlift, 0px)) !important;
  transition: transform .25s cubic-bezier(.22,.8,.2,1) !important;
  transform-style: preserve-3d !important;
}

/* ===================================================
   6. ANIMATED GLOW BORDER — CTA buttons + featured bubble
=================================================== */
.cwf-landing-root.cwf-v4415 .hero-actions .btn-yellow,
.cwf-landing-root.cwf-v4415 .final-actions .btn-yellow {
  position: relative !important;
  z-index: 1 !important;
}
.cwf-landing-root.cwf-v4415 .hero-actions .btn-yellow::before,
.cwf-landing-root.cwf-v4415 .final-actions .btn-yellow::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 999px !important;
  z-index: -1 !important;
  background: conic-gradient(
    from 0deg,
    #ffd429, #fff6c0, #15b8ff, #06ee7d, #ffd429
  ) !important;
  background-size: 300% 300% !important;
  filter: blur(7px) !important;
  opacity: .0 !important;
  transition: opacity .3s ease !important;
  animation: cwfGlowSpin 4s linear infinite !important;
}
.cwf-landing-root.cwf-v4415 .hero-actions .btn-yellow:hover::before,
.cwf-landing-root.cwf-v4415 .final-actions .btn-yellow:hover::before {
  opacity: .85 !important;
}
@keyframes cwfGlowSpin {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Featured price bubble gets a permanent soft glow ring */
.cwf-landing-root.cwf-v4415 #rainy-promo .price-bubble.featured {
  position: relative !important;
}
.cwf-landing-root.cwf-v4415 #rainy-promo .price-bubble.featured::after {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 22px !important;
  z-index: -1 !important;
  background: linear-gradient(135deg, #15b8ff, #ffd429) !important;
  filter: blur(10px) !important;
  opacity: .45 !important;
  animation: cwfPulseGlow 3s ease-in-out infinite !important;
}
@keyframes cwfPulseGlow {
  0%,100% { opacity: .30; }
  50%     { opacity: .60; }
}

/* ===================================================
   7. STAT NUMBERS — subtle continuous glow pulse
=================================================== */
.cwf-landing-root.cwf-v4415 .stat-num,
.cwf-landing-root.cwf-v4415 .cwf26-trust-num {
  animation: cwfNumGlow 3.5s ease-in-out infinite !important;
}
@keyframes cwfNumGlow {
  0%,100% { filter: drop-shadow(0 0 14px rgba(255,212,41,.30)); }
  50%     { filter: drop-shadow(0 0 26px rgba(255,212,41,.55)); }
}

/* ===================================================
   8. SVC ICON — gentle float loop
=================================================== */
.cwf-landing-root.cwf-v4415 .svc-icon {
  animation: cwfIconFloat 4.5s ease-in-out infinite !important;
}
.cwf-landing-root.cwf-v4415 .svc-card:nth-child(2) .svc-icon { animation-delay: .6s !important; }
.cwf-landing-root.cwf-v4415 .svc-card:nth-child(3) .svc-icon { animation-delay: 1.2s !important; }
.cwf-landing-root.cwf-v4415 .svc-card:nth-child(4) .svc-icon { animation-delay: 1.8s !important; }
@keyframes cwfIconFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
/* Don't fight the hover transform */
.cwf-landing-root.cwf-v4415 .svc-card:hover .svc-icon {
  animation-play-state: paused !important;
}

/* ===================================================
   9. SCROLL-DOWN HINT in hero (added by JS)
=================================================== */
.cwf-landing-root.cwf-v4415 .cwf-scroll-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  width: 26px !important;
  height: 42px !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}
.cwf-landing-root.cwf-v4415 .cwf-scroll-hint::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 8px !important;
  width: 4px !important;
  height: 8px !important;
  margin-left: -2px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.85) !important;
  animation: cwfScrollDot 1.8s ease-in-out infinite !important;
}
@keyframes cwfScrollDot {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
@media (max-width: 760px) {
  .cwf-landing-root.cwf-v4415 .cwf-scroll-hint { display: none !important; }
}

/* =========================================================
   THAI READABILITY (final layer — loads last on the homepage)
   Base CSS shrank body copy to 11.6–14px with tight leading via
   high-specificity !important rules (#services / #reviews …).
   These match/beat that specificity and use clamp() so the size
   scales instead of stepping down on small phones.
   ========================================================= */
html body .cwf-landing-root.cwf-v4415 #services .svc-card p,
html body .cwf-landing-root.cwf-v4415 .cwf-services .svc-card p,
html body .cwf-landing-root.cwf-v4415 .svc-card p{
  font-size: clamp(14.2px, 3.6vw, 15.6px) !important;
  line-height: 1.75 !important;
}
html body .cwf-landing-root.cwf-v4415 #reviews .review-text,
html body .cwf-landing-root.cwf-v4415 .review-text{
  font-size: clamp(14.6px, 3.7vw, 16px) !important;
  line-height: 1.76 !important;
}
html body .cwf-landing-root.cwf-v4415 .cwf-why .why-card p,
html body .cwf-landing-root.cwf-v4415 .why-card p,
html body .cwf-landing-root.cwf-v4415 .article-card p,
html body .cwf-landing-root.cwf-v4415 .faq-intro p,
html body .cwf-landing-root.cwf-v4415 .areas-card-copy p,
html body .cwf-landing-root.cwf-v4415 .ba-problem-card p,
html body .cwf-landing-root.cwf-v4415 .cert-point > div{
  font-size: clamp(14.6px, 3.7vw, 16px) !important;
  line-height: 1.76 !important;
}
html body .cwf-landing-root.cwf-v4415 .hero-lead{
  font-size: clamp(15.4px, 4vw, 17.4px) !important;
  line-height: 1.84 !important;
}
html body .cwf-landing-root.cwf-v4415 .section-head p{
  font-size: clamp(14.8px, 3.7vw, 16.4px) !important;
  line-height: 1.8 !important;
}
/* supporting / secondary copy */
html body .cwf-landing-root.cwf-v4415 .promo-note > div,
html body .cwf-landing-root.cwf-v4415 .promo-note strong,
html body .cwf-landing-root.cwf-v4415 .cwf-hp-reg-box,
html body .cwf-landing-root.cwf-v4415 .cwf-hp-reg-box strong,
html body .cwf-landing-root.cwf-v4415 .footer-desc,
html body .cwf-landing-root.cwf-v4415 .footer-links a,
html body .cwf-landing-root.cwf-v4415 .footer-links span,
html body .cwf-landing-root.cwf-v4415 .footer-social-copy,
html body .cwf-landing-root.cwf-v4415 .footer-copy{
  font-size: 14.4px !important;
  line-height: 1.78 !important;
}
html body .cwf-landing-root.cwf-v4415 .stat-label,
html body .cwf-landing-root.cwf-v4415 .secondary-zone-title,
html body .cwf-landing-root.cwf-v4415 .cwf-hp-orig-inline{
  font-size: 13.2px !important;
  line-height: 1.6 !important;
}
html body .cwf-landing-root.cwf-v4415 .faq-item summary{
  font-size: clamp(15px, 3.8vw, 16.4px) !important;
  line-height: 1.6 !important;
}

/* Service cards clamped their copy to 3 lines (-webkit-box + line-clamp),
   which now cuts mid-sentence at the larger, more readable font size.
   Show the full sentence; the grid keeps every card the same height. */
html body .cwf-landing-root.cwf-v4415 #services .svc-card p,
html body .cwf-landing-root.cwf-v4415 .svc-card p{
  display: block !important;
  -webkit-line-clamp: none !important;
  -webkit-box-orient: horizontal !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}