/* Claps Learn — homepage hero motion (layered illustration, writing headline,
   floating proof chips). Pairs with hero-motion.js, which builds .hm-stage on
   top of the React hero image. Idle loops use the individual `translate` /
   `rotate` properties so they never fight the `transform` entrances. */

.parent-hero {
  --hm-green: var(--parent-green, #145b50);
  --hm-ink: var(--parent-ink, #1d2b26);
  --hm-peach: #e7a179;
  --hm-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --hm-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
}

/* ---- B. Headline writes itself ------------------------------------------ */
.parent-hero h1 .hm-w {
  display: inline-block;
  animation: hm-word 0.85s var(--hm-ease) both;
  animation-delay: calc(0.12s + var(--i) * 0.075s);
}
/* parent-home.css colours every h1 span green; plain line-1 words keep ink */
.parent-hero h1 > span.hm-w { color: inherit !important; white-space: normal; }
.parent-hero h1 span.hm-hl {
  position: relative;
  display: inline-block;
}
.parent-hero h1 span.hm-hl::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.16em;
  height: 0.3em;
  background: var(--hm-peach);
  opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 70 6, 150 4, 297 8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M28 17 C 110 11, 200 10, 262 13' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 70 6, 150 4, 297 8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M28 17 C 110 11, 200 10, 262 13' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: hm-draw 0.9s cubic-bezier(0.6, 0.05, 0.3, 1) 1.05s forwards;
  pointer-events: none;
}
.parent-hero .hm-rise {
  animation: hm-rise 0.8s var(--hm-ease) both;
  animation-delay: var(--d, 0.5s);
}

/* ---- A. Layered illustration ------------------------------------------- */
.parent-hero img.hm-base {
  animation: hm-base-in 1.15s var(--hm-ease) 0.1s both;
  will-change: clip-path, transform;
}

.parent-hero .hm-stage {
  display: block !important;
  position: absolute;
  pointer-events: none;
  /* no transform/opacity/z-index here: children must share the img's
     stacking context so some layers sit behind it and some in front */
}
.hm-stage > * { position: absolute; }

.parent-hero .hm-stage img.hm-layer {
  display: block; max-width: none; max-height: none !important;
  height: auto !important; aspect-ratio: auto; user-select: none;
}
/* parent-home.css sizes every hero <img> to 100%; pin each layer's width */
.parent-hero .hm-stage img.hm-leaf { width: 12.431% !important; }
.parent-hero .hm-stage img.hm-book { width: 17.986% !important; }
.parent-hero .hm-stage img.hm-hand { width: 3.681% !important; }

.hm-leaf {
  left: 80.833%; top: 30.278%;
  z-index: 5;
  transform-origin: 12% 92%;
  animation:
    hm-leaf-in 1s var(--hm-spring) 0.85s both,
    hm-sway 5.5s ease-in-out 1.9s infinite alternate;
}
.hm-book {
  left: 69.514%; top: 13.889%;
  z-index: 12;
  filter: drop-shadow(0 10px 10px rgba(30, 60, 50, 0.12));
  animation:
    hm-book-in 1s var(--hm-spring) 0.7s both,
    hm-float 6s ease-in-out 1.7s infinite alternate;
}
.hm-hand {
  left: 79.931%; top: 51.944%;
  z-index: 12;
  transform-origin: 48% 94%;
  animation: hm-wave 4.6s ease-in-out 1.5s infinite;
}

/* laptop: glow behind, screen switching on, a soft sheen, LIVE badge */
.hm-glow {
  left: 72%; top: 36%; width: 32%; height: 40%;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 148, 120, 0.28), rgba(20, 148, 120, 0));
  animation: hm-fade 0.8s ease 1.1s both, hm-pulse 4s ease-in-out 1.9s infinite alternate;
}
.hm-screen {
  left: 79.167%; top: 43.889%; width: 17.778%; height: 21.111%;
  z-index: 11;
  overflow: hidden;
  clip-path: polygon(11% 1%, 99.5% 1%, 80% 99%, 0% 95%);
}
.hm-screen::before { /* screen "off" → on */
  content: "";
  position: absolute; inset: 0;
  background: #24302d;
  animation: hm-screen-on 0.7s ease-out 1s both;
}
.hm-screen::after { /* recurring sheen */
  content: "";
  position: absolute; top: -20%; bottom: -20%; width: 35%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  animation: hm-sheen 7s ease-in-out 2.4s infinite;
}
.hm-live {
  left: 82.2%; top: 45.6%;
  z-index: 13;
  display: flex; align-items: center; gap: 0.3em;
  padding: 0.28em 0.5em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #b4362f;
  font: 700 clamp(7px, 0.7vw, 10px)/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  animation: hm-pop 0.5s var(--hm-spring) 1.45s both;
}
.hm-live i {
  width: 0.62em; height: 0.62em; border-radius: 50%;
  background: #e0453b;
  animation: hm-blink 1.4s ease-in-out infinite;
}

