/* EDUCERE home motion (2026-10-07).
   1) 첫 화면 차례 등장  2) 스크롤 등장(한 번만)  3) 카드·버튼 반응
   transform·opacity만 움직인다. 레이아웃 높이를 바꾸지 않아 아임웹 iframe 자동 높이에 영향 없음. */
:root{
 --m-ease-out:cubic-bezier(.23,1,.32,1);
 --m-dur:300ms;
 --m-step:60ms;
 --m-lift-shadow:0 1px 2px rgba(30,74,60,.06),0 14px 30px rgba(30,74,60,.10);
}

/* 1) 첫 화면 — CSS만으로 한 번 재생. fill:backwards 라 끝나면 원래 스타일로 돌아간다. */
@keyframes edu-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes edu-fade{from{opacity:0}to{opacity:1}}
.home-hero .hero-copy>*{animation:edu-rise var(--m-dur) var(--m-ease-out) backwards}
.home-hero .hero-copy>:nth-child(1){animation-delay:0ms}
.home-hero .hero-copy>:nth-child(2){animation-delay:60ms}
.home-hero .hero-copy>:nth-child(3){animation-delay:120ms}
.home-hero .hero-copy>:nth-child(4){animation-delay:180ms}
.home-hero .hero-copy>:nth-child(5){animation-delay:240ms}
.home-hero .hero-copy>:nth-child(6){animation-delay:300ms}
.home-hero .notebook-art{animation:edu-fade var(--m-dur) var(--m-ease-out) 160ms backwards}
.home-hero .notebook-art .paper{animation:edu-rise var(--m-dur) var(--m-ease-out) 200ms backwards}
.home-hero .notebook-art .floating-note.top{animation:edu-rise var(--m-dur) var(--m-ease-out) 380ms backwards}
.home-hero .notebook-art .floating-note.bottom{animation:edu-rise var(--m-dur) var(--m-ease-out) 440ms backwards}

/* 2) 스크롤 등장 — html.motion-on 일 때만 숨긴다(스크립트가 못 돌면 클래스가 빠져 전부 보인다). */
html.motion-on :is(
 #flow .section-head,#finder .section-head,.need-card,.recommend,
 #products .section-head,.product-card,
 .note-band-art,.note-band>div:last-child,
 #start .section-head,.launch-link,#start .helper,
 .faq-section>div:first-child,.faq-list details,
 .closing):not(.is-in){opacity:0}
html.motion-on .is-in{animation:edu-rise var(--m-dur) var(--m-ease-out) backwards;animation-delay:calc(var(--i,0)*var(--m-step))}

/* 3) 카드·버튼 반응 — 마우스가 있는 기기에서만 떠오르고, 누르면 살짝 눌린다. */
.product-card,.need-card,.launch-link{transition:transform 200ms var(--m-ease-out),box-shadow 200ms var(--m-ease-out),background .2s,border .2s}
@media (hover:hover) and (pointer:fine){
 .product-card:hover,.need-card:hover,.launch-link:hover{transform:translateY(-3px);box-shadow:var(--m-lift-shadow)}
 .product-card .card-screen{transition:transform 300ms var(--m-ease-out)}
 .product-card:hover .card-screen{transform:translateY(-6px) rotate(-4deg)}
}
.need-card:active,.launch-link:active{transform:scale(.98);transition-duration:120ms}
.button:active{transform:scale(.97);transition-duration:120ms}

@media (prefers-reduced-motion:reduce){
 .home-hero *,.home-hero .hero-copy>*,html.motion-on .is-in{animation:none!important}
 .product-card:hover,.need-card:hover,.launch-link:hover,.need-card:active,.launch-link:active,.button:active{transform:none}
 .product-card:hover .card-screen{transform:rotate(-6deg)}
}
@media print{html.motion-on *{opacity:1!important;animation:none!important}}

