/*
 * Kidzo hero — mount container. The composition is authored on a fixed
 * 1600×900 canvas and scaled to the container width by the runtime, so the
 * mount just needs the matching aspect ratio and clipped overflow.
 */
.kidzo-hero-mount {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 900;
  overflow: hidden;
  background: #F4FAFA;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
  .kidzo-hero-mount {
    height: 0;
    padding-top: 56.25%; /* 900 / 1600 */
  }
}

.kidzo-hero-mount .kidzo-stage,
.kidzo-hero-mount .kidzo-stage-canvas {
  will-change: transform;
}

/* The design chrome (playback bar, tweaks panel) never renders on the site,
   but guard against any stray editor-only nodes just in case. */
.kidzo-hero-mount [data-omelette-chrome],
.kidzo-hero-mount .twk-panel {
  display: none !important;
}

/* ── Mobile hero (static; replaces the un-shrinkable animation) ──────── */
.kidzo-hero-mobile { display: none; }

@media (max-width: 767px) {
  .kidzo-hero-mount { display: none !important; }
  .kidzo-hero-mobile { display: block; }
}

.kidzo-hero-mobile {
  --kzh-accent: #F59E0B;
  position: relative;
  padding: 30px 20px 40px;
  background:
    radial-gradient(520px 380px at 78% 0%, #E0F7F5 0%, rgba(224,247,245,0) 70%),
    #F4FAFA;
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
  overflow: hidden;
}
.kidzo-hero-mobile[dir="ltr"] { font-family: 'Archivo', 'Segoe UI', sans-serif; }
.khm-eyebrow { position: relative; z-index: 3; display: inline-block; background: #E0F7F5; color: #1FA89D; font-size: 12.5px; font-weight: 700; border-radius: 4px; padding: 6px 12px; }
.khm-title { position: relative; z-index: 3; margin: 16px 0 0; font-size: clamp(30px, 9vw, 40px); line-height: 1.15; font-weight: 700; color: #1E293B; letter-spacing: -0.02em; }
.khm-title span { color: #2CBCB0; }
.khm-sub { position: relative; z-index: 3; margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #64748B; font-weight: 500; }
.khm-cta { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: var(--kzh-accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; padding: 14px 24px; border-radius: 8px; box-shadow: 0 16px 30px -16px var(--kzh-accent); }
.khm-cta:hover { color: #fff; }

/* Simplified dashboard card */
.khm-card { position: relative; z-index: 1; margin-top: 30px; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 16px; box-shadow: 0 30px 60px -34px rgba(30,41,59,.4); }
.khm-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid #E2E8F0; margin-bottom: 14px; }
.khm-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #2CBCB0; color: #fff; font-weight: 800; font-size: 14px; }
.khm-card-title { font-size: 14px; font-weight: 700; color: #1E293B; }
.khm-dot { margin-inline-start: auto; width: 10px; height: 10px; border-radius: 50%; background: #E0F7F5; border: 1px solid #2CBCB0; }
.khm-stats { display: flex; gap: 10px; }
.khm-stat { flex: 1; background: #F4FAFA; border-radius: 10px; padding: 10px 12px; }
.khm-stat-k { display: block; font-size: 11.5px; color: #64748B; font-weight: 600; }
.khm-stat-v { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; color: #1E293B; }
.khm-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin-top: 14px; }
.khm-bars i { flex: 1; height: var(--bh, 60%); background: #E0F7F5; border: 1px solid #C6EEEA; border-radius: 4px; transform-origin: bottom; }
.khm-bars i.on { background: var(--kzh-accent); border-color: var(--kzh-accent); }

/* Real nursery photo (human warmth) with a brand tint */
.khm-photo { position: relative; margin: 18px 0 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 46px -30px rgba(30,41,59,.5); }
.khm-photo img { width: 100%; height: 190px; object-fit: cover; display: block; }
.khm-photo-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(44,188,176,.28), rgba(245,158,11,.10)); mix-blend-mode: multiply; pointer-events: none; }
.khm-photo figcaption { position: absolute; inset-inline: 14px; bottom: 12px; color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.55); }

/* Chaos chips (notes that clear as the dashboard builds) */
.khm-chaos { position: absolute; inset: 0 0 auto 0; height: 62%; z-index: 2; pointer-events: none; }
.khm-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.95); border: 1px solid #E2E8F0; border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 600; color: #64748B; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(30,41,59,.3); opacity: 0; }
.khm-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--kzh-accent); flex: none; }
.khm-chip-0 { top: 4%; inset-inline-end: 6%; --cx: 24px; --cy: -18px; --cr: 6deg; }
.khm-chip-1 { top: 16%; inset-inline-start: 4%; --cx: -26px; --cy: -14px; --cr: -7deg; }
.khm-chip-2 { top: 30%; inset-inline-end: 10%; --cx: 22px; --cy: 16px; --cr: 5deg; }
.khm-chip-3 { top: 40%; inset-inline-start: 12%; --cx: -18px; --cy: 20px; --cr: -5deg; }

/* ── Entrance animations (added on .khm-play; content is visible without JS) ── */
@keyframes khm-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes khm-pop  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes khm-bar  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes khm-chip-in {
  0%   { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(.9); }
  22%  { opacity: 1; }
  68%  { opacity: 1; transform: translate(calc(var(--cx) * .25), calc(var(--cy) * .25)) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(0, 34px) scale(.6); }
}
@keyframes khm-pulse {
  0%, 100% { box-shadow: 0 16px 30px -16px var(--kzh-accent); }
  50%      { box-shadow: 0 16px 34px -12px var(--kzh-accent), 0 0 0 7px rgba(245,158,11,.14); }
}

.kidzo-hero-mobile.khm-play .khm-eyebrow { animation: khm-up .6s .45s both; }
.kidzo-hero-mobile.khm-play .khm-title   { animation: khm-up .7s .6s both; }
.kidzo-hero-mobile.khm-play .khm-sub     { animation: khm-up .6s .8s both; }
.kidzo-hero-mobile.khm-play .khm-cta     { animation: khm-up .6s 1s both, khm-pulse 2.6s 1.9s ease-in-out infinite; }
.kidzo-hero-mobile.khm-play .khm-card    { animation: khm-up .7s .7s both; }
.kidzo-hero-mobile.khm-play .khm-photo   { animation: khm-up .7s 1s both; }
.kidzo-hero-mobile.khm-play .khm-stat    { animation: khm-pop .5s both; }
.kidzo-hero-mobile.khm-play .khm-stat-1  { animation-delay: 1.05s; }
.kidzo-hero-mobile.khm-play .khm-stat-2  { animation-delay: 1.18s; }
.kidzo-hero-mobile.khm-play .khm-stat-0  { animation-delay: .92s; }
.kidzo-hero-mobile.khm-play .khm-bars i  { animation: khm-bar .5s both; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(1) { animation-delay: 1.15s; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(2) { animation-delay: 1.21s; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(3) { animation-delay: 1.27s; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(4) { animation-delay: 1.33s; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(5) { animation-delay: 1.39s; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(6) { animation-delay: 1.45s; }
.kidzo-hero-mobile.khm-play .khm-bars i:nth-child(7) { animation-delay: 1.51s; }
.kidzo-hero-mobile.khm-play .khm-chip    { animation: khm-chip-in 2.4s ease-out both; }
.kidzo-hero-mobile.khm-play .khm-chip-1  { animation-delay: .16s; }
.kidzo-hero-mobile.khm-play .khm-chip-2  { animation-delay: .32s; }
.kidzo-hero-mobile.khm-play .khm-chip-3  { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .kidzo-hero-mobile * { animation: none !important; }
  .khm-chaos { display: none; }
}