/* =========================================================================
   HeartFelt Kids — Motion
   Gentle, storybook movement. Nothing flashes, nothing demands attention,
   nothing races. The world simply breathes so it feels alive to a child.
   Every animation is switched off for visitors who prefer reduced motion.
   ========================================================================= */

/* ---- Keyframes -------------------------------------------------------- */
@keyframes hfk-drift {           /* clouds crossing the sky */
  from { transform: translateX(0); }
  to   { transform: translateX(120px); }
}
@keyframes hfk-sway {            /* treetops in a soft breeze */
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
@keyframes hfk-bob {             /* flowers and small things nodding */
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}
@keyframes hfk-breathe {         /* the sun, gently glowing */
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes hfk-spin-slow {       /* sun rays turning */
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hfk-shimmer {         /* rainbow brightening and softening */
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 0.95; }
}
@keyframes hfk-fly {             /* a bird crossing the whole sky */
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(320px, -26px); }
  92%  { opacity: 1; }
  100% { transform: translate(640px, 6px); opacity: 0; }
}
@keyframes hfk-idle {            /* Melody breathing while she waits */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-1deg); }
}
@keyframes hfk-hop {             /* Melody hopping when spoken to */
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-26px) rotate(-6deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(-13px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes hfk-pop {             /* stickers arriving in the book */
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes hfk-wiggle {          /* a locked sticker saying not yet */
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-7deg); }
  75%      { transform: rotate(7deg); }
}
@keyframes hfk-rise {            /* sections easing into view */
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hfk-twinkle {         /* the surprise star */
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(180deg) scale(1.15); }
}

/* ---- Creature movement ------------------------------------------------ */
@keyframes hfk-flap {            /* wings opening and closing */
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.35); }
}
/* The paths stay inside the open meadow either side of the welcome panel. */
@keyframes hfk-flutter-1 {       /* a butterfly wandering the meadow */
  0%   { transform: translate(0, 0) rotate(-6deg); }
  20%  { transform: translate(58px, -52px) rotate(8deg); }
  40%  { transform: translate(112px, 18px) rotate(-4deg); }
  60%  { transform: translate(66px, 96px) rotate(7deg); }
  80%  { transform: translate(18px, 46px) rotate(-8deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}
@keyframes hfk-flutter-2 {       /* the second one takes another path */
  0%   { transform: translate(0, 0) rotate(5deg); }
  25%  { transform: translate(-72px, 54px) rotate(-8deg); }
  50%  { transform: translate(-30px, 128px) rotate(6deg); }
  75%  { transform: translate(34px, 62px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(5deg); }
}
/* On narrower screens the welcome panel stretches out to the gutters and the
   only open space left is the grass band beneath it. The butterflies swap to a
   shorter, flatter path there so they never drift behind the panel. */
@keyframes hfk-flutter-band {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  25%  { transform: translate(38px, -16px) rotate(8deg); }
  50%  { transform: translate(78px, 4px) rotate(-4deg); }
  75%  { transform: translate(40px, -20px) rotate(7deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}
@keyframes hfk-buzz {            /* a bee bumbling between flowers */
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(15px, -20px); }
  30%  { transform: translate(31px, -4px); }
  50%  { transform: translate(40px, -28px); }
  70%  { transform: translate(25px, -42px); }
  85%  { transform: translate(11px, -24px); }
  100% { transform: translate(0, 0); }
}
@keyframes hfk-jitter {          /* the bee's quick little wobble */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
@keyframes hfk-crawl {           /* a snail taking its time */
  0%   { transform: translateX(0) scaleX(1); }
  46%  { transform: translateX(150px) scaleX(1); }
  50%  { transform: translateX(150px) scaleX(-1); }
  96%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes hfk-startle {         /* any creature that has just been tapped */
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.25) translateY(-16px); }
  60%  { transform: scale(0.95) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

.critter--butterfly-1 { animation: hfk-flutter-1 26s ease-in-out infinite; }
.critter--butterfly-2 { animation: hfk-flutter-2 32s ease-in-out infinite; }
.critter--bee { animation: hfk-buzz 19s ease-in-out infinite; }
.critter--bee svg { animation: hfk-jitter 0.32s ease-in-out infinite; }
.critter--snail { animation: hfk-crawl 54s ease-in-out infinite; }
@media (max-width: 1420px) {
  .critter--butterfly-1 { animation-name: hfk-flutter-band; }
  .critter--butterfly-2 { animation-name: hfk-flutter-band; animation-direction: reverse; }
}
@keyframes hfk-crawl-short {     /* the same stroll, sized for a phone */
  0%   { transform: translateX(0) scaleX(1); }
  46%  { transform: translateX(46px) scaleX(1); }
  50%  { transform: translateX(46px) scaleX(-1); }
  96%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@media (max-width: 640px) {
  .critter--snail { animation-name: hfk-crawl-short; }
}

/* Wings flap independently of where the creature is flying. */
.critter .wing { transform-box: fill-box; transform-origin: center; }
.critter--butterfly .wing--left  { animation: hfk-flap 0.42s ease-in-out infinite; transform-origin: right center; }
.critter--butterfly .wing--right { animation: hfk-flap 0.42s ease-in-out infinite; transform-origin: left center; }
.critter--bee .wing--left  { animation: hfk-flap 0.12s linear infinite; transform-origin: right center; }
.critter--bee .wing--right { animation: hfk-flap 0.12s linear infinite; transform-origin: left center; }

/* A tap makes them jump, and hovering lifts them a little. */
.critter svg { transition: transform var(--ease); }
.critter:hover svg { transform: scale(1.15); }
.critter.is-startled svg { animation: hfk-startle 0.7s ease-out; }

.scene-mushroom { animation: hfk-bob 7s ease-in-out infinite; }

/* ---- The living meadow ------------------------------------------------ */
.scene-cloud--1 { animation: hfk-drift 46s ease-in-out infinite alternate; }
.scene-cloud--2 { animation: hfk-drift 62s ease-in-out infinite alternate-reverse; }
.scene-cloud--3 { animation: hfk-drift 78s ease-in-out infinite alternate; }
.scene-cloud--4 { animation: hfk-drift 54s ease-in-out infinite alternate-reverse; }

.scene-sun { animation: hfk-breathe 7s ease-in-out infinite; }
.scene-sun .sun-rays { transform-origin: 50px 50px; animation: hfk-spin-slow 90s linear infinite; }

.scene-rainbow { animation: hfk-shimmer 9s ease-in-out infinite; }

/* The trunk stays planted while the crown sways above it. */
.scene-tree .tree-crown { transform-origin: 150px 300px; animation: hfk-sway 8s ease-in-out infinite; }

.scene-flowers svg { animation: hfk-bob 5s ease-in-out infinite; }
.scene-flowers svg:nth-child(2) { animation-delay: 1.4s; animation-duration: 6s; }

.scene-bird { animation: hfk-fly 26s ease-in-out infinite; }

/* ---- Melody ----------------------------------------------------------- */
.buddy__figure { animation: hfk-idle 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
.buddy.is-hopping .buddy__figure { animation: hfk-hop 0.9s ease-in-out; }

/* She is clickable, so make that feel obvious and friendly. */
.buddy__trigger { display: block; background: none; border: 0; padding: 0; cursor: pointer; }
.buddy__trigger:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 6px; border-radius: 20px; }
.buddy__bubble { transition: transform var(--ease); }
.buddy__trigger:hover .buddy__bubble { transform: translateY(-3px); }

/* ---- Playful feedback on the things children press -------------------- */
.action-tile, .cat-tile, .song-card, .today-card, .surprise__btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.action-tile:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--shadow); }
.action-tile:active, .cat-tile:active, .song-card:active { transform: translateY(-1px) scale(0.985); }
.surprise__btn:hover { transform: scale(1.04); }
.surprise__btn:active { transform: scale(0.97); }
.surprise__btn:hover .surprise__btn-icon { animation: hfk-twinkle 0.9s ease-in-out; }
.surprise__btn.is-picking .surprise__btn-icon { animation: hfk-twinkle 0.6s ease-in-out 2; }

/* ---- Sticker book ----------------------------------------------------- */
.sticker--earned { animation: hfk-pop 0.5s ease-out both; }
.sticker--locked { cursor: pointer; transition: transform var(--ease); }
.sticker--locked.is-wiggling { animation: hfk-wiggle 0.45s ease-in-out; }
.sticker-progress__fill { transition: width 0.9s ease-out; }

/* =========================================================================
   SEASON CARDS — hover or focus to watch a whole day pass
   The sun rises across the sky and sets, the light warms and deepens, and
   each season's own weather drifts down.
   ========================================================================= */
@keyframes hfk-sun-arc {
  0%   { transform: translate(28px, 60px) scale(0.7); opacity: 0.5; }
  25%  { transform: translate(6px, 6px) scale(1); opacity: 1; }
  50%  { transform: translate(-52px, -12px) scale(1.1); opacity: 1; }
  75%  { transform: translate(-104px, 10px) scale(1); opacity: 1; }
  100% { transform: translate(-128px, 66px) scale(0.7); opacity: 0.45; }
}
@keyframes hfk-daylight {         /* dawn, midday, then dusk */
  0%   { opacity: 0.55; background: linear-gradient(180deg, rgba(255,170,110,0.55), rgba(255,214,150,0.15)); }
  25%  { opacity: 0; }
  70%  { opacity: 0; }
  100% { opacity: 0.6; background: linear-gradient(180deg, rgba(122,99,184,0.5), rgba(242,125,114,0.35)); }
}
@keyframes hfk-fall {             /* petals, leaves and snow coming down */
  0%   { transform: translate(0, -14px) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(var(--drift, 14px), 150px) rotate(var(--spin, 220deg)); opacity: 0; }
}

.season { cursor: pointer; transition: transform var(--ease), box-shadow var(--ease); }
.season:hover, .season:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); }
.season:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }

.season__sun { transition: transform var(--ease); }
.season:hover .season__sun,
.season:focus-visible .season__sun { animation: hfk-sun-arc 4s ease-in-out infinite; }
.season:hover .season__sky,
.season:focus-visible .season__sky { animation: hfk-daylight 4s ease-in-out infinite; }

.season:hover .season__particle,
.season:focus-visible .season__particle { animation: hfk-fall 3.4s linear infinite; }
.season__particle--1 { animation-delay: 0s !important; --drift: 16px; --spin: 200deg; }
.season__particle--2 { animation-delay: 0.5s !important; --drift: -12px; --spin: -260deg; }
.season__particle--3 { animation-delay: 1s !important; --drift: 20px; --spin: 300deg; }
.season__particle--4 { animation-delay: 1.6s !important; --drift: -18px; --spin: -180deg; }
.season__particle--5 { animation-delay: 2.1s !important; --drift: 10px; --spin: 240deg; }
.season__particle--6 { animation-delay: 2.7s !important; --drift: -8px; --spin: -300deg; }

/* Each season drops something of its own. */
.season--spring .season__particle { width: 9px; height: 9px; border-radius: 60% 10% 60% 10%; background: #FFB7C8; }
.season--summer .season__particle { width: 7px; height: 7px; border-radius: 50%; background: #FFF3CE; }
.season--autumn .season__particle { width: 11px; height: 9px; border-radius: 70% 20% 70% 20%; background: #E8944A; }
.season--winter .season__particle { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.95); }

/* The treetop leans as the day goes by. */
.season:hover .season__tree,
.season:focus-visible .season__tree { animation: hfk-sway 3s ease-in-out infinite; transform-origin: 35px 80px; }

/* ---- Sections easing in as you scroll --------------------------------- */
.hfk-reveal { opacity: 0; }
.hfk-reveal.is-visible { animation: hfk-rise 0.6s ease-out both; }

/* =========================================================================
   Anyone who prefers reduced motion gets the same page, holding still.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .scene-cloud--1, .scene-cloud--2, .scene-sun, .scene-sun .sun-rays,
  .scene-rainbow, .scene-tree .tree-crown, .scene-flowers svg, .scene-bird,
  .buddy__figure, .buddy.is-hopping .buddy__figure,
  .sticker--earned, .sticker--locked.is-wiggling,
  .surprise__btn.is-picking .surprise__btn-icon,
  .surprise__btn:hover .surprise__btn-icon {
    animation: none !important;
  }
  .action-tile:hover, .surprise__btn:hover { transform: none; }
  .hfk-reveal { opacity: 1; }
  .hfk-reveal.is-visible { animation: none; }
}