@charset "utf-8";
/* ani.css — 상단 비주얼·이벤트 장식 모션, 스크롤 등장 */

/* 하이GT 인터랙션 — 으뜸촌 패턴(등장·둥둥·흔들림·스크롤 등장·CTA 펄스·커서 깜빡임) 적용
   대상은 js/motion.js 가 Figma 노드에 클래스를 붙여 지정. transform 만 사용(Tailwind 의 rotate/translate 속성과 겹치지 않음) */
/* 로고 뒤 빨간 채움 도형(153:45099, Rectangle 25) — 로고에 완전히 가려지는 도형이라 등장 전 빨갛게 비치지 않도록 숨김 */
[data-node-id="153:45099"], [data-node-id="194:4071"] { display: none !important; } /* 194:4071 = 01 이벤트 로고 뒤 같은 빨간 도형 */
/* 첫 화면 등장 */
@keyframes mo-hero-enter { from { opacity: 0; transform: translateY(45px) scale(.95); } to { opacity: 1; transform: none; } }
.mo-enter { animation: mo-hero-enter 1s cubic-bezier(.2,.7,.2,1) both; }
/* 하이GT 로고: 작게 있다가 커지며 등장 */
@keyframes mo-grow {
  0% { opacity: 0; transform: scale(.2); }
  55% { opacity: 1; transform: scale(1.1); }
  75% { transform: scale(.96); }
  100% { opacity: 1; transform: none; }
}
.mo-grow { animation: mo-grow 1.1s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 60%; }
.mo-grow.mo-then-breathe { animation: mo-grow 1.1s cubic-bezier(.2,.7,.2,1) both, mo-breathe 4s ease-in-out infinite; animation-delay: var(--d,0s), calc(var(--d,0s) + 1.1s); }
/* 반복 움직임 */
@keyframes mo-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes mo-float-r { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-2deg); } }
/* 열기구: 넓은 범위를 자유롭게 떠다님 */
@keyframes mo-balloon {
  0%,100% { transform: translate(0,0) rotate(-1.5deg); }
  14% { transform: translate(38px,-34px) rotate(2deg); }
  30% { transform: translate(84px,-12px) rotate(-1deg); }
  46% { transform: translate(60px,-62px) rotate(2.5deg); }
  62% { transform: translate(10px,-40px) rotate(-2deg); }
  78% { transform: translate(-34px,-70px) rotate(1deg); }
  90% { transform: translate(-26px,-18px) rotate(-2.5deg); }
}
/* 배경 폭죽: 작게 → 커지며 터짐 (js 가 폭죽 묶음 하나를 통째로 키움) */
@keyframes mo-burst {
  0% { opacity: 0; transform: scale(.12); }
  4% { opacity: 1; }
  18% { opacity: 1; transform: scale(1.08); }
  25% { opacity: 1; transform: scale(1); }
  93% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}
