/* =========================================================================
   Faith Bloom Media — interactive motion layer (v1.1)
   Optional: remove the 'fbm-motion' enqueue in functions.php (FBM_MOTION)
   to switch everything here off. Uses individual transform properties
   (translate / rotate / scale) so it never fights the design's own transforms.
   Fully disabled for visitors who prefer reduced motion.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Scroll reveal (only when JS has armed it) ---------- */
  .fbm-motion [data-reveal] {
    opacity: 0; translate: 0 26px;
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .fbm-motion [data-reveal="drop"] { translate: 0 -28px; rotate: -4deg; transition-property: opacity, translate, rotate; }
  .fbm-motion [data-reveal="zoom"] { translate: none; scale: .94; transition-property: opacity, scale; }
  .fbm-motion [data-reveal].is-in { opacity: 1; translate: none; rotate: none; scale: none; }

  /* Section flourish: the hairlines draw outward and the heart pops */
  .fbm-motion .section-head .flourish::before,
  .fbm-motion .section-head .flourish::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .25s; }
  .fbm-motion .section-head .flourish::before { transform-origin: right; }
  .fbm-motion .section-head .flourish::after { transform-origin: left; }
  .fbm-motion .section-head.is-in .flourish::before,
  .fbm-motion .section-head.is-in .flourish::after { transform: none; }
  .fbm-motion .section-head.is-in .flourish svg { animation: fbm-pop .7s cubic-bezier(.3, 1.6, .5, 1) .5s both; }

  /* ---------- 2. Hero: floating keepsakes + gentle parallax ---------- */
  .hero-art .bow-top { transform-origin: 50% 20%; animation: fbm-sway 5.5s ease-in-out infinite; }
  .hero-art .sprig-l { transform-origin: 50% 100%; animation: fbm-sway-sm 6.5s ease-in-out infinite; }
  .hero-art .note { animation: fbm-bob 4.8s ease-in-out infinite; }
  .hero-art .arch, .hero-art .tape-photo, .hero-art .note, .hero-art .sprig-l {
    translate: calc(var(--px, 0) * var(--depth, 6px)) calc(var(--py, 0) * var(--depth, 6px));
    transition: translate .6s cubic-bezier(.2, .7, .2, 1);
  }
  .hero-art .arch { --depth: 5px; }
  .hero-art .tape-photo { --depth: 14px; }
  .hero-art .note { --depth: 18px; }
  .hero-art .sprig-l { --depth: 10px; }
  .hero-art .tape-photo { transition: translate .6s cubic-bezier(.2, .7, .2, 1), rotate .4s ease; }
  .hero-art .tape-photo:hover { rotate: -4deg; }

  /* ---------- 3. Cards lift on hover ---------- */
  .feature, .book, .product, .course, .resource, .mission, .pull-quote {
    transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
  }
  .feature:hover, .book:hover, .product:hover, .course:hover, .resource:hover {
    translate: 0 -6px;
    box-shadow: 0 2px 4px rgba(74, 54, 49, .06), 0 26px 40px -18px rgba(158, 74, 96, .38);
  }
  .feature:hover .feature-icon svg, .course:hover .course-icon svg { animation: fbm-wiggle .6s ease; }
  .feature-icon, .course-icon { transition: background-color .3s ease, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
  .feature:hover .feature-icon { scale: 1.08; background: var(--blush-deep); }
  .course:hover .course-icon { scale: 1.08; }
  .product-art img { transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
  .product:hover .product-art img { scale: 1.05; }
  .book-art { transition: rotate .4s ease; }
  .book:hover .book-art { rotate: -2deg; }

  /* Buttons & links: the little arrow nudges forward */
  .btn .icon, .buy .icon, .resource a .icon, .primary-nav .icon { transition: translate .25s ease; }
  .btn:hover .icon, .buy:hover .icon, .resource a:hover .icon, .primary-nav a:hover .icon { translate: 3px -2px; }

  /* Shop tiles: bow-like bounce on the icon */
  .shop-tile svg { transition: scale .35s cubic-bezier(.3, 1.6, .5, 1), rotate .35s ease; }
  .shop-tile:hover svg { scale: 1.12; rotate: -6deg; }

  /* Gallery polaroids: playful lift (design already straightens them on hover) */
  .photo-grid .polaroid { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
  .photo-grid .polaroid:hover { box-shadow: 0 2px 4px rgba(74, 54, 49, .08), 0 30px 40px -18px rgba(74, 54, 49, .45); z-index: 2; }

  /* Footer social circles */
  .social-icon { transition: background-color .25s ease, color .25s ease, scale .3s cubic-bezier(.3, 1.6, .5, 1); }
  .site-footer ul a:hover .social-icon { background: var(--rose); color: var(--white); scale: 1.1; }

  /* Heart in the announcement bar beats softly */
  .announce .icon { animation: fbm-beat 2.4s ease-in-out infinite; }

  /* Header gains a soft shadow once the page scrolls */
  .site-header { transition: box-shadow .3s ease; }
  .site-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(74, 54, 49, .45); }
}

@keyframes fbm-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes fbm-sway-sm { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes fbm-bob { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
@keyframes fbm-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 60% { rotate: 9deg; } }
@keyframes fbm-pop { 0% { scale: 0; } 100% { scale: 1; } }
@keyframes fbm-beat { 0%, 60%, 100% { scale: 1; } 30% { scale: 1.25; } }