/* =========================================================
   motion.css — 시노메 엔엔 사이트 애니메이션 레이어
   원본 디자인(index.html 인라인 스타일)은 건드리지 않고
   여기서 움직임만 덧붙입니다. 값은 :root 변수로 조절하세요.
   ========================================================= */
:root{
  --blue:#2121D9;
  --ease-out:cubic-bezier(.16,1,.3,1);      /* 빠르게 나왔다가 부드럽게 멈춤 */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --reveal-dist:36px;                        /* 스크롤 등장 시 올라오는 거리 */
  --reveal-time:.9s;
}

/* ---------- 0. 스크롤 진행 바 + 고정 내비 ---------- */
.m-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--blue);
  transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}
header.m-sticky{position:sticky;top:0;z-index:90;transition:box-shadow .3s,background-color .3s}
header.m-sticky.is-scrolled{background:rgba(241,242,246,.86)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 #C9CBD8,0 8px 24px rgba(16,16,42,.06)}
.navlink[data-nav]{position:relative}
.navlink[data-nav]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
.navlink[data-nav]:hover::after,.navlink[data-nav].is-active::after{transform:scaleX(1);transform-origin:0 50%}
.navlink[data-nav].is-active{color:var(--blue)}

/* ---------- 1. 인트로 (첫 화면) ---------- */
.m-char{display:inline-block;transform:translateY(105%) rotate(6deg);opacity:0;
  transition:transform 1s var(--ease-out),opacity .6s;transition-delay:calc(var(--i) * 45ms + .15s)}
.m-line{display:inline-block;overflow:hidden;padding:0 .04em .08em;margin-bottom:-.08em;vertical-align:top}
.is-ready .m-char{transform:none;opacity:1}

.m-halo{transform:translateY(-14px) scale(.6);opacity:0;transition:transform 1.2s var(--ease-out) .05s,opacity .8s .05s}
.is-ready .m-halo{transform:none;opacity:1}
.m-halo ellipse:last-child{animation:m-dash 6s linear infinite}
@keyframes m-dash{to{stroke-dashoffset:-80}}
.m-halo-wrap{animation:m-bob 4.5s ease-in-out infinite}
@keyframes m-bob{50%{transform:translateY(-6px)}}

.m-fade{opacity:0;transform:translateY(14px);transition:opacity .8s,transform .9s var(--ease-out);transition-delay:var(--d,.6s)}
.is-ready .m-fade{opacity:1;transform:none}

/* 히어로 카드 : 프레임 모서리가 바깥에서 모여듦 */
.m-corner{transition:transform 1s var(--ease-out) .5s,opacity .6s .5s;opacity:0}
.m-corner[data-c="tl"]{transform:translate(-24px,-24px)}.m-corner[data-c="tr"]{transform:translate(24px,-24px)}
.m-corner[data-c="bl"]{transform:translate(-24px,24px)}.m-corner[data-c="br"]{transform:translate(24px,24px)}
.is-ready .m-corner{opacity:1;transform:none}

/* 히어로 일러스트 : 둥실둥실 + 슬라이드 전환 */
#heroImg{animation:m-float 6s ease-in-out infinite}
@keyframes m-float{50%{translate:0 -10px}}
/* 카드 밖으로 튀어나온 일러스트가 잘리지 않도록 clip 대신 opacity + scale 로 등장 */
.m-hero-stage{opacity:0;scale:.96;transition:opacity .8s .3s,scale 1.1s var(--ease-out) .3s}
.is-ready .m-hero-stage{opacity:1;scale:1}
.m-hero-stage #heroImg{opacity:0;scale:.9;transform-origin:50% 100%;transition:opacity .9s .55s,scale 1.2s var(--ease-out) .55s}
.is-ready .m-hero-stage #heroImg{opacity:1;scale:1}
#heroImg.m-out-next{animation:m-out-l .38s var(--ease-io) forwards}
#heroImg.m-out-prev{animation:m-out-r .38s var(--ease-io) forwards}
#heroImg.m-in-next{animation:m-in-r .7s var(--ease-out) both, m-float 6s ease-in-out .7s infinite}
#heroImg.m-in-prev{animation:m-in-l .7s var(--ease-out) both, m-float 6s ease-in-out .7s infinite}
@keyframes m-out-l{to{opacity:0;transform:translateX(-40px) rotate(-2deg)}}
@keyframes m-out-r{to{opacity:0;transform:translateX(40px) rotate(2deg)}}
@keyframes m-in-r{from{opacity:0;transform:translateX(60px) rotate(3deg)}}
@keyframes m-in-l{from{opacity:0;transform:translateX(-60px) rotate(-3deg)}}

/* 캐러셀 점 : 자동재생 진행 표시 */
.hero-dot{position:relative;overflow:hidden;transition:width .45s var(--ease-out),background-color .3s}
.hero-dot[aria-current="true"]{background:#C9CBD8!important}
.hero-dot[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--blue);transform-origin:0 50%;
  animation:m-dot var(--autoplay,6s) linear forwards}
.m-paused .hero-dot[aria-current="true"]::after{animation-play-state:paused}
@keyframes m-dot{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 원형 버튼 공통 hover */
#prevHero,#nextHero,#prevSong,#nextSong{transition:transform .35s var(--ease-out),background-color .25s,color .25s}
#prevHero:hover,#prevSong:hover{transform:translateX(-4px)}
#nextHero:hover,#nextSong:hover{transform:translateX(4px)}
#prevHero:active,#nextHero:active,#prevSong:active,#nextSong:active{transform:scale(.92)}

/* 배경 큰 아웃라인 글자 : 마우스 패럴랙스 (JS가 --px,--py 설정) */
.m-parallax{translate:calc(var(--px,0) * 1px) calc(var(--py,0) * 1px);transition:translate .6s var(--ease-out)}

/* ---------- 2. 스크롤 등장 ---------- */
[data-reveal]{opacity:0;transform:translateY(var(--reveal-dist));
  transition:opacity var(--reveal-time) ease,transform var(--reveal-time) var(--ease-out);transition-delay:calc(var(--stagger,0) * 90ms)}
[data-reveal="left"]{transform:translateX(calc(var(--reveal-dist) * -1.5))}
[data-reveal="right"]{transform:translateX(calc(var(--reveal-dist) * 1.5))}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="mask"]{opacity:1;transform:none}
[data-reveal="mask"] .m-mask{display:inline-block;clip-path:inset(0 100% 0 0);transform:translateX(-12px);
  transition:clip-path 1.1s var(--ease-io),transform 1.1s var(--ease-out)}
[data-reveal="mask"].is-in .m-mask{clip-path:inset(-10% -5% -20% 0);transform:none}
[data-reveal].is-in{opacity:1;transform:none}

/* 이미 transform을 쓰는 이미지(translateX(-50%))는 translate 속성으로만 움직임 */
.m-rise{opacity:0;translate:0 60px;transition:opacity 1s,translate 1.2s var(--ease-out)}
.m-rise.is-in{opacity:1;translate:0 0}

/* SVG 장식 : 선이 그려지고, 점이 톡톡 나타남 */
.m-draw [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-io);transition-delay:calc(var(--k,0) * 60ms)}
.m-draw.is-in [data-draw]{stroke-dashoffset:0}
.m-draw [data-pop]{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;
  transition:transform .7s var(--ease-out),opacity .4s;transition-delay:calc(.5s + var(--k,0) * 70ms)}