/* 4) 흐름 그림 (10-07) — 꺼내 쓰기 → 모르는 곳 찾기 → 탐구 → 설명. 화면에 들어오면 한 번, 점→선→점 차례로 이어진다. */
.home-flow{--g:28px;--dot:44px}
.flow-steps-home{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.flow-step{position:relative;margin:0}
.flow-step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--dot)/2 - 1px);left:calc(var(--dot) + 10px);width:calc(100% + var(--g) - var(--dot) - 20px);height:2px;border-radius:2px;background:var(--accent);opacity:.55;transform-origin:left center}
.flow-dot{display:grid;place-items:center;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--accent-soft);border:1.5px solid var(--accent);color:var(--accent-ink);font-size:13px;font-weight:800;letter-spacing:0}
.flow-tool{margin:16px 0 4px;font-size:12px;font-weight:750;letter-spacing:.02em}
.flow-tool a{color:var(--accent-ink);text-decoration:none}
.flow-tool a:hover{text-decoration:underline}
.flow-step h3{margin:0 0 6px;font-size:19px;letter-spacing:-.03em;color:var(--dark);text-wrap:balance}
.flow-step p:last-child{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.flow-loop{margin:28px 0 0;padding-top:18px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.flow-loop span{color:var(--dark);font-weight:800;margin-right:6px}
@media(max-width:850px){
 .home-flow{--g:22px;--dot:40px}
 .flow-steps-home{grid-template-columns:1fr}
 .flow-step{padding-left:calc(var(--dot) + 16px);min-height:var(--dot)}
 .flow-dot{position:absolute;left:0;top:0}
 .flow-tool{margin-top:2px}
 .flow-step:not(:last-child)::after{top:calc(var(--dot) + 6px);left:calc(var(--dot)/2 - 1px);width:2px;height:calc(100% + var(--g) - var(--dot) - 12px);transform-origin:center top}
}
@keyframes edu-draw-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes edu-draw-y{from{transform:scaleY(0)}to{transform:none}}
html.motion-on .home-flow:not(.is-in) :is(.flow-step,.flow-loop),
html.motion-on .home-flow:not(.is-in) .flow-step::after{opacity:0}
html.motion-on .home-flow.is-in{animation:none}
html.motion-on .home-flow.is-in .flow-step{animation:edu-rise var(--m-dur) var(--m-ease-out) backwards;animation-delay:calc(var(--s)*260ms)}
html.motion-on .home-flow.is-in .flow-step::after{animation:edu-draw-x 260ms cubic-bezier(.77,0,.175,1) backwards;animation-delay:calc(var(--s)*260ms + 140ms)}
html.motion-on .home-flow.is-in .flow-loop{animation:edu-fade var(--m-dur) var(--m-ease-out) 1100ms backwards}
@media(max-width:850px){html.motion-on .home-flow.is-in .flow-step::after{animation-name:edu-draw-y}}
.flow-step:nth-child(1){--s:0}.flow-step:nth-child(2){--s:1}.flow-step:nth-child(3){--s:2}.flow-step:nth-child(4){--s:3}
@media (prefers-reduced-motion:reduce){html.motion-on .home-flow *,html.motion-on .home-flow *::after{animation:none!important}}

/* 5) 숫자 올라가기 (10-07) — 플라나 라이브러리 실제 개수. 숫자는 HTML 에 최종값이 들어 있고, 화면에 들어올 때만 0부터 센다. */
.count-band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:40px;align-items:start;margin:20px 0 10px;padding:40px;border:1px solid var(--line);border-radius:16px;background:#fff}
.count-head h2{margin:0 0 14px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;color:var(--dark);word-break:keep-all;text-wrap:balance}
.count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.count-item{border-left:3px solid var(--accent);padding-left:18px}
.count-num{margin:0;color:var(--dark);font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.count-num small{font-size:16px;font-weight:700;margin-left:3px;color:var(--accent-ink);letter-spacing:0}
.count-label{margin:8px 0 2px;font-size:15px;font-weight:700;color:var(--ink)}
.count-cap{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.count-note{grid-column:1/-1;margin:0;font-size:12px;color:var(--muted)}
@media(max-width:850px){
 .count-band{grid-template-columns:1fr;gap:26px;padding:28px 22px}
 .count-grid{grid-template-columns:1fr;gap:20px}
}
html.motion-on .count-band:not(.is-in) .count-item{opacity:0}
html.motion-on .count-band.is-in{animation:none}
html.motion-on .count-band.is-in .count-item{animation:edu-rise var(--m-dur) var(--m-ease-out) backwards}
html.motion-on .count-band.is-in .count-item:nth-child(2){animation-delay:80ms}
html.motion-on .count-band.is-in .count-item:nth-child(3){animation-delay:160ms}

/* 6) 제품 소개 4쪽(오르다·플라나·스터디아·프레젠타, 10-07) — 같은 틀이라 한 묶음으로. 색은 body data-brand 를 따른다. */
.detail-hero .hero-copy>*{animation:edu-rise var(--m-dur) var(--m-ease-out) backwards}
.detail-hero .hero-copy>:nth-child(2){animation-delay:60ms}
.detail-hero .hero-copy>:nth-child(3){animation-delay:120ms}
.detail-hero .hero-copy>:nth-child(4){animation-delay:180ms}
.detail-hero .hero-copy>:nth-child(5){animation-delay:240ms}
.detail-hero .hero-copy>:nth-child(n+6){animation-delay:300ms}
/* .hero-screen 은 원래 rotate(-2deg) 라 건드리지 않고 바깥 상자를 움직인다 */
.detail-hero .hero-visual{animation:edu-rise var(--m-dur) var(--m-ease-out) 180ms backwards}
html.motion-on :is(.section .section-head,.benefit-grid article,.gallery,.test-link,.try-band,.mini-note,.purchase,.related-card):not(.is-in){opacity:0}
/* 사용 순서 3단계 — 01→02→03 점과 선이 차례로 */
.steps{--sg:28px;--spad:25px}
.steps article{position:relative}
.steps article:not(:last-child)::after{content:"";position:absolute;top:20px;height:2px;border-radius:2px;background:var(--accent);opacity:.5;transform-origin:left center;
 left:52px;width:calc(100% + var(--sg) + var(--spad) - 61px)}
.steps article+article:not(:last-child)::after{left:calc(var(--spad) + 52px);width:calc(100% + var(--sg) - 61px)}
@media(max-width:850px){.steps{--sg:18px;--spad:18px}}
@media(max-width:560px){
 .steps article:not(:last-child)::after,.steps article+article:not(:last-child)::after{top:45px;left:19px;width:2px;height:calc(100% - 24px);transform-origin:center top}
}
html.motion-on .steps:not(.is-in) article,html.motion-on .steps:not(.is-in) article::after{opacity:0}
html.motion-on .steps.is-in{animation:none}
html.motion-on .steps.is-in article{animation:edu-rise var(--m-dur) var(--m-ease-out) backwards}
html.motion-on .steps.is-in article::after{animation:edu-draw-x 260ms cubic-bezier(.77,0,.175,1) backwards}
@media(max-width:560px){html.motion-on .steps.is-in article::after{animation-name:edu-draw-y}}
html.motion-on .steps.is-in article:nth-child(1)::after{animation-delay:140ms}
html.motion-on .steps.is-in article:nth-child(2){animation-delay:260ms}
html.motion-on .steps.is-in article:nth-child(2)::after{animation-delay:400ms}
html.motion-on .steps.is-in article:nth-child(3){animation-delay:520ms}
/* 카드 반응 — 눌러서 가는 카드만 떠오른다(기능 소개 카드는 링크가 아니라 그대로) */
.test-link,.related-card{transition:transform 200ms var(--m-ease-out),box-shadow 200ms var(--m-ease-out),background .2s}
@media (hover:hover) and (pointer:fine){.test-link:hover,.related-card:hover{transform:translateY(-3px);box-shadow:var(--m-lift-shadow)}}
.test-link:active,.related-card:active,.gallery-tabs button:active{transform:scale(.98);transition-duration:120ms}
.gallery-tabs button{transition:transform 160ms var(--m-ease-out),background .2s,border-color .2s,color .2s}
@media (prefers-reduced-motion:reduce){
 .detail-hero .hero-copy>*,.detail-hero .hero-visual,html.motion-on .steps *,html.motion-on .steps *::after{animation:none!important}
 .test-link:hover,.related-card:hover,.test-link:active,.related-card:active,.gallery-tabs button:active{transform:none}
}