/* sparkles around the notebook */
.hm-spark {
  z-index: 12;
  width: 2.2%;
  color: #e3a64a;
  animation: hm-twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--d);
}
.hm-spark svg { display: block; width: 100%; height: auto; }

/* ---- C. Floating proof chips ------------------------------------------- */
.hm-chip {
  z-index: 14;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.6em 0.95em 0.6em 0.6em;
  border: 1px solid rgba(20, 91, 80, 0.12);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(28, 60, 50, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  color: var(--hm-ink);
  font-size: 13px; font-weight: 600; line-height: 1.1;
  white-space: nowrap;
  animation:
    hm-pop 0.65s var(--hm-spring) var(--d) both,
    hm-bob 5s ease-in-out calc(var(--d) + 0.65s) infinite alternate;
}
.hm-chip .hm-ico {
  display: grid; place-items: center;
  width: 1.9em; height: 1.9em; flex: none;
  border-radius: 50%;
  background: #e5efe7; color: var(--hm-green);
}
.hm-chip .hm-ico svg { width: 55%; height: 55%; }
.hm-chip--hw .hm-ico { background: var(--hm-green); color: #fff; }
.hm-chip--tutor .hm-ico { background: #fbe4d6; color: #c9663e; }

.hm-chip--tutor { left: -2%; top: 7%; --d: 1.55s; }
.hm-chip--hw    { left: 3%;  top: 70%; --d: 1.8s; }
.hm-bubble {
  right: 1%; top: 78%; --d: 2.05s;
  border-radius: 4px 16px 16px 16px; /* tail points up to the laptop */
  padding: 0.65em 0.9em;
}
.hm-bubble b { color: var(--hm-green); }

/* pause idle loops while the hero is off-screen */
.hm-paused .hm-stage *,
.hm-paused .hm-stage *::before,
.hm-paused .hm-stage *::after { animation-play-state: paused !important; }

/* ---- Tablet / mobile ---------------------------------------------------- */
@media (max-width: 1023px) {
  .hm-chip { font-size: 12px; }
}
@media (max-width: 767px) {
  .hm-live { display: none; }
  .hm-spark { width: 3%; }
  /* one chip at a time, in a single slot under the desk */
  .hm-chip,
  .hm-chip--tutor,
  .hm-chip--hw,
  .hm-bubble {
    left: 50%; right: auto; top: auto; bottom: -2%;
    font-size: 12px;
    border-radius: 999px;
    animation: none;
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.96);
    transition: opacity 0.45s ease, transform 0.55s var(--hm-spring);
  }
  .hm-chip.is-on {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes hm-word {
  from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hm-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes hm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hm-base-in {
  from { clip-path: circle(0% at 50% 82%); transform: translateY(22px) scale(0.97); }
  to   { clip-path: circle(100% at 50% 82%); transform: none; }
}
@keyframes hm-book-in {
  from { opacity: 0; transform: translateY(-40%) rotate(-16deg) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes hm-float {
  from { translate: 0 0;      rotate: -1.5deg; }
  to   { translate: 0 -7%;    rotate: 2.5deg; }
}
@keyframes hm-leaf-in {
  from { opacity: 0; transform: rotate(-38deg) scale(0.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes hm-sway {
  from { rotate: -3deg; }
  to   { rotate: 3.5deg; }
}
@keyframes hm-wave {
  0%, 46%, 100% { rotate: 0deg; }
  6%  { rotate: -11deg; }
  14% { rotate: 9deg; }
  22% { rotate: -9deg; }
  30% { rotate: 7deg; }
  38% { rotate: -3deg; }
}
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-pulse { from { scale: 0.92; } to { scale: 1.08; } }
@keyframes hm-screen-on {
  0%   { opacity: 0.85; }
  35%  { opacity: 0.1; background: #fff; }
  100% { opacity: 0; background: #fff; }
}
@keyframes hm-sheen {
  0%, 70% { left: -50%; }
  100%    { left: 130%; }
}
@keyframes hm-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes hm-bob {
  from { translate: 0 0; }
  to   { translate: 0 -6px; }
}
@keyframes hm-blink { 50% { opacity: 0.25; } }
@keyframes hm-twinkle {
  0%, 100% { opacity: 0; scale: 0.3; rotate: 0deg; }
  40%      { opacity: 1; scale: 1;   rotate: 45deg; }
  70%      { opacity: 0; scale: 0.5; rotate: 90deg; }
}

/* ---- Reduced motion: show the finished scene, no movement ---------------- */
@media (prefers-reduced-motion: reduce) {
  .parent-hero h1 .hm-w,
  .parent-hero .hm-rise,
  .parent-hero img.hm-base,
  .hm-stage *,
  .hm-stage *::before,
  .hm-stage *::after { animation: none !important; transition: none !important; }
  .parent-hero h1 span.hm-hl::after { animation: none; clip-path: none; }
  .hm-screen::before, .hm-screen::after, .hm-spark { display: none; }
}