/* =============================================
   DOGAPP — ANIMATIONS & VISUAL MAGIC
   ============================================= */

/* ----- KEYFRAMES ----- */

@keyframes float-up-fade {
  0%   { opacity: 0; transform: translateY(0) scale(0.8) rotate(var(--r, 0deg)); }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.1) rotate(var(--r, 15deg)); }
}

@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.08); }
  66%  { transform: translate(-20px, 20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes glow-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0), 0 40px 80px rgba(200,60,0,0.45); }
  50%       { box-shadow: 0 0 0 8px rgba(255,107,53,0.25), 0 40px 80px rgba(200,60,0,0.6); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin-in {
  0%   { opacity: 0; transform: rotate(-180deg) scale(0.4); }
  70%  { transform: rotate(12deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes phone-bob {
  0%, 100% { transform: translateY(0px) rotate(var(--angle, 0deg)); }
  50%       { transform: translateY(-10px) rotate(var(--angle, 0deg)); }
}

@keyframes highlight-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(255,107,53,0); }
  50%       { text-shadow: 0 0 30px rgba(255,107,53,0.35); }
}

@keyframes badge-pop {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.85); }
  70%  { transform: translateY(2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes ripple-out {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes star-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes count-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); color: #FF6B35; }
  100% { transform: scale(1); }
}

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ----- HERO BACKGROUND ORBS ----- */

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: orb-drift linear infinite;
  filter: blur(60px);
}
.hero-orb-1 {
  width: 480px; height: 480px;
  top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(255,107,53,0.18), transparent 70%);
  animation-duration: 14s;
}
.hero-orb-2 {
  width: 320px; height: 320px;
  bottom: -80px; left: -80px;
  background: radial-gradient(circle, rgba(255,180,100,0.12), transparent 70%);
  animation-duration: 18s;
  animation-direction: reverse;
}
.hero-orb-3 {
  width: 200px; height: 200px;
  top: 40%; left: 15%;
  background: radial-gradient(circle, rgba(255,107,53,0.08), transparent 70%);
  animation-duration: 10s;
}

#paw-canvas { display: none; }

/* ----- HEADLINE: cor simples, sem gradient ----- */
/* (nenhuma override — mantém o #FF6B35 do styles.css) */

/* ----- HERO ENTRANCE ----- */

.hero-entrance { animation: reveal-up 0.8s cubic-bezier(0.22,1,0.36,1) forwards; opacity: 0; }
.hero-entrance-1 { animation-delay: 0.05s; }
.hero-entrance-2 { animation-delay: 0.2s; }
.hero-entrance-3 { animation-delay: 0.38s; }
.hero-entrance-4 { animation-delay: 0.55s; }

/* ----- PHONE BOB ----- */

.phone-1 { --angle: -6deg; animation: phone-bob 4s ease-in-out infinite; }
.phone-2 { --angle: 0deg;  animation: phone-bob 4s ease-in-out infinite; animation-delay: 0.7s; }
.phone-3 { --angle: 6deg;  animation: phone-bob 4s ease-in-out infinite; animation-delay: 1.4s; }
/* override static rotations so bob can handle it */
.phone-1:hover { animation-play-state: paused; }
.phone-2:hover { animation-play-state: paused; }
.phone-3:hover { animation-play-state: paused; }

/* ----- SECTION REVEAL (JS-driven) ----- */

.anim-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.anim-hidden.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----- RECEIVE ITEMS: left border slide ----- */

.receive-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.receive-item::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #FF6B35, #4CAF50);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  border-radius: 2px;
}
.receive-item.visible::before { transform: scaleY(1); }
.receive-item:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,0.07); }

/* ----- TESTIMONIAL GLOW HOVER ----- */

.testimonial {
  transition: transform 0.3s, box-shadow 0.3s;
}
.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(255,107,53,0.1);
}

/* ----- BONUS CARD SHIMMER ----- */

.bonus-card {
  position: relative;
  overflow: hidden;
}
.bonus-card::after {
  content: '';
  position: absolute; top: 0; left: -100%; bottom: 0;
  width: 60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  transition: left 0s;
}
.bonus-card:hover::after {
  left: 150%;
  transition: left 0.5s ease;
}

/* ----- OFFER CARD GLOW ----- */