.m-draw.is-in [data-pop]{transform:none;opacity:1}
.m-draw.is-in circle[data-pop]{animation:m-pulse 3.2s ease-in-out calc(1.5s + var(--k,0) * 300ms) infinite}
@keyframes m-pulse{50%{transform:scale(1.25)}}
.m-draw [data-type]{opacity:0;transition:opacity .5s;transition-delay:calc(.9s + var(--k,0) * 120ms)}
.m-draw.is-in [data-type]{opacity:1}

/* 4각 별(✦) 반짝임 */
.m-twinkle{transform-box:fill-box;transform-origin:center;animation:m-twinkle 3.6s ease-in-out infinite;animation-delay:var(--tw,0s)}
@keyframes m-twinkle{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(.7) rotate(45deg)}55%{transform:scale(1.15) rotate(90deg)}}

/* 큰 원 SVG 천천히 회전 */
.m-spin{transform-box:view-box;transform-origin:50% 50%;animation:m-spin 60s linear infinite}
@keyframes m-spin{to{transform:rotate(360deg)}}

/* ---------- 3. 카드 · 버튼 hover ---------- */
#voicebank article{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
#voicebank article:hover{transform:translateY(-8px);box-shadow:0 18px 0 -6px rgba(16,16,42,.25)}
#voicebank article .pop{transition:transform .7s var(--ease-out)}
#voicebank article:hover .pop{transform:translateY(-14px) scale(1.03)}
#voicebank article[style*="dashed"] span:nth-child(2){background:linear-gradient(90deg,#fff 0 40%,#9a9cff 50%,#fff 60% 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:m-shine 3.5s linear infinite}
@keyframes m-shine{from{background-position:100% 0}to{background-position:-50% 0}}

#cvImg{transition:opacity .25s,filter .25s}
#cvImg.m-swap{opacity:0;filter:blur(6px)}

#guideline .gridbg > div > div[style*="grid-template-columns"] > div,
#guideline div[style*="minmax(240px"] > div{transition:transform .4s var(--ease-out),border-color .3s}
#guideline div[style*="minmax(240px"] > div:hover{transform:translateY(-6px);border-color:var(--blue)!important}

.dl-btn,#songLink,#contactForm button[type=submit],#profile a[href^="http"]{
  position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.dl-btn::before,#songLink::before,#contactForm button[type=submit]::before{
  content:"";position:absolute;inset:0;background:#10102A;z-index:-1;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