.mo-burst { position: absolute !important; display: block !important; inset: 0; pointer-events: none; animation: mo-burst 4.4s cubic-bezier(.2,.7,.3,1) infinite both; animation-delay: var(--d,0s); }
@keyframes mo-drift { 0%,100% { transform: translateX(-16px); } 50% { transform: translateX(16px); } }
@keyframes mo-breathe { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.02) rotate(.4deg); } }
@keyframes mo-ride { 0%,100% { transform: translateX(0); } 50% { transform: translateX(28px) translateY(-2px); } }
@keyframes mo-bubble { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.06); } 60% { transform: translateY(-10px) scale(1.06); } }
@keyframes mo-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes mo-tap { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-8px,-10px) rotate(-4deg); } }
@keyframes mo-blink { 50% { opacity: 0; } }
.mo-float { animation: mo-float 3.2s ease-in-out infinite; }
.mo-float-r { animation: mo-float-r 3.8s ease-in-out infinite; }
.mo-balloon { animation: mo-balloon 18s ease-in-out infinite; }
.mo-drift { animation: mo-drift 9s ease-in-out infinite; }
.mo-ride { animation: mo-ride 5s ease-in-out infinite; }
.mo-bubble { animation: mo-bubble 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.mo-pulse { animation: mo-pulse 1.2s ease-in-out infinite; }
.mo-tap { animation: mo-tap 1.1s ease-in-out infinite; transform-origin: 30% 20%; }
.mo-blink { animation: mo-blink 1s step-end infinite; }
/* 첫 등장 뒤 반복 (등장 애니메이션 다음 이어서) */
.mo-enter.mo-then-float { animation: mo-hero-enter 1s cubic-bezier(.2,.7,.2,1) both, mo-float 3.4s ease-in-out infinite; animation-delay: var(--d,0s), calc(var(--d,0s) + 1s); }
/* 스크롤 등장 (으뜸촌 .reveal 과 같은 값) */
.mo-reveal { transition: opacity 1s ease, transform 1s cubic-bezier(.2,.65,.2,1); }
html.mo-ready .mo-reveal:not(.is-visible) { opacity: 0; transform: translateY(65px); }
html.mo-ready .mo-reveal[data-reveal="down"]:not(.is-visible) { transform: translateY(-55px); }
html.mo-ready .mo-reveal[data-reveal="right"]:not(.is-visible) { transform: translateX(-70px); }
html.mo-ready .mo-reveal[data-reveal="zoom"]:not(.is-visible) { transform: scale(.85); }
html.mo-ready .mo-reveal[data-reveal="fade"]:not(.is-visible) { transform: none; } /* 하단 숫자: 제자리에서 서서히 (아래 회색 영역과 겹치지 않게) */
/* 태블릿 화면 속 하이GT 캐릭터: 통통 뛰며 고개 갸웃 (안쪽 그림에만 적용 → 태블릿과 함께 움직이는 건 그대로) */
@keyframes mo-hop {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  10% { transform: translateY(2px) scale(1.06, .92); }
  22% { transform: translateY(-9px) rotate(-6deg) scale(.97, 1.04); }
  34% { transform: translateY(0) rotate(0) scale(1.04, .96); }
  44% { transform: translateY(0) scale(1); }
  58% { transform: rotate(7deg); }
  72% { transform: rotate(-5deg); }
  84% { transform: rotate(0); }
}
.mo-hop { animation: mo-hop 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
/* 타이틀 옆 아이콘(지도·카메라): 더 크게 둥둥 */
@keyframes mo-bob {
  0%,100% { transform: translate(0,0) rotate(-4deg); }
  25% { transform: translate(5px,-14px) rotate(1deg); }
  50% { transform: translate(0,-26px) rotate(5deg); }
  75% { transform: translate(-5px,-12px) rotate(0); }
}
@keyframes mo-bob-r {
  0%,100% { transform: translate(0,0) rotate(4deg); }
  25% { transform: translate(-6px,-12px) rotate(-1deg); }
  50% { transform: translate(0,-24px) rotate(-5deg); }
  75% { transform: translate(6px,-14px) rotate(0); }
}
.mo-bob { animation: mo-bob 3.6s ease-in-out infinite; }
.mo-bob-r { animation: mo-bob-r 4s ease-in-out infinite; }
/* '도전 방법' 말풍선: 작게 있다가 커지며 등장 → 살짝 숨쉬기 */
@keyframes mo-stamp {
  0% { opacity: 0; transform: scale(.2) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(2deg); }
  80% { transform: scale(.96) rotate(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes mo-stamp-loop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.mo-stamp { position: absolute !important; display: block !important; inset: 0; pointer-events: none; }
html.mo-ready .mo-stamp:not(.is-visible) { opacity: 0; transform: scale(.2); }
.mo-stamp.is-visible { animation: mo-stamp .8s cubic-bezier(.2,.7,.2,1) both, mo-stamp-loop 2.4s .8s ease-in-out infinite; }
/* 휴대폰 지도 속 파란 핀: 통통 튀고 그림자는 함께 줄었다 늘었다 */
@keyframes mo-pin {
  0%,100% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  50% { transform: translateY(0); }
  62% { transform: translateY(-5px); }
  74% { transform: translateY(0); }
}
@keyframes mo-pin-shadow {
  0%,100% { transform: translateY(0) scale(1); opacity: 1; }
  30% { transform: translateY(14px) scale(.6); opacity: .5; }
  50% { transform: translateY(0) scale(1); opacity: 1; }
  62% { transform: translateY(5px) scale(.85); opacity: .8; }
  74% { transform: translateY(0) scale(1); opacity: 1; }
}
.mo-pin { animation: mo-pin 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.mo-pin-shadow { animation: mo-pin-shadow 1.8s ease-in-out infinite; transform-origin: 50% 50%; }
/* 모바일 등: 화면에 보이면 작게 → 크게 튀어나온 뒤 살짝 숨쉬기 */
html.mo-ready .mo-popin:not(.is-visible) { opacity: 0; transform: scale(.2); }
.mo-popin.is-visible { animation: mo-stamp .8s cubic-bezier(.2,.7,.2,1) both, mo-stamp-loop 2.4s .8s ease-in-out infinite; }
/* 곤돌라: js 가 케이블 선을 따라 transform 지정 */
.mo-gondola { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .mo-enter, .mo-popin.is-visible, .mo-pin, .mo-pin-shadow, .mo-grow, .mo-burst, .mo-stamp.is-visible, .mo-hop, .mo-bob, .mo-bob-r, .mo-float, .mo-float-r, .mo-balloon, .mo-drift, .mo-growin.is-visible, .mo-ride, .mo-bubble, .mo-pulse, .mo-tap, .mo-blink {
    animation: none !important;
  }
  html.mo-ready .mo-reveal:not(.is-visible) { opacity: 1; transform: none; }
}
/* 하이GT 캐릭터·? ! 말풍선: 작게 → 커지며 등장 후 둥둥 */
html.mo-ready .mo-growin:not(.is-visible) { opacity: 0; transform: scale(.2); animation: none; }
.mo-growin.mo-float.is-visible {
  transform-origin: 50% 80%;
  animation: mo-grow 1s cubic-bezier(.2,.7,.2,1) both, mo-beat2 2s ease-in-out infinite;
  animation-delay: var(--d,0s), calc(var(--d,0s) + 1s);
}
.mo-growin.mo-bubble.is-visible {
  transform-origin: 50% 100%;
  animation: mo-grow 1s cubic-bezier(.2,.7,.2,1) both, mo-beat2 2s ease-in-out infinite;
  animation-delay: var(--d,0s), calc(var(--d,0s) + 1s);
}
/* 캐릭터·? ! 말풍선: 등장 후 2초마다 한 번씩 커졌다 작아짐 */
@keyframes mo-beat2 { 0%, 45%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } }