.hero-with-motion{overflow:hidden;transition:padding-top 1s cubic-bezier(.22,1,.36,1)}
.hero-with-motion[data-intro-state="playing"]{padding-top:0;background:#f5f5f2}
.hero-with-motion[data-intro-state="playing"] .hero-bottom{display:none}
.hero-with-motion .hero-grid{display:block;position:relative}
.hero-with-motion[data-intro-state="complete"] .hero-grid{transition:height 1s cubic-bezier(.22,1,.36,1)}
.hero-with-motion .hero-copy{display:grid;grid-template-columns:1.1fr 1fr;column-gap:64px;max-width:none;align-items:start}
.hero-with-motion .hero-copy>.eyebrow{grid-column:1/-1;margin-bottom:22px}
.hero-with-motion h1{grid-column:1;grid-row:2/7;font-size:clamp(40px,4vw,56px);margin:0;letter-spacing:-.035em}
.hero-with-motion .lead,.hero-with-motion .intro,.hero-with-motion .actions,.hero-with-motion .hero-note,.intro-replay{grid-column:2}
.hero-with-motion .hero-note{margin:18px 0 0}
.hero-with-motion[data-intro-state] .hero-copy{position:absolute;inset:0 0 auto;transition:opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.hero-with-motion[data-intro-state="playing"] .hero-copy{transition:none;opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none}
.hero-with-motion[data-intro-state="complete"] .hero-copy{opacity:1;visibility:visible;transform:none;transition-delay:.2s}
.intro-motion{position:absolute;inset:0 auto auto 50%;width:100vw;transform:translateX(-50%);margin:0;min-width:0;transition:opacity .7s ease,transform 1s cubic-bezier(.22,1,.36,1),visibility .7s}
.hero-with-motion[data-intro-state="complete"] .intro-motion{opacity:0;visibility:hidden;transform:translate(-50%,-16px);pointer-events:none}
.hero-with-motion[data-intro-state="playing"] .intro-motion{visibility:visible;transition:opacity .7s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.intro-motion-stage{height:clamp(400px,calc(100svh - 86px),960px);background:#f5f5f2}
.intro-motion-stage svg{display:block;width:100%;height:100%;overflow:visible}
.intro-motion-stage text{font-family:"Apple SD Gothic Neo","Noto Sans KR",sans-serif;letter-spacing:-.025em}
.intro-motion-stage text:not([fill]){fill:var(--ink)}
.intro-motion figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.intro-motion-controls{position:absolute;right:max(24px,calc((100vw - 1160px)/2));bottom:24px;display:flex;gap:16px}
.intro-motion-controls button,.intro-replay{min-height:44px;padding:8px 16px;border:1px solid #74829b;border-radius:4px;background:var(--dark);color:#e8eef8;font:inherit;font-size:13px;cursor:pointer}
.intro-motion-controls button:hover,.intro-replay:hover{background:#25334b}
.intro-motion-controls button:focus-visible,.intro-replay:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.intro-replay{background:transparent;justify-self:start;border:0;padding:8px 0;margin-top:8px;color:#a2b5d1;font-size:12px}
.hero-with-motion [hidden]{display:none}
.hero-with-motion .hero-bottom{margin-top:36px}
@media(max-width:760px){
 .hero-with-motion .hero-copy{display:block}
 .hero-with-motion h1{font-size:clamp(36px,9vw,54px);margin-bottom:24px}
 .hero-with-motion .hero-note{margin-top:18px}
 .intro-motion-stage{height:clamp(300px,55svh,520px)}
 .intro-motion-controls{right:18px;bottom:16px;gap:8px}
 .intro-motion-controls button{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-with-motion .hero-grid,.hero-with-motion .hero-copy,.intro-motion{transition:none!important}
}