.dl-btn:hover::before,#songLink:hover::before,#contactForm button[type=submit]:hover::before{transform:scaleX(1);transform-origin:0 50%}
#songLink svg,#contactForm button[type=submit] svg,#profile a svg{transition:transform .35s var(--ease-out)}
#songLink:hover svg,#profile a:hover svg{transform:translate(3px,-3px)}
#contactForm button[type=submit]:hover svg{transform:translateX(5px)}

/* 입력칸 밑줄 */
.field{background-image:linear-gradient(var(--blue),var(--blue));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease-out)}
.field:focus{background-size:100% 2px;box-shadow:none}

/* ---------- 4. 곡 전환 / 아코디언 / 폼 ---------- */
.m-roll{display:inline-block;overflow:hidden;vertical-align:bottom}
.m-roll > span{display:inline-block}
.m-roll.m-go > span{animation:m-roll .6s var(--ease-out)}
@keyframes m-roll{from{transform:translateY(100%);opacity:0}}
#songFrame{transition:opacity .4s}
#songFrame.m-loading{opacity:0}

#guideBody{overflow:hidden;transition:height .6s var(--ease-io)}
#guideBtn [data-b="guideSign"]{display:inline-block;transition:transform .5s var(--ease-out)}
#guideBtn[aria-expanded="true"] [data-b="guideSign"]{transform:rotate(180deg)}
#guideBtn{transition:background-color .3s,color .3s}
#guideBtn:hover{background:#10102A!important;color:#fff!important}

#doneWrap > div{animation:m-done .8s var(--ease-out)}
#doneWrap svg{animation:m-spin-once 1.2s var(--ease-out)}
@keyframes m-done{from{opacity:0;transform:translateY(20px) scale(.97)}}
@keyframes m-spin-once{from{transform:rotate(-180deg) scale(0)}}

/* ---------- 5. 푸터 : 흐르는 띠 + 카운트다운 ---------- */
.m-tape{overflow:hidden;border-top:1px solid #3A3C66;border-bottom:1px solid #3A3C66;background:#2121D9;color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;white-space:nowrap}
.m-tape-track{display:inline-flex;gap:48px;padding:14px 0 14px 48px;animation:m-tape 28s linear infinite}
.m-tape:hover .m-tape-track{animation-play-state:paused}
@keyframes m-tape{to{transform:translateX(-50%)}}
.m-count{margin-top:40px;display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,48px);font-family:'Space Grotesk',sans-serif}
.m-count > div{min-width:84px}
.m-count b{display:block;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.m-count span{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#A9ABFF;letter-spacing:.12em}
.m-blink{animation:m-blink 1s steps(1) infinite}
@keyframes m-blink{50%{opacity:0}}
.m-soon{display:inline-block;animation:m-glitch 5s infinite}
@keyframes m-glitch{0%,92%,100%{text-shadow:none;transform:none}
  93%{text-shadow:-4px 0 #ff3cac,4px 0 #2bd2ff;transform:translateX(2px)}
  95%{text-shadow:3px 0 #ff3cac,-3px 0 #2bd2ff;transform:translateX(-2px) skewX(-6deg)}
  97%{text-shadow:none;transform:none}}

/* ---------- 6. 마우스 별 꼬리 ---------- */
.m-spark{position:fixed;left:0;top:0;width:10px;height:10px;pointer-events:none;z-index:120;
  background:var(--blue);clip-path:path("M5 0C5.4 3.3 6.7 4.6 10 5C6.7 5.4 5.4 6.7 5 10C4.6 6.7 3.3 5.4 0 5C3.3 4.6 4.6 3.3 5 0Z");
  animation:m-spark .9s ease-out forwards}
@keyframes m-spark{to{opacity:0;transform:var(--t) translateY(18px) scale(.2) rotate(120deg)}}

/* ---------- 7. 움직임 줄이기 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal] .m-mask{clip-path:none!important;transform:none!important}
  [data-reveal],.m-rise,.m-char,.m-fade,.m-halo,.m-corner{opacity:1!important;transform:none!important;translate:none!important;clip-path:none!important}
  .m-hero-stage,.m-hero-stage #heroImg{opacity:1!important;scale:none!important}
  .m-draw [data-draw]{stroke-dashoffset:0!important}.m-draw [data-pop],.m-draw [data-type]{opacity:1!important;transform:none!important}
}

/* 고정 내비 높이만큼 앵커 이동 위치 보정 */
section[id]{scroll-margin-top:64px}

/* 일러스트를 카드보다 크게(132%~140%) 키워 튀어나오게 하는 구조라서,
   브라우저/뷰어의 img{max-width:100%} 류 기본 규칙이 걸리면 작아지고 왼쪽으로 쏠림 → 해제 */
#heroImg,#cvImg,#voicebank img.pop,#visual img.pop{max-width:none!important;max-height:none!important}