.offer-card {
  animation: glow-border 3s ease-in-out infinite;
}

/* ----- OFFER PRICE SHIMMER ----- */

.offer-num {
  background: linear-gradient(90deg, white 20%, #FFE0CC 40%, white 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-sweep 3s linear infinite;
}

/* ----- GUARANTEE SEAL ENTRANCE ----- */

.seal-inner.animated {
  animation: spin-in 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
  opacity: 0;
}

/* ----- STAT CARDS COUNTER POP ----- */

.stat-num.popped { animation: count-pop 0.4s ease; }

/* ----- SECTION DECORATIVE LINE ----- */

.section-title {
  position: relative;
  padding-bottom: 16px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 60px; height: 3px;
  background: linear-gradient(90deg, #FF6B35, #FF9A00);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s;
}
.section-title.visible::after {
  transform: translateX(-50%) scaleX(1);
}

/* ----- CTA RIPPLE ----- */

.cta-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  width: 10px; height: 10px;
  pointer-events: none;
  animation: ripple-out 0.6s ease forwards;
  transform-origin: center;
}

/* ensure CTAs are position:relative for ripple */
.cta-scroll, .cta-offer, .cta-main {
  position: relative;
  overflow: hidden;
}

/* ----- STARS ANIMATED ENTRANCE ----- */

.stars-big {
  display: inline-block;
}
.stars-big span {
  display: inline-block;
  animation: star-spin 0.5s ease forwards;
  opacity: 0;
}
.stars-big span:nth-child(1) { animation-delay: 0s; }
.stars-big span:nth-child(2) { animation-delay: 0.1s; }
.stars-big span:nth-child(3) { animation-delay: 0.2s; }
.stars-big span:nth-child(4) { animation-delay: 0.3s; }
.stars-big span:nth-child(5) { animation-delay: 0.4s; }

/* ----- PAIN CARDS ICON BOUNCE ON HOVER ----- */

.pain-card:hover .pain-icon {
  animation: phone-bob 0.6s ease;
  display: inline-block;
}

/* ----- PROGRESS BAR IN PHONE MOCKUP ----- */

.mock-progress span {
  animation: line-grow 1.5s ease 0.8s both;
  transform-origin: left;
}

/* ----- FLOATING BADGE in SECTIONS ----- */

.bonus-tag {
  animation: badge-pop 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* ----- CTA FINAL SECTION GRADIENT ANIMATION ----- */

.cta-final {
  background: linear-gradient(135deg, #FF6B35, #FF8A5C, #E8420F, #FF6B35);
  background-size: 300% 300%;
  animation: gradient-move 6s ease infinite;
}

/* ----- HERO BACKGROUND: neutro limpo ----- */

.hero {
  background-color: #FFF5EE;
  background-image: none;
  animation: none;
}

/* ----- PATINHAS DECORATIVAS ----- */

.hero-paws {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hp {
  position: absolute;
  fill: #FF6B35;
}

/* 9 patinhas espalhadas irregularmente ao redor da headline/subheadline */
.hp-1 { width: 38px; top:  3%; left:  1%;   opacity: 0.10; transform: rotate(-22deg); }
.hp-2 { width: 26px; top:  0%; left: 28%;   opacity: 0.07; transform: rotate(14deg);  }
.hp-3 { width: 44px; top:  2%; right: 3%;   opacity: 0.08; transform: rotate(35deg);  }
.hp-4 { width: 22px; top: 22%; left:  4%;   opacity: 0.09; transform: rotate(-8deg);  }
.hp-5 { width: 32px; top: 18%; right: 1%;   opacity: 0.06; transform: rotate(50deg);  }
.hp-6 { width: 48px; top: 38%; left:  0%;   opacity: 0.05; transform: rotate(-40deg); }
.hp-7 { width: 20px; top: 10%; right: 20%;  opacity: 0.08; transform: rotate(-15deg); }
.hp-8 { width: 30px; top: 42%; right: 2%;   opacity: 0.06; transform: rotate(28deg);  }
.hp-9 { width: 24px; top:  8%; left: 55%;   opacity: 0.07; transform: rotate(-30deg); }

/* ----- TILT CARD (applied via JS) ----- */

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease;
  will-change: transform;
}

.scroll-hint { display: none; }

/* ----- REDUCE MOTION ----- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}