/* Home hero "10초 녹음하고, 가수 되자" — 3D layer (js/omu-home-hero3d.js) on top of the base hero in
   css/omu-creator-home.css. Without WebGL / with reduced motion the original photo stays visible. */
html.omu-am .am-studio-feature.am-hero3d{min-height:480px;padding:52px 48px!important;border-radius:20px!important;background:radial-gradient(120% 140% at 78% 40%,#2b1030 0%,#130a1b 42%,#08070c 100%);color:#fff;box-shadow:0 30px 60px -36px rgba(20,10,30,.7)}
html.omu-am .am-hero3d .am-studio-feature__image{transition:opacity .9s ease}
html.omu-am .am-hero3d.is-3d .am-studio-feature__image{opacity:0}
html.omu-am .am-hero3d__canvas{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
html.omu-am .am-hero3d.is-3d .am-hero3d__canvas{opacity:1}
/* Legibility veil over the scene, left to right (bottom to top on phones). */
html.omu-am .am-hero3d::before{z-index:0!important;background:linear-gradient(90deg,rgba(8,7,12,.86) 0%,rgba(8,7,12,.62) 34%,rgba(8,7,12,.12) 62%,rgba(8,7,12,0) 100%)!important}
html.omu-am .am-hero3d::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -120px 120px -80px rgba(0,0,0,.6)}
html.omu-am .am-hero3d .am-studio-feature__copy{z-index:2;width:min(100%,460px)}

html.omu-am .am-hero3d .am-studio-feature__eyebrow{gap:10px;margin-bottom:22px!important;color:#f3dfe4;font-size:13px;font-weight:650;letter-spacing:.04em}
html.omu-am .am-hero3d .am-studio-feature__eyebrow::before{display:none}
html.omu-am .am-hero3d__rec{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:11px;font-weight:800;letter-spacing:.14em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.omu-am .am-hero3d__rec i{width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 rgba(255,77,109,.6);animation:hero3d-rec 1.6s ease-out infinite}
html.omu-am body.omu-interface-v2 .am-hero3d .am-studio-feature__copy h1{color:#fff!important;font-size:clamp(38px,3.4vw,56px)!important;font-weight:850!important;line-height:1.16!important;letter-spacing:-.045em!important;text-shadow:0 10px 40px rgba(0,0,0,.35)}
html.omu-am .am-hero3d .am-studio-feature__copy h1>span:last-child{display:inline-block;margin-top:4px;background:linear-gradient(100deg,#fff 0%,#f6d7a7 22%,#ff9cb7 48%,#c4a6ff 72%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:hero3d-shine 6s ease-in-out infinite;filter:drop-shadow(0 6px 24px rgba(255,140,180,.25))}
html.omu-am .am-hero3d .am-studio-feature__copy>p:not(:first-child){margin-top:18px;color:rgba(255,255,255,.82);font-size:17px;line-height:1.7}
html.omu-am .am-hero3d__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
html.omu-am .am-hero3d .am-studio-feature__button{margin-top:0;min-height:54px;padding:0 22px;border:0;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#fbeee4 100%);color:#1a1020!important;font-size:16px;font-weight:800;box-shadow:0 16px 40px -14px rgba(255,170,190,.55),0 0 0 1px rgba(255,255,255,.5) inset}
html.omu-am .am-hero3d .am-studio-feature__button:hover{background:#fff;transform:translateY(-2px);box-shadow:0 22px 48px -14px rgba(255,170,190,.7)}
html.omu-am .am-hero3d__ghost{display:inline-flex;align-items:center;gap:8px;min-height:54px;padding:0 20px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(255,255,255,.06);color:#fff!important;font-size:15px;font-weight:700;text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .18s,border-color .18s}
html.omu-am .am-hero3d__ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
html.omu-am .am-hero3d__ghost svg{width:18px;height:18px}
html.omu-am .am-hero3d__steps{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding:0;list-style:none;color:rgba(255,255,255,.72);font-size:13px;font-weight:650}
html.omu-am .am-hero3d__steps li{display:inline-flex;align-items:center;gap:8px}
html.omu-am .am-hero3d__steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);color:#f6d7a7;font-size:11px;font-weight:800}
html.omu-am .am-hero3d__steps li+li::before{content:"";width:16px;height:1px;margin-right:2px;background:rgba(255,255,255,.3)}

/* Recording HUD over the orb */
html.omu-am .am-hero3d__hud{position:absolute;right:28px;bottom:26px;z-index:2;display:none;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(10,8,16,.45);color:#fff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.omu-am .am-hero3d.is-3d .am-hero3d__hud{display:inline-flex}
html.omu-am .am-hero3d__hud-dot{width:8px;height:8px;border-radius:50%;background:#ff4d6d;animation:hero3d-blink 1s steps(2,start) infinite}
html.omu-am .am-hero3d__hud-total{color:rgba(255,255,255,.55)}
html.omu-am .am-hero3d__hud.is-done .am-hero3d__hud-dot{background:#f6d7a7;animation:none}
html.omu-am .am-hero3d__hud.is-done .am-hero3d__hud-total{display:none}

@keyframes hero3d-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hero3d-rec{0%{box-shadow:0 0 0 0 rgba(255,77,109,.6)}100%{box-shadow:0 0 0 10px rgba(255,77,109,0)}}
@keyframes hero3d-blink{to{visibility:hidden}}

@media (max-width:1439.98px){html.omu-am .am-studio-feature.am-hero3d{padding:46px 40px!important}}
@media (max-width:1199.98px){html.omu-am .am-studio-feature.am-hero3d{min-height:460px}}
@media (max-width:739.98px){
  /* Phones: shorter hero, copy sits higher, lighter veil at the bottom. */
  html.omu-am .am-studio-feature.am-hero3d{min-height:540px;align-items:flex-end;padding:22px 20px 22px!important;border-radius:18px!important;background:radial-gradient(130% 80% at 50% 20%,#2b1030 0%,#160b1e 50%,#0d0a12 100%)}
  html.omu-am .am-hero3d::before{background:linear-gradient(0deg,rgba(10,8,14,.82) 0%,rgba(10,8,14,.55) 38%,rgba(10,8,14,.12) 58%,rgba(10,8,14,0) 68%)!important}
  html.omu-am .am-hero3d::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  html.omu-am .am-hero3d .am-studio-feature__eyebrow{margin-bottom:12px!important;font-size:12px}
  html.omu-am body.omu-interface-v2 .am-hero3d .am-studio-feature__copy h1{font-size:34px!important;line-height:1.18!important}
  html.omu-am .am-hero3d .am-studio-feature__copy>p:not(:first-child){margin-top:10px;font-size:15px;line-height:1.6}
  html.omu-am .am-hero3d__actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:18px}
  html.omu-am .am-hero3d .am-studio-feature__button,html.omu-am .am-hero3d__ghost{width:100%;justify-content:center}
  html.omu-am .am-hero3d .am-studio-feature__button{min-height:50px}
  html.omu-am .am-hero3d__ghost{min-height:46px;font-size:14px}
  html.omu-am .am-hero3d__steps{gap:6px 12px;margin-top:14px;font-size:12px}
  html.omu-am .am-hero3d__steps b{width:20px;height:20px}
  html.omu-am .am-hero3d__steps li+li::before{width:10px}
  html.omu-am .am-hero3d__hud{top:16px;right:16px;bottom:auto;padding:7px 12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html.omu-am .am-hero3d__rec i,html.omu-am .am-hero3d .am-studio-feature__copy h1>span:last-child,html.omu-am .am-hero3d__hud-dot{animation:none}
}

/* ===== Hero slider (js/omu-home-slider.js): slides stack in one grid cell and cross-fade ===== */
html.omu-am .am-hero-slider{position:relative;display:flex;flex-direction:column;min-width:0;container:hero-slider/inline-size}
html.omu-am .am-hero-slider__track{display:grid;grid-template-areas:"stack";flex:1 1 auto;min-width:0}
html.omu-am .am-hero-slide{grid-area:stack;display:flex;min-width:0;opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .28s ease,transform .5s ease,visibility 0s linear .5s;pointer-events:none}
html.omu-am .am-hero-slide.is-active{z-index:1;opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .16s,transform .8s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s;pointer-events:auto}
html.omu-am .am-hero-slide>.am-studio-feature{flex:1 1 auto;width:100%;margin:0}
/* The 3D slide's recording HUD moves to the top so the slider controls own the bottom-right corner. */
html.omu-am .am-hero-slider .am-hero3d__hud{top:24px;right:26px;bottom:auto}

/* Controls */
html.omu-am .am-hero-slider__nav{position:absolute;right:24px;bottom:22px;z-index:6;display:inline-flex;align-items:center;gap:2px;padding:5px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(16,12,22,.42);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .5s,border-color .5s,color .5s}
html.omu-am .am-hero-slider[data-active="1"] .am-hero-slider__nav{border-color:rgba(160,90,120,.18);background:rgba(255,255,255,.72);color:#5a2f4a}
html.omu-am .am-hero-slider__arrow,html.omu-am .am-hero-slider__pause{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background .15s}
html.omu-am .am-hero-slider__arrow:hover,html.omu-am .am-hero-slider__pause:hover{background:rgba(255,255,255,.16)}
html.omu-am .am-hero-slider[data-active="1"] :is(.am-hero-slider__arrow,.am-hero-slider__pause):hover{background:rgba(160,90,120,.12)}
html.omu-am .am-hero-slider__arrow svg{width:18px;height:18px}
html.omu-am .am-hero-slider__pause svg{width:14px;height:14px}
html.omu-am .am-hero-slider__pause .am-hero-slider__icon-play,html.omu-am .am-hero-slider__pause.is-paused .am-hero-slider__icon-pause{display:none}
html.omu-am .am-hero-slider__pause.is-paused .am-hero-slider__icon-play{display:block}
html.omu-am .am-hero-slider__dots{display:inline-flex;align-items:center;gap:2px;padding:0 2px}
html.omu-am .am-hero-slider__dot{display:grid;place-items:center;width:30px;height:34px;padding:0;border:0;background:transparent;cursor:pointer}
html.omu-am .am-hero-slider__dot span{position:relative;display:block;width:8px;height:8px;overflow:hidden;border-radius:999px;background:currentColor;opacity:.4;transition:width .35s ease,opacity .35s}
html.omu-am .am-hero-slider__dot.is-active span{width:26px;opacity:1;background:rgba(255,255,255,.35)}
html.omu-am .am-hero-slider[data-active="1"] .am-hero-slider__dot.is-active span{background:rgba(160,90,120,.25)}
html.omu-am .am-hero-slider__dot.is-active span::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;transform-origin:left}
html.omu-am .am-hero-slider.is-autoplaying .am-hero-slider__dot.is-active span::after{animation:hero-slide-progress var(--hero-interval,3s) linear forwards}
html.omu-am :is(.am-hero-slider__arrow,.am-hero-slider__pause,.am-hero-slider__dot):focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ===== Slide 2: "10초 녹음하고, 엄마는 쉬고 아이는 행복하게" — warm pastel lullaby ===== */
html.omu-am .am-studio-feature.am-hero-mom{min-height:480px;padding:52px 48px!important;border-radius:20px!important;background:linear-gradient(135deg,#fff4ec 0%,#ffe2ea 46%,#efe5ff 100%);color:#3b1d3a;box-shadow:0 30px 60px -36px rgba(170,90,120,.45)}
html.omu-am .am-hero-mom__canvas{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}
html.omu-am .am-hero-mom::before{z-index:0!important;background:linear-gradient(90deg,rgba(255,247,242,.94) 0%,rgba(255,247,242,.72) 36%,rgba(255,247,242,.1) 62%,rgba(255,247,242,0) 100%)!important}
html.omu-am .am-hero-mom::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
html.omu-am .am-hero-mom .am-studio-feature__copy{z-index:2;width:min(100%,480px)}
html.omu-am .am-hero-mom .am-studio-feature__eyebrow{gap:10px;margin-bottom:20px!important;color:#9a4a6e;font-size:13px;font-weight:700;letter-spacing:.02em}
html.omu-am .am-hero-mom .am-studio-feature__eyebrow::before{display:none}
html.omu-am .am-hero-mom__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border:1px solid rgba(224,86,127,.22);border-radius:999px;background:rgba(255,255,255,.75);color:#e0567f;font-size:11px;font-weight:800;letter-spacing:.14em}
html.omu-am .am-hero-mom__badge svg{width:12px;height:12px;animation:hero-mom-beat 1.6s ease-in-out infinite}
html.omu-am body.omu-interface-v2 .am-hero-mom .am-hero-mom__title{margin:0;color:#3b1d3a!important;font-size:clamp(34px,3vw,50px)!important;font-weight:850!important;line-height:1.2!important;letter-spacing:-.045em!important;word-break:keep-all}
html.omu-am .am-hero-mom__title>span{white-space:nowrap}
html.omu-am .am-hero-mom__title>span:last-child{background:linear-gradient(100deg,#e0567f 0%,#ff8f6b 45%,#a77bff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hero3d-shine 7s ease-in-out infinite}
html.omu-am .am-hero-mom .am-studio-feature__copy>p:not(:first-child){margin-top:16px;color:#6b4a5f;font-size:17px;line-height:1.7}
html.omu-am .am-hero-mom__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
html.omu-am .am-hero-mom__cta,html.omu-am .am-hero-mom__ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s}
html.omu-am .am-hero-mom__cta{background:linear-gradient(135deg,#ff8aa8 0%,#e0567f 100%);color:#fff!important;box-shadow:0 16px 32px -14px rgba(224,86,127,.75)}
html.omu-am .am-hero-mom__cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(224,86,127,.85)}
html.omu-am .am-hero-mom__ghost{border:1px solid rgba(160,90,120,.22);background:rgba(255,255,255,.72);color:#5a2f4a!important;font-size:15px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.omu-am .am-hero-mom__ghost:hover{background:#fff}
html.omu-am :is(.am-hero-mom__cta,.am-hero-mom__ghost) svg{width:18px;height:18px;flex:none}
html.omu-am :is(.am-hero-mom__cta,.am-hero-mom__ghost):focus-visible{outline:3px solid rgba(224,86,127,.45);outline-offset:3px}
html.omu-am .am-hero-mom__steps{display:flex;flex-wrap:wrap;gap:8px 16px;margin:24px 0 0;padding:0;list-style:none;color:#7a5368;font-size:13px;font-weight:700}
html.omu-am .am-hero-mom__steps li{display:inline-flex;align-items:center;gap:8px}
html.omu-am .am-hero-mom__steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#e0567f;font-size:11px;font-weight:800;box-shadow:0 2px 6px rgba(224,86,127,.18)}
html.omu-am .am-hero-mom__steps li+li::before{content:"";width:14px;height:1px;margin-right:2px;background:rgba(122,83,104,.35)}
html.omu-am .am-hero-mom__now{position:absolute;top:24px;right:26px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(255,255,255,.62);color:#6b3f5c;font-size:13px;font-weight:750;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 24px -14px rgba(170,90,120,.5)}
html.omu-am .am-hero-mom__eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
html.omu-am .am-hero-mom__eq i{display:block;width:3px;height:100%;border-radius:2px;background:#e0567f;transform-origin:bottom;animation:hero-mom-eq 1.1s ease-in-out infinite}
html.omu-am .am-hero-mom__eq i:nth-child(2){animation-delay:-.3s;background:#ff8f6b}
html.omu-am .am-hero-mom__eq i:nth-child(3){animation-delay:-.6s;background:#a77bff}
html.omu-am .am-hero-mom__eq i:nth-child(4){animation-delay:-.85s}

@keyframes hero-slide-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hero-mom-beat{0%,100%{transform:scale(1)}20%{transform:scale(1.25)}40%{transform:scale(1)}}
@keyframes hero-mom-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

@media (max-width:1439.98px){html.omu-am .am-studio-feature.am-hero-mom{padding:46px 40px!important}}
@media (max-width:1199.98px){html.omu-am .am-studio-feature.am-hero-mom{min-height:460px}}
@media (max-width:739.98px){
  html.omu-am .am-hero-slider .am-hero3d__hud{top:16px;left:16px;right:auto}
  /* Phones: the controls stay inside the card, top-right; status chips move to the top-left. */
  html.omu-am .am-hero-slider__nav{top:14px;right:14px;bottom:auto;padding:3px}
  html.omu-am .am-hero-slider__dot{width:24px;height:30px}
  html.omu-am .am-hero-slider__pause{width:30px;height:30px}
  html.omu-am .am-studio-feature.am-hero-mom{min-height:540px;align-items:flex-end;padding:22px 20px!important;border-radius:18px!important}
  html.omu-am .am-hero-mom::before{background:linear-gradient(0deg,rgba(255,247,242,.96) 0%,rgba(255,247,242,.82) 40%,rgba(255,247,242,.2) 60%,rgba(255,247,242,0) 70%)!important}
  html.omu-am .am-hero-mom .am-studio-feature__eyebrow{margin-bottom:12px!important;font-size:12px}
  html.omu-am body.omu-interface-v2 .am-hero-mom .am-hero-mom__title{font-size:30px!important;line-height:1.2!important}
  html.omu-am .am-hero-mom .am-studio-feature__copy>p:not(:first-child){margin-top:10px;font-size:15px;line-height:1.6}
  html.omu-am .am-hero-mom__actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:18px}
  html.omu-am .am-hero-mom__cta{min-height:50px;width:100%}
  html.omu-am .am-hero-mom__ghost{min-height:46px;width:100%;font-size:14px}
  html.omu-am .am-hero-mom__steps{gap:6px 12px;margin-top:14px;font-size:12px}
  html.omu-am .am-hero-mom__steps b{width:20px;height:20px}
  html.omu-am .am-hero-mom__steps li+li::before{width:10px}
  html.omu-am .am-hero-mom__now{top:16px;left:16px;right:auto;padding:7px 12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html.omu-am .am-hero-slide,html.omu-am .am-hero-slide.is-active{transition:none;transform:none}
  html.omu-am :is(.am-hero-mom__badge svg,.am-hero-mom__title>span:last-child,.am-hero-mom__eq i){animation:none}
  html.omu-am .am-hero-slider.is-autoplaying .am-hero-slider__dot.is-active span::after{animation:none}
}

/* Narrow cards: the step lists wrap instead of running under the in-card controls. */
@container hero-slider (max-width:760px){html.omu-am :is(.am-hero-mom__steps,.am-hero3d__steps,.am-hero-story__steps){max-width:380px;column-gap:14px}html.omu-am .am-hero-mom__steps li+li::before{display:none}}

/* ===== Slide 3: OMU STORY — 엄마와 아빠가 읽어주는 동화. A midnight-teal storybook drawn with CSS + SVG:
   paper-cut hills and a castle, a book turning its pages, gold sparks and notes rising, a story card
   whose hero's name keeps changing. Animations pause while the slide is not shown. ===== */
html.omu-am .am-studio-feature.am-hero-story{min-height:480px;padding:52px 48px!important;border-radius:20px!important;background:radial-gradient(90% 120% at 78% 30%,#1f6a72 0%,#134a5a 42%,#0c2c3d 100%);color:#fff7e8;box-shadow:0 30px 60px -36px rgba(8,40,52,.7)}
html.omu-am .am-hero-story::before{z-index:1!important;background:linear-gradient(90deg,rgba(9,34,46,.9) 0%,rgba(9,34,46,.66) 36%,rgba(9,34,46,.08) 62%,rgba(9,34,46,0) 100%)!important}
html.omu-am .am-hero-story::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html.omu-am .am-hero-story .am-studio-feature__copy{z-index:2;width:min(100%,480px)}
html.omu-am .am-hero-slide:not(.is-active) .am-hero-story *,html.omu-am .am-hero-slide:not(.is-active) .am-hero-story *::before,html.omu-am .am-hero-slide:not(.is-active) .am-hero-story *::after{animation-play-state:paused!important}

/* Art layer */
html.omu-am .am-hero-story__art{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
html.omu-am .am-hero-story__stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff3cf;box-shadow:0 0 6px 1px rgba(255,236,180,.7);animation:story-twinkle 2.6s ease-in-out infinite}
html.omu-am .am-hero-story__shoot{position:absolute;top:12%;left:58%;width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,240,200,0),#fff3cf);transform:rotate(-24deg);opacity:0;animation:story-shoot 5s ease-in 1s infinite}
html.omu-am .am-hero-story__hills{position:absolute;left:0;right:0;bottom:0;width:104%;height:46%;margin-left:-2%;animation:story-drift 12s ease-in-out infinite alternate}
html.omu-am .am-hero-story__hills .hill-back{fill:#185a66}
html.omu-am .am-hero-story__hills .castle path{fill:#103f4c}
html.omu-am .am-hero-story__hills .castle .win{fill:#ffd88a;animation:story-window 3s ease-in-out infinite}
html.omu-am .am-hero-story__hills .hill-mid{fill:#11485a}
html.omu-am .am-hero-story__hills .hill-front{fill:#0b3242}

/* The book */
html.omu-am .am-hero-story__book{position:absolute;right:9%;top:50%;width:min(300px,34%);aspect-ratio:2/1.3;transform:translateY(-58%) rotateX(14deg);transform-style:preserve-3d;perspective:900px;animation:story-float 5s ease-in-out infinite}
html.omu-am .am-hero-story__glow{position:absolute;inset:-40% -25%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,138,.55),rgba(255,216,138,0));filter:blur(6px);animation:story-glow 3s ease-in-out infinite}
html.omu-am .am-hero-story__page{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#fff8e6,#f7e7c4);box-shadow:inset 0 0 0 1px rgba(160,120,60,.15)}
html.omu-am .am-hero-story__page::after,html.omu-am .am-hero-story__flip::after{content:"";position:absolute;left:14%;right:14%;top:22%;height:46%;background:repeating-linear-gradient(180deg,rgba(130,96,50,.22) 0 2px,transparent 2px 11px)}
html.omu-am .am-hero-story__page--left{left:0;border-radius:10px 2px 2px 10px;transform:skewY(2deg);transform-origin:right}
html.omu-am .am-hero-story__page--right{right:0;border-radius:2px 10px 10px 2px;transform:skewY(-2deg);transform-origin:left}
html.omu-am .am-hero-story__flip{position:absolute;top:0;bottom:0;left:50%;width:50%;border-radius:2px 10px 10px 2px;background:linear-gradient(90deg,#f3dfb6,#fff8e6 30%);transform-origin:left center;backface-visibility:visible;animation:story-flip 3.6s cubic-bezier(.45,.05,.35,1) infinite}
html.omu-am .am-hero-story__flip:nth-of-type(4){animation-delay:-1.2s}
html.omu-am .am-hero-story__flip:nth-of-type(5){animation-delay:-2.4s}
html.omu-am .am-hero-story__sparks{position:absolute;left:10%;right:10%;bottom:60%;height:150px}
html.omu-am .am-hero-story__sparks span{position:absolute;bottom:0;color:#ffd88a;font-size:16px;line-height:1;text-shadow:0 0 10px rgba(255,216,138,.9);opacity:0;animation:story-spark 3.2s ease-out infinite}
html.omu-am .am-hero-story__sparks span:nth-child(even){color:#ffb3a1;font-size:18px}
html.omu-am .am-hero-story__card{position:absolute;right:7%;bottom:12%;z-index:2;max-width:min(320px,40%);margin:0;padding:10px 14px;border:1px solid rgba(255,236,190,.35);border-radius:14px;background:rgba(8,36,48,.55);color:#fff3d6;font-size:14px;font-weight:600;line-height:1.55;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.omu-am .am-hero-story__names{position:relative;display:inline-block;height:1.55em;overflow:hidden;vertical-align:bottom;color:#ffd88a}
html.omu-am .am-hero-story__names span{display:block;animation:story-names 3s steps(1,end) infinite}

/* Copy */
html.omu-am .am-hero-story .am-studio-feature__eyebrow{gap:10px;margin-bottom:20px!important;color:#d9efe9;font-size:13px;font-weight:700;letter-spacing:.02em}
html.omu-am .am-hero-story .am-studio-feature__eyebrow::before{display:none}
html.omu-am .am-hero-story__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border:1px solid rgba(255,216,138,.4);border-radius:999px;background:rgba(255,216,138,.12);color:#ffd88a;font-size:11px;font-weight:800;letter-spacing:.12em}
html.omu-am .am-hero-story__badge svg{width:14px;height:14px}
html.omu-am body.omu-interface-v2 .am-hero-story .am-hero-story__title{margin:0;color:#fff7e8!important;font-size:clamp(32px,2.8vw,46px)!important;font-weight:850!important;line-height:1.22!important;letter-spacing:-.045em!important;word-break:keep-all}
html.omu-am .am-hero-story__title>span{white-space:nowrap}
html.omu-am .am-hero-story__title>span:last-child{background:linear-gradient(100deg,#ffe2a3 0%,#ffb88a 45%,#9fe3d6 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hero3d-shine 7s ease-in-out infinite}
html.omu-am .am-hero-story .am-studio-feature__copy>p:not(:first-child){max-width:30em;margin-top:16px;color:rgba(255,247,232,.84);font-size:17px;line-height:1.7}
html.omu-am .am-hero-story__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
html.omu-am .am-hero-story__cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 22px;border-radius:14px;background:linear-gradient(135deg,#ffe3a3 0%,#ffbe6b 100%);color:#2a1d0a!important;font-size:16px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 16px 34px -14px rgba(255,190,107,.7);transition:transform .18s,box-shadow .18s}
html.omu-am .am-hero-story__cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(255,190,107,.85)}
html.omu-am .am-hero-story__cta svg{width:18px;height:18px;flex:none}
html.omu-am .am-hero-story__cta:focus-visible{outline:3px solid rgba(255,216,138,.6);outline-offset:3px}
html.omu-am .am-hero-story__steps{display:flex;flex-wrap:wrap;gap:8px 16px;margin:24px 0 0;padding:0;list-style:none;color:rgba(255,247,232,.76);font-size:13px;font-weight:700}
html.omu-am .am-hero-story__steps li{display:inline-flex;align-items:center;gap:8px}
html.omu-am .am-hero-story__steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,216,138,.16);color:#ffd88a;font-size:11px;font-weight:800}
html.omu-am .am-hero-story__steps li+li::before{content:"";width:14px;height:1px;margin-right:2px;background:rgba(255,247,232,.3)}
html.omu-am .am-hero-story__now{position:absolute;top:24px;right:26px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid rgba(255,236,190,.28);border-radius:999px;background:rgba(8,36,48,.5);color:#fff3d6;font-size:13px;font-weight:750;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.omu-am .am-hero-story__now .am-hero-mom__eq i{background:#ffd88a}
html.omu-am .am-hero-story__now .am-hero-mom__eq i:nth-child(2){background:#ffb88a}
html.omu-am .am-hero-story__now .am-hero-mom__eq i:nth-child(3){background:#9fe3d6}
@container hero-slider (max-width:760px){html.omu-am .am-hero-story__steps li+li::before{display:none}html.omu-am .am-hero-story__card{display:none}html.omu-am .am-hero-story__book{right:3%;top:58%;width:30%}html.omu-am .am-hero-story .am-studio-feature__copy>p:not(:first-child){max-width:20em;font-size:16px}}

@keyframes story-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes story-shoot{0%{opacity:0;transform:translate(0,0) rotate(-24deg)}8%{opacity:1}30%{opacity:0;transform:translate(-180px,80px) rotate(-24deg)}100%{opacity:0;transform:translate(-180px,80px) rotate(-24deg)}}
@keyframes story-drift{from{transform:translateX(-1%)}to{transform:translateX(1%)}}
@keyframes story-window{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes story-float{0%,100%{transform:translateY(-58%) rotateX(14deg)}50%{transform:translateY(-62%) rotateX(12deg)}}
@keyframes story-glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes story-flip{0%{transform:rotateY(0)}45%,100%{transform:rotateY(-180deg)}}
@keyframes story-spark{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(10px,-140px) scale(1.1)}}
@keyframes story-names{0%{transform:translateY(0)}33.33%{transform:translateY(-1.55em)}66.66%{transform:translateY(-3.1em)}100%{transform:translateY(0)}}

@media (max-width:1439.98px){html.omu-am .am-studio-feature.am-hero-story{padding:46px 40px!important}}
@media (max-width:1199.98px){html.omu-am .am-studio-feature.am-hero-story{min-height:460px}}
@media (max-width:739.98px){
  html.omu-am .am-studio-feature.am-hero-story{min-height:540px;align-items:flex-end;padding:22px 20px!important;border-radius:18px!important;background:radial-gradient(130% 80% at 50% 18%,#1f6a72 0%,#134a5a 48%,#0c2c3d 100%)}
  html.omu-am .am-hero-story::before{background:linear-gradient(0deg,rgba(9,34,46,.94) 0%,rgba(9,34,46,.78) 42%,rgba(9,34,46,.12) 62%,rgba(9,34,46,0) 72%)!important}
  html.omu-am .am-hero-story__book{right:auto;left:50%;top:26%;width:min(230px,62%);transform:translate(-50%,-50%) rotateX(14deg);animation:none}
  html.omu-am .am-hero-story__hills{height:30%;bottom:auto;top:24%}
  html.omu-am .am-hero-story__card{display:none}
  html.omu-am .am-hero-story .am-studio-feature__eyebrow{margin-bottom:12px!important;font-size:12px}
  html.omu-am body.omu-interface-v2 .am-hero-story .am-hero-story__title{font-size:28px!important;line-height:1.24!important}
  html.omu-am .am-hero-story .am-studio-feature__copy>p:not(:first-child){margin-top:10px;font-size:15px;line-height:1.6}
  html.omu-am .am-hero-story__actions{margin-top:18px}
  html.omu-am .am-hero-story__cta{width:100%;min-height:50px;font-size:15px}
  html.omu-am .am-hero-story__steps{gap:6px 12px;margin-top:14px;font-size:12px}
  html.omu-am .am-hero-story__steps b{width:20px;height:20px}
  html.omu-am .am-hero-story__steps li+li::before{display:none}
  html.omu-am .am-hero-story__now{top:16px;left:16px;right:auto;padding:7px 12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html.omu-am .am-hero-story *,html.omu-am .am-hero-story *::before,html.omu-am .am-hero-story *::after{animation:none!important}
}

/* ===== Slide 1 background: a night concert stage in wine-plum and rose, matching the lullaby (rose)
   and storybook (gold) slides. Spotlight beams sweep, bokeh drifts, a paper-cut crowd waves light sticks;
   the 3D voice orb (js/omu-home-hero3d.js) is the singer in the middle of it. ===== */
html.omu-am .am-studio-feature.am-hero3d{background:radial-gradient(85% 110% at 74% 36%,#8c2a58 0%,#5a1742 34%,#2b0d2c 68%,#1a0919 100%);box-shadow:0 30px 60px -36px rgba(70,16,50,.7)}
html.omu-am .am-hero3d::before{background:linear-gradient(90deg,rgba(26,8,26,.9) 0%,rgba(26,8,26,.64) 34%,rgba(26,8,26,.1) 62%,rgba(26,8,26,0) 100%)!important}
html.omu-am .am-hero3d__stage{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
html.omu-am .am-hero3d__beam{position:absolute;top:-18%;width:34%;height:132%;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(16px);opacity:.62;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 68%,transparent 100%);animation:hero3d-beam 9s ease-in-out infinite alternate}
html.omu-am .am-hero3d__beam--1{left:44%;background:linear-gradient(180deg,rgba(255,214,170,.55),rgba(255,214,170,0) 85%);animation-delay:-2s}
html.omu-am .am-hero3d__beam--2{left:60%;background:linear-gradient(180deg,rgba(255,156,183,.5),rgba(255,156,183,0) 85%);animation-duration:11s;animation-direction:alternate-reverse}
html.omu-am .am-hero3d__beam--3{left:74%;background:linear-gradient(180deg,rgba(196,166,255,.45),rgba(196,166,255,0) 85%);animation-duration:13s;animation-delay:-5s}
html.omu-am .am-hero3d__floor{position:absolute;left:32%;right:-12%;bottom:-14%;height:44%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,195,.42),rgba(255,170,195,0));filter:blur(6px)}
html.omu-am .am-hero3d__bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,226,190,.6),rgba(255,226,190,0) 70%);animation:hero3d-bokeh 7s ease-in-out infinite}
html.omu-am .am-hero3d__crowd{position:absolute;left:0;right:0;bottom:0;width:100%;height:24%}
html.omu-am .am-hero3d__crowd .crowd-back{fill:#3d1338}
html.omu-am .am-hero3d__crowd .crowd-front{fill:#1f0a20}
html.omu-am .am-hero3d__crowd .crowd-sticks line{stroke:#2d0e2c;stroke-width:4;stroke-linecap:round}
html.omu-am .am-hero3d__crowd .crowd-sticks circle{filter:drop-shadow(0 0 6px currentColor)}
html.omu-am .am-hero3d__crowd .stick{transform-box:fill-box;transform-origin:20% 100%;animation:hero3d-stick 2.4s ease-in-out infinite}
html.omu-am .am-hero-slide:not(.is-active) .am-hero3d__stage *{animation-play-state:paused!important}

@keyframes hero3d-beam{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes hero3d-bokeh{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-14px);opacity:.9}}
@keyframes hero3d-stick{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}

@media (max-width:739.98px){
  html.omu-am .am-studio-feature.am-hero3d{background:radial-gradient(130% 75% at 50% 20%,#8c2a58 0%,#5a1742 38%,#2b0d2c 70%,#1a0919 100%)}
  html.omu-am .am-hero3d::before{background:linear-gradient(0deg,rgba(26,8,26,.93) 0%,rgba(26,8,26,.74) 42%,rgba(26,8,26,.12) 62%,rgba(26,8,26,0) 72%)!important}
  html.omu-am .am-hero3d__beam{width:50%}
  html.omu-am .am-hero3d__beam--1{left:6%}
  html.omu-am .am-hero3d__beam--2{left:26%}
  html.omu-am .am-hero3d__beam--3{left:46%}
  html.omu-am .am-hero3d__floor{left:-10%;right:-10%;top:18%;bottom:auto;height:34%}
  html.omu-am .am-hero3d__crowd{height:20%}
}
@media (prefers-reduced-motion:reduce){
  html.omu-am .am-hero3d__stage *{animation:none!important}
}
