/*
Theme Name: WithTheMums
Theme URI: https://withthemums.com/
Author: WithTheMums Team
Author URI: https://withthemums.com/
Description: A luxury, supportive community theme for motherhood and parenting. Real experiences, heartfelt stories, interactive reels, and expert courses.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: withthemums
*/

/* ======================================================== */
      /* SCROLL TEXT ANIMATION ENGINE (SteadyShield-inspired)     */
      /* ======================================================== */

      /* Word-level reveal: each word clips up from below */
      .reveal-lines .word {
        display: inline-block;
        will-change: transform, opacity;
      }

      /* Fade-up reveal for paragraphs, subtext, buttons */
      .reveal-fade {
        will-change: transform, opacity;
      }

      /* Cards remain steady and fully visible (animations are text-only) */
      .reveal-block {
        opacity: 1 !important;
        transform: none !important;
      }
      ::selection {
        background-color: #eccfd4;
        color: #3d1520;
      }
      .hand-script {
        font-family: "Caveat", cursive;
      }

      /* ======================================================== */
      /* $100K LUXURY ANIMATIONS & MICRO-INTERACTIONS ENGINE     */
      /* ======================================================== */

      

      /* Top Reading Progress Bar */
      #progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0%;
        background: linear-gradient(
          90deg,
          #541e2a 0%,
          #ba6b7a 50%,
          #eccfd4 100%
        );
        z-index: 100000;
        transition: width 0.08s ease-out;
      }

      /* Sweeping Organic Arch & Wave Mask on Hero Photo matching screenshot */
      .hero-photo-curve {
        border-top-left-radius: 280px;
        border-bottom-left-radius: 280px;
        border-bottom-right-radius: 120px;
        transform-style: preserve-3d;
        transition:
          transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }
      @media (min-width: 1024px) {
        .hero-photo-curve {
          border-top-left-radius: 420px;
          border-bottom-left-radius: 360px;
          border-bottom-right-radius: 140px;
        }
      }
      @media (max-width: 768px) {
        .hero-photo-curve {
          border-top-left-radius: 100px;
          border-bottom-left-radius: 100px;
          border-bottom-right-radius: 60px;
        }
      }

      /* Delicate Heartbeat Pulse */
      @keyframes heartbeat {
        0%,
        100% {
          transform: scale(1);
        }
        14% {
          transform: scale(1.18);
        }
        28% {
          transform: scale(1);
        }
        42% {
          transform: scale(1.14);
        }
        70% {
          transform: scale(1);
        }
      }
      .animate-heartbeat {
        animation: heartbeat 2.6s ease-in-out infinite;
        transform-origin: center;
        display: inline-block;
      }

      /* Ambient Float Animation for Doodles & Leaves */
      @keyframes gentleFloat {
        0%,
        100% {
          transform: translateY(0px) rotate(-3deg);
        }
        50% {
          transform: translateY(-7px) rotate(-1deg);
        }
      }
      .animate-gentle-float {
        animation: gentleFloat 5s ease-in-out infinite;
      }

      @keyframes botanicalSway {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }
        50% {
          transform: translateY(-5px) rotate(2deg);
        }
      }
      .animate-sway {
        animation: botanicalSway 7s ease-in-out infinite;
      }

      /* Liquid Shimmer Light-Beam for Luxury Pill Buttons */
      .btn-shimmer {
        position: relative;
        overflow: hidden;
      }
      .btn-shimmer::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -60%;
        width: 40%;
        height: 200%;
        background: linear-gradient(
          60deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.45) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: rotate(25deg);
        transition: all 0.75s ease-in-out;
        opacity: 0;
        pointer-events: none;
      }
      .btn-shimmer:hover::after {
        left: 120%;
        opacity: 1;
      }

      /* 3D Interactive Card Tilt Perspective */
      .card-3d {
        perspective: 1000px;
        transform-style: preserve-3d;
        transition:
          transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .card-3d-inner {
        transform-style: preserve-3d;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Scroll-Triggered Fade & Slide Reveals */
      .reveal-init {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
      }
      .reveal-active {
        opacity: 1;
        transform: translateY(0);
      }

      /* Floating Heart Reaction Bursts */
      .flying-heart {
        position: fixed;
        pointer-events: none;
        z-index: 100000;
        user-select: none;
        animation: flyUpAndFade 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      @keyframes flyUpAndFade {
        0% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
        }
        50% {
          opacity: 0.9;
          transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 60px))
            scale(1.2) rotate(var(--rot, 15deg));
        }
        100% {
          opacity: 0;
          transform: translate(
              calc(-50% + calc(var(--dx, 0px) * 1.5)),
              calc(-50% - 130px)
            )
            scale(1.4) rotate(var(--rot, 25deg));
        }
      }

      /* Soft Glow for Dark Berry Banner */
      .berry-ambient-glow {
        position: absolute;
        width: 320px;
        height: 320px;
        background: radial-gradient(
          circle,
          rgba(186, 107, 122, 0.35) 0%,
          rgba(99, 34, 50, 0) 70%
        );
        filter: blur(40px);
        border-radius: 50%;
        pointer-events: none;
      }

.font-hand {
        font-family: "Caveat", cursive;
      }


/* Courses & FAQ Utilities */
.faq-item[aria-expanded="true"] {
  border-color: #d9a99c;
  background: #fffdfb;
  box-shadow: 0 14px 34px -10px rgba(99, 34, 50, 0.08);
}

/* Policy prose styles */
.policy-prose h2 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #3D1520;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.policy-prose p, .policy-prose li {
  color: #635C57;
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* Standard Browser Cursor */
*, *:hover, a, button { cursor: auto; }
a, button, [role="button"], input[type="submit"] { cursor: pointer; }

/* Container Query Context for Hero Banner */
.hero-banner-container {
  container-type: inline-size;
}