/* Landing page motion. Everything that moves sits inside prefers-reduced-motion: no-preference.
   Floats use the standalone `translate` / `rotate` / `scale` properties so they stack with the rotations
   already set through `transform` in styles.css. */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120; background: linear-gradient(90deg, var(--forest), #3B82F6, var(--gold)); transform: scaleX(0); transform-origin: left; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Page load: header drops in, hero copy rises piece by piece */
  .nav { animation: nav-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-copy.reveal > * { opacity: 0; animation: rise .8s cubic-bezier(.2, .8, .2, 1) forwards; }
  .hero-copy > :nth-child(1) { animation-delay: .15s; }
  .hero-copy > :nth-child(2) { animation-delay: .3s; }
  .hero-copy > :nth-child(3) { animation-delay: .5s; }
  .hero-copy > :nth-child(4) { animation-delay: .65s; }
  .hero-copy > :nth-child(5) { animation-delay: .75s; }
  .hero-copy > :nth-child(6) { animation-delay: .9s; }
  .hero-copy > :nth-child(7) { animation-delay: 1.05s; }
  .hero-photo { animation: photo-in 1.6s cubic-bezier(.2, .8, .2, 1) both, drift 22s ease-in-out 1.6s infinite alternate; }
  .phone-hero { animation: phone-in 1.1s cubic-bezier(.2, .8, .2, 1) .5s both, float 6s ease-in-out 1.6s infinite; }
  .note-hero { animation: wobble 5s ease-in-out infinite; }
  .squiggle-hero path { stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw 1.4s ease .9s forwards; }
  .rays i { animation: ray 2.4s ease-in-out infinite; }
  .rays i:nth-child(2) { animation-delay: .2s; }
  .rays i:nth-child(3) { animation-delay: .4s; }

  /* Paw prints drifting down behind the hero (added by motion.js) */
  .paws { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .paws svg { position: absolute; top: -40px; fill: var(--sage); opacity: 0; animation: fall linear infinite; }

  /* Scroll reveal: each block comes in from its own side */
  .reveal { transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
  .organized-photo.reveal, .care-phone.reveal { transform: translateX(36px); }
  .organized-phone.reveal, .install.reveal { transform: translateY(40px) scale(.96); }
  .install.reveal:nth-of-type(3) { --d: .12s; }
  .reveal.in { transform: none; }
  .features-grid .feature:nth-child(2) { --d: .08s; }
  .features-grid .feature:nth-child(3) { --d: .16s; }
  .features-grid .feature:nth-child(4) { --d: .24s; }
  .features-grid .feature:nth-child(5) { --d: .32s; }
  .features-grid .feature:nth-child(6) { --d: .4s; }

  /* Things that keep moving a little */
  .organized-phone .phone, .care-phone .phone { animation: float 7s ease-in-out infinite; }
  .care-phone .phone { animation-delay: -2.5s; }
  .blob-get-1 { animation: blob 14s ease-in-out infinite alternate; }
  .blob-get-2 { animation: blob 17s ease-in-out -4s infinite alternate-reverse; }
  .heart { display: inline-block; animation: beat 1.8s ease-in-out infinite; }
  .insight-icon { animation: ring 4s ease-in-out infinite; }

  /* Hover and press */
  .feature-icon { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
  .feature:hover .feature-icon { transform: translateY(-6px) rotate(-8deg) scale(1.08); box-shadow: var(--shadow); }
  .btn, .store { position: relative; overflow: hidden; }
  .btn:active, .store:active { transform: scale(.97); }
  .btn-primary::after, .btn-gold::after, .store::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
  .btn-primary:hover::after, .btn-gold:hover::after, .store:hover::after { left: 130%; }
  .organized-photo, .care-photo { overflow: hidden; border-radius: var(--radius); }
  .organized-photo:hover img, .care-photo:hover img { transform: scale(1.05); }
  .insight { transition: transform .3s ease, box-shadow .3s ease; }
  .insight:hover { transform: translateX(6px); box-shadow: var(--shadow); }
  .web-link i { transition: transform .25s ease; }
  .web-link:hover i { transform: translateX(5px); }
  .modal-card { animation: pop .4s cubic-bezier(.34, 1.56, .64, 1); }
  .phone { translate: 0 var(--par, 0px); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
}

@keyframes nav-in { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
@keyframes drift { from { scale: 1; } to { scale: 1.06; } }
@keyframes phone-in { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ray { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fall { 0% { transform: translateY(0) rotate(var(--r0)); opacity: 0; } 10% { opacity: .22; } 90% { opacity: .22; } 100% { transform: translateY(var(--h)) rotate(var(--r1)); opacity: 0; } }
@keyframes blob { to { transform: translate(40px, -30px) rotate(25deg) scale(1.08); } }
@keyframes crown { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -14deg; } 86% { rotate: 12deg; } 94% { rotate: -6deg; } }
@keyframes beat { 0%, 100% { scale: 1; } 14% { scale: 1.25; } 28% { scale: 1; } 42% { scale: 1.18; } 70% { scale: 1; } }
@keyframes ring { 0%, 80%, 100% { rotate: 0deg; } 84% { rotate: -12deg; } 88% { rotate: 12deg; } 92% { rotate: -8deg; } 96% { rotate: 6deg; } }
@keyframes pop { 0% { transform: scale(.9); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }