/* ============================================================
   BreatheFirst — Motion layer (loaded after art.css)
   Choreographed entrances, living surfaces, tactile buttons.
   Only transform, opacity and filter animate; everything pauses
   under prefers-reduced-motion and while the tab is hidden.
   motion.js adds the classes; this file does the moving.
   ============================================================ */

:root { --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---------- 1. Entrances: staggered rise for every surface ---------- */
.m-reveal { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); will-change: transform, opacity; }
.m-reveal.m-in { opacity: 1; transform: none; transition: opacity 0.9s var(--m-ease), transform 0.9s var(--m-ease); transition-delay: calc(var(--i, 0) * 70ms); will-change: auto; }
.m-reveal.m-in.m-left { transition-duration: 0.8s; }
.reveal { transition-delay: calc(var(--i, 0) * 70ms) !important; }

/* Hero: words rise one by one, the highlight line settles after */
.m-word { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translate3d(0, 0.6em, 0) rotate(2deg); animation: mWord 0.9s var(--m-ease) forwards; animation-delay: calc(0.12s + var(--i, 0) * 90ms); transform-origin: 0 100%; }
.hero-title .highlight.m-rise { display: inline-block; opacity: 0; transform: translate3d(0, 0.5em, 0); animation: mRise 1s var(--m-ease) forwards; animation-delay: 0.45s; }
.hero-badge.m-rise, .hero-text.m-rise, .hero-actions.m-rise, .hero-image.m-rise { opacity: 0; animation: mRise 1s var(--m-ease) forwards; }
.hero-badge.m-rise { animation-delay: 0.05s; }
.hero-text.m-rise { animation-delay: 0.6s; }
.hero-actions.m-rise { animation-delay: 0.75s; }
.hero-image.m-rise { animation-delay: 0.5s; animation-duration: 1.3s; }
@keyframes mWord { to { opacity: 1; transform: none; } }
@keyframes mRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }

/* ---------- 2. Living surfaces ---------- */
/* Hero media: slow push-in, like a held breath */
.hero-media-wrapper video, .hero-media-wrapper img { animation: mKenBurns 28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes mKenBurns { from { transform: scale(1); } to { transform: scale(1.08) translate3d(0, -1.5%, 0); } }
/* Floating cards drift on their own tide */
.float-card { animation: mFloatA 7s ease-in-out infinite !important; }
.float-card-2 { animation: mFloatB 9s ease-in-out infinite !important; }
@keyframes mFloatA { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); } 50% { transform: translate3d(0, -12px, 0) rotate(0.6deg); } }
@keyframes mFloatB { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0.5deg); } 50% { transform: translate3d(0, -16px, 0) rotate(-0.8deg); } }
/* Topic and tip icons bob; each card on its own phase */
.topic-icon, .tip-card .tip-icon, .native-card-icon, .level-card-icon { display: inline-block; animation: mBob 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s); }
@keyframes mBob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
/* Glass sheen sweeps across cards on a long cycle */
.topic-card, .tip-card, .native-card, .affirmation-card, .level-card, .newsletter-card { position: relative; overflow: hidden; }
.topic-card::after, .tip-card::after, .native-card::after, .affirmation-card::after, .level-card::after, .newsletter-card::after {
  content: ""; position: absolute; inset: -40% -60%; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translate3d(-60%, 0, 0) rotate(8deg); animation: mSheen 11s linear infinite; animation-delay: calc(var(--i, 0) * -1.3s);
}
.topic-card > *, .tip-card > *, .native-card > *, .affirmation-card > *, .level-card > *, .newsletter-card > * { position: relative; z-index: 1; }
@keyframes mSheen { 0%, 70% { transform: translate3d(-60%, 0, 0) rotate(8deg); } 100% { transform: translate3d(60%, 0, 0) rotate(8deg); } }
/* Breathing stage: two soft rings ripple outward continuously */
.m-ring { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(95, 243, 239, 0.35); transform: translate(-50%, -50%) scale(0.9); opacity: 0; pointer-events: none; z-index: 0; animation: mRipple 6s ease-out infinite; }
.m-ring.m-ring-2 { animation-delay: 3s; }
@keyframes mRipple { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); } 15% { opacity: 0.7; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }
/* Floating actions breathe */
.ai-chat-btn, .sos-calm-btn { animation: mGlow 4.4s ease-in-out infinite; }
.sos-calm-btn { animation-delay: -2.2s; }
@keyframes mGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(95, 243, 239, 0)); } 50% { filter: drop-shadow(0 0 16px rgba(95, 243, 239, 0.45)); } }
/* Active tab and pattern: a slow halo */
.game-tab.active, .pattern-btn.active { animation: mHalo 3.2s ease-in-out infinite; }
@keyframes mHalo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(95, 243, 239, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(95, 243, 239, 0.5)); } }
/* Section labels: the dot before them pulses */
.section-label::before { animation: mDot 2.6s ease-in-out infinite; }
@keyframes mDot { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* ---------- 3. Touch and hover feedback ---------- */
.btn-primary, .btn-secondary, .mood-btn, .pattern-btn, .game-tab, .reminder-btn, .breathing-btn, .calm-chip, .imax-btn, .b-mode-btn {
  transition: transform 0.28s var(--m-spring), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, filter 0.3s ease !important;
}
.btn-primary:active, .btn-secondary:active, .mood-btn:active, .pattern-btn:active, .game-tab:active, .breathing-btn:active, .calm-chip:active, .imax-btn:active, .b-mode-btn:active { transform: scale(0.95) !important; }
.mood-btn:hover .mood-emoji, .mood-btn:focus-visible .mood-emoji { animation: mWiggle 0.6s var(--m-spring); }
@keyframes mWiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(10deg) scale(1.1); } 100% { transform: rotate(0); } }
.m-pop { animation: mPop 0.5s var(--m-spring); }
@keyframes mPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* Primary button: a light sweep every few seconds */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 65%); transform: translate3d(-120%, 0, 0); animation: mSweep 5.5s ease-in-out infinite; }
@keyframes mSweep { 0%, 60% { transform: translate3d(-120%, 0, 0); } 100% { transform: translate3d(120%, 0, 0); } }
/* Pointer tilt (desktop, hover devices only; motion.js sets the vars) */
@media (hover: hover) and (pointer: fine) {
  .m-tilt { transform-style: preserve-3d; transition: transform 0.35s var(--m-ease), box-shadow 0.35s ease !important; }
  .m-tilt.m-tilting { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translate3d(0, -3px, 0) !important; transition: box-shadow 0.35s ease !important; }
  .m-tilt .m-glare { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%); transition: opacity 0.35s ease; }
  .m-tilt.m-tilting .m-glare { opacity: 1; }
  .nav-links a { position: relative; }
  .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: linear-gradient(90deg, var(--mint), rgba(95, 243, 239, 0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--m-ease); }
  .nav-links a:hover::after { transform: scaleX(1); }
}

/* ---------- 4. Numbers count up (motion.js animates the text) ---------- */
.stat-number { font-variant-numeric: tabular-nums; }

/* ---------- 5. Respect the person and the battery ---------- */
html.m-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .m-reveal, .m-word, .m-rise, .hero-title .highlight.m-rise, .hero-badge.m-rise, .hero-text.m-rise, .hero-actions.m-rise, .hero-image.m-rise { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero-media-wrapper video, .hero-media-wrapper img, .float-card, .topic-icon, .tip-card .tip-icon, .native-card-icon, .level-card-icon, .topic-card::after, .tip-card::after, .native-card::after, .affirmation-card::after, .level-card::after, .newsletter-card::after, .m-ring, .ai-chat-btn, .sos-calm-btn, .game-tab.active, .pattern-btn.active, .section-label::before, .btn-primary::after { animation: none !important; }
}