/* Hoạt ảnh mở đầu (học theo menu INKWAVE): logo bật lò xo, chữ nhún riêng từng chữ, giọt siro chảy dưới logo,
   vòng sóng khi bấm Play, màn chuyển cảnh phủ toàn màn hình, các phần tử menu vào lần lượt.
   Các hoạt ảnh vào dùng thuộc tính translate / scale / rotate riêng để cộng dồn với transform sẵn có của phần tử. */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring2: cubic-bezier(.26, 1.9, .5, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- vào màn: --i là thứ tự xuất hiện ---------- */
.in { animation: in-up .6s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.in--down { animation-name: in-down; }
.in--pop { animation-name: in-pop; }
.in--logo { animation: in-logo .95s var(--spring2) backwards .1s; }
@keyframes in-up { from { opacity: 0; translate: 0 36px; scale: .94; } }
@keyframes in-down { from { opacity: 0; translate: 0 -30px; } }
@keyframes in-pop { from { opacity: 0; scale: .4; } 50% { opacity: 1; } }
@keyframes in-logo { from { opacity: 0; scale: .25; rotate: -14deg; } 45% { opacity: 1; } }

/* ---------- màn title ---------- */
#screen-title.active { animation: none; }
#screen-title > .title-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.title-blobs i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; animation: blob-float 14s ease-in-out infinite alternate; }
.title-blobs i:nth-child(1) { width: 60vw; height: 60vw; left: -18vw; top: -12vw; background: #ff6fc0; }
.title-blobs i:nth-child(2) { width: 56vw; height: 56vw; right: -20vw; bottom: -14vw; background: #ffd93b; animation-delay: -4s; }
.title-blobs i:nth-child(3) { width: 26vw; height: 26vw; right: 8vw; top: 6vh; background: #5fb6ff; opacity: .4; animation-delay: -7s; }
.title-blobs i:nth-child(4) { width: 30vw; height: 30vw; left: 6vw; bottom: 4vh; background: #b657ff; opacity: .38; animation-delay: -2s; }
@keyframes blob-float { to { translate: 5vw 3vh; scale: 1.12; } }

.logo { position: relative; display: flex; flex-direction: column; align-items: center; line-height: .82; text-align: center; isolation: isolate; }
.logo-line { display: flex; justify-content: center; white-space: nowrap; font-weight: 800; letter-spacing: .01em; color: transparent; }
.logo .l1 { font-size: clamp(72px, 22vw, 132px); }
.logo .l2 { font-size: clamp(56px, 17vw, 102px); }
/* Mỗi chữ có hai lớp chồng nhau: viền tối (.s) và ruột gradient (.f). Tất cả viền nằm dưới tất cả ruột
   nên viền chữ này không cắt vào chữ bên cạnh. Chữ nhún lệch pha nhau tạo cảm giác "sóng". */
.ll { position: relative; display: inline-block; color: transparent; }
.ll b { position: absolute; inset: 0; font: inherit; color: transparent; animation: ll-wave 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.28s); }
.ll .s { z-index: 0; -webkit-text-stroke: .2em #4a1a92; filter: drop-shadow(0 .09em 0 #2b0a63) drop-shadow(0 .25em .3em rgba(20, 0, 60, .55)); }
.ll .f { z-index: 1; background: linear-gradient(#fffbe0 5%, #ffe14d 40%, #ff9a1f 85%); -webkit-background-clip: text; background-clip: text; }
.l2 .f { background-image: linear-gradient(#ffd0ef 5%, #ff6fc0 45%, #e0287f 90%); }
@keyframes ll-wave {
  0%, 100% { translate: 0 var(--y, 0em); rotate: var(--r, 0deg); }
  50% { translate: 0 calc(var(--y, 0em) - .05em); rotate: calc(var(--r, 0deg) + 3deg); }
}

/* vệt siro tím + hồng phía sau logo, có giọt chảy xuống rồi rơi */
.logo-splat { position: absolute; z-index: -1; left: 50%; top: 50%; width: 118%; max-width: 100vw; height: auto; overflow: visible; transform: translate(-50%, -50%) rotate(-3deg); pointer-events: none;
  filter: drop-shadow(0 .5em 0 rgba(40, 10, 110, .28)); }
.ls-a { fill: #4ab8ff; stroke: rgba(255, 255, 255, .9); stroke-width: 4px; vector-effect: non-scaling-stroke; }
.ls-a.ls-dot { stroke: none; }
.ls-b { fill: #ff5fa8; }
.logo-drip path { fill: #4ab8ff; transform-box: fill-box; transform-origin: 50% 0; animation: logo-drip 3.8s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(var(--d) * -.95s); }
.logo-drop { fill: #4ab8ff; animation: logo-drop 3.8s cubic-bezier(.55, 0, 1, .6) infinite; animation-delay: calc(var(--d) * -.95s); }
@keyframes logo-drip { 0% { transform: scaleY(.25); } 62% { transform: scaleY(1); } 70% { transform: scaleY(.7); } 100% { transform: scaleY(.25); } }
@keyframes logo-drop { 0%, 60% { transform: translateY(-20px) scale(.2); opacity: 0; } 64% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(140px) scale(.7); opacity: 0; } }

/* kẹo nổi hai bên: bật vào lần lượt rồi tiếp tục trôi (hai animation dùng hai thuộc tính khác nhau nên cộng dồn) */
.title-candies img { animation: c-in .8s var(--spring) backwards calc(.45s + var(--k, 0) * 70ms), float var(--d) ease-in-out infinite alternate; }
@keyframes c-in { from { opacity: 0; scale: .2; rotate: -40deg; } }

/* bấm Play: logo nén rồi bật lại, vòng sóng lan ra, chữ Play chớp */
.title-shock { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 3px rgba(74, 26, 146, .5); opacity: 0; pointer-events: none; }
#screen-title.is-go .title-shock { animation: title-shock .65s var(--out) forwards; }
#screen-title.is-go .logo { animation: title-go .45s var(--spring); }
#screen-title.is-go #btn-play.pulse { animation: go-flash .3s steps(2) 2; }
@keyframes title-shock { 0% { opacity: 1; scale: .25; } 100% { opacity: 0; scale: 1.5; border-width: 1px; } }
@keyframes title-go { 0% { scale: 1; } 30% { scale: 1.09 .9; } 62% { scale: .97 1.05; } 100% { scale: 1; } }
@keyframes go-flash { 50% { opacity: .25; } }

/* ---------- màn chuyển cảnh ---------- */
#wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; visibility: hidden; }
#wipe.is-run { visibility: visible; pointer-events: auto; } /* nuốt chạm trong lúc chuyển cảnh để không bấm trùng */
#wipe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wipe-mark { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; opacity: 0; pointer-events: none; }
.wipe-mark img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.wipe-ring { position: absolute; inset: -18%; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .85); opacity: 0; }
.wipe-mark.is-on { animation: wipe-mark var(--wipe-ms, 1s) linear forwards; }
.wipe-mark.is-on .wipe-ring { animation: wipe-ring var(--wipe-ms, 1s) var(--out) forwards; }
/* kẹo giữa màn hình hiện ra đúng lúc màn hình đã bị lấp kín (~53% thời gian), rồi biến mất trước khi kẹo nổ */
@keyframes wipe-mark { 0%, 46% { opacity: 0; scale: .4; rotate: -30deg; } 54% { opacity: 1; scale: 1.14; rotate: 6deg; } 60% { opacity: 1; scale: 1; rotate: 0deg; } 66% { opacity: 1; scale: 1; } 74%, 100% { opacity: 0; scale: .8; translate: 0 24px; } }
@keyframes wipe-ring { 0%, 50% { opacity: 0; scale: .5; } 55% { opacity: .95; } 74%, 100% { opacity: 0; scale: 1.7; border-width: 1px; } }

/* ---------- bản đồ: thanh trên rơi xuống lần lượt, các nút level bật lên từ level hiện tại ra hai phía ---------- */
#screen-map.active .map-top > * { animation: in-down .55s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
#screen-map.active #map-scroll { animation: map-in .7s var(--out) backwards .1s; }
@keyframes map-in { from { opacity: 0; scale: .96; } }
#map-inner.is-intro .node { animation: node-in .55s var(--spring) backwards; animation-delay: calc(var(--n, 0) * 45ms + 350ms); }
#map-inner.is-intro .node.current { animation: node-in .55s var(--spring) backwards calc(var(--n, 0) * 45ms + 350ms), node-pulse 1.5s ease-in-out infinite 1.2s; }
@keyframes node-in { from { opacity: 0; scale: .2; } }

@media (prefers-reduced-motion: reduce) {
  .in, .in--logo, .ll b, .title-blobs i, .logo-drip path, .logo-drop, .title-candies img, #screen-map.active .map-top > *, #screen-map.active #map-scroll, #map-inner.is-intro .node { animation: none; }
  #screen-title.is-go .logo, #screen-title.is-go .title-shock { animation: none; }
}