/* Sayfully trang chủ: các lớp chuyển động trang trí (màn mây mở đầu, chữ bay, nét gạch tay, băng chữ chéo,
   khối nở khi cuộn, Long nhỏ trên thanh tiến trình). Bố cục chính nằm trong home.css. */

/* ---------- màn mây mở đầu: chỉ hiện khi <html> có lớp .intro (một lần mỗi phiên) ---------- */
.curtain { display: none; }
.intro { --intro: .95s; }
.intro .curtain { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.curtain::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, #FFFFFF, #ECEAFF 60%, #DCD8FF); animation: curtain-fade .7s ease .6s forwards; }
@keyframes curtain-fade { to { opacity: 0; } }
.cc-half { position: absolute; top: -10%; bottom: -10%; width: 62%; }
.cc-left { left: -6%; animation: part-left 1.35s cubic-bezier(.7, 0, .25, 1) .45s forwards; }
.cc-right { right: -6%; animation: part-right 1.35s cubic-bezier(.7, 0, .25, 1) .45s forwards; }
@keyframes part-left { to { transform: translateX(-115%) scale(1.25); opacity: .6; } }
@keyframes part-right { to { transform: translateX(115%) scale(1.25); opacity: .6; } }
.cc-half::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 30% at 70% 22%, #fff, transparent 70%), radial-gradient(60% 34% at 40% 55%, #fff, transparent 70%), radial-gradient(55% 30% at 75% 85%, #fff, transparent 70%); }
.cc-right::before { transform: scaleX(-1); }
.cc { position: absolute; height: auto; max-width: none; }
.cc-left .cc:nth-of-type(1) { width: 120%; left: -10%; top: 4%; }
.cc-left .cc:nth-of-type(2) { width: 100%; left: 20%; top: 38%; }
.cc-left .cc:nth-of-type(3) { width: 130%; left: -20%; top: 66%; }
.cc-right .cc:nth-of-type(1) { width: 110%; right: -10%; top: 14%; transform: scaleX(-1); }
.cc-right .cc:nth-of-type(2) { width: 120%; right: 10%; top: 46%; transform: scaleX(-1); }
.cc-right .cc:nth-of-type(3) { width: 100%; right: -14%; top: 74%; transform: scaleX(-1); }
.cc-logo { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 14px; font: 900 44px/1 var(--font); letter-spacing: -.03em; color: #1B1452; transform: translate(-50%, -50%); animation: logo-in .45s cubic-bezier(.34, 1.56, .64, 1) both, logo-out .45s ease .55s forwards; }
.cc-logo img { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 16px 30px -12px rgba(108, 76, 246, .7); }
@keyframes logo-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
@keyframes logo-out { to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); filter: blur(6px); } }
/* Hero diễn sau khi mây tách. */
.hero-bg { animation-delay: var(--intro, 0s); }
.hero h1 .w { animation-delay: calc(var(--intro, 0s) + .25s + var(--i, 0) * 90ms); }
.rise { animation-delay: calc(var(--intro, 0s) + var(--d, 0s)); }
.long-mascot.is-ready { animation-delay: calc(var(--intro, 0s) + .15s); }

/* ---------- Long nhỏ chạy theo thanh tiến trình cuộn ---------- */
.rider { position: fixed; z-index: 61; top: 4px; left: calc(var(--p, 0) * 100%); width: 24px; height: 24px; margin-left: -12px; pointer-events: none; opacity: calc(var(--p, 0) * 40); }
.rider img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 4px 12px -2px rgba(108, 76, 246, .8); animation: rider-bob 1s ease-in-out infinite; }
@keyframes rider-bob { 50% { transform: translateY(2px) rotate(8deg); } }

/* ---------- Long nói: chữ tiếng Anh bay ra từ miệng kèm vòng sóng âm ---------- */
.say-words { position: absolute; left: 49%; top: 45%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.say-word { position: absolute; left: 0; top: 0; padding: 6px 13px; border-radius: 999px 999px 999px 6px; background: #fff; color: var(--violet-700); font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(52, 32, 140, .6), inset 0 0 0 1.5px #E7E1FF; animation: say-float 3.6s cubic-bezier(.2, .7, .3, 1) forwards; }
.say-word:nth-child(3n) { color: #D9432F; }
.say-word:nth-child(3n+1) { color: #0E8358; }
@keyframes say-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  14% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .25), calc(-50% - 40px)) scale(1.08) rotate(var(--r)); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% - 190px)) scale(.92) rotate(calc(var(--r) * -1)); }
}
.say-ring { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 18px rgba(180, 85, 245, .5); animation: ring-out 1.5s ease-out forwards; }
@keyframes ring-out { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(2.8); } }

/* ---------- chữ cái phát sáng bay lên từ cuốn sách Long đang đọc ---------- */
/* Gốc ở mép trái trang sách; chữ uốn sang trái để bay ra khoảng trời trống, không đè lên thân Long. */
.book-letters { position: absolute; left: 67%; top: 67%; width: 0; height: 0; pointer-events: none; z-index: 1; }
.book-letters span { position: absolute; left: 0; top: 0; font: 900 var(--s, 20px)/1 var(--font); color: var(--c, #6C4CF6); text-shadow: 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, .95), 0 4px 14px rgba(108, 76, 246, .35); animation: letter-rise var(--t, 3.4s) ease-out forwards; }
@keyframes letter-rise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0); }
  12% { opacity: 1; }
  40% { transform: translate(calc(-50% + var(--dx) * .3), -80px) scale(1.08) rotate(calc(var(--r) * .4)); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -190px) scale(.85) rotate(var(--r)); }
}

/* ---------- nét gạch tay tự vẽ dưới từ khoá của tiêu đề ---------- */
.mark { position: relative; white-space: nowrap; }
/* Nằm hẳn dưới dấu nặng (ự, ộ) để không che dấu; chỉ gạch cụm từ cuối tiêu đề nên không chạm dòng dưới. */
.swoosh { position: absolute; left: -3%; bottom: -.4em; width: 106%; height: .14em; overflow: visible; pointer-events: none; }
.swoosh path { fill: none; stroke: var(--sw, #FF6B57); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .3, 1) .55s; }
.in .swoosh path, .in.swoosh path, .hero .swoosh path { stroke-dashoffset: 0; }
.hero .swoosh path { transition: none; animation: draw 1s cubic-bezier(.6, 0, .3, 1) both; animation-delay: calc(var(--intro, 0s) + 1.1s); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.games-band .swoosh { --sw: #FFD666; }
.section-head h2:has(.mark) + p { margin-top: 28px; }

/* ---------- hai băng chữ bắt chéo ---------- */
/* Hai băng song song cùng góc nghiêng, có khoảng hở, để băng tím không bao giờ che câu mẫu. */
.tickers { position: relative; margin: 64px 0 -8px; padding: 26px 0 34px; overflow-x: clip; }
.tickers .ticker { margin: 0 0 0 -4vw; position: relative; z-index: 1; }
.ticker-b { position: relative; z-index: 1; margin: 22px 0 0 -4vw; width: 108vw; padding: 13px 0; overflow: hidden; transform: rotate(-1.6deg); background: linear-gradient(90deg, #6C4CF6, #B455F5 45%, #FF6B57); box-shadow: 0 18px 36px -20px rgba(108, 76, 246, .8); }
.ticker-b .track { display: flex; align-items: center; gap: 26px; width: max-content; animation: ticker-rev 34s linear infinite; }
.ticker-b span { font: 900 24px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.ticker-b i { font-style: normal; font-size: 20px; color: #FFD666; display: inline-block; animation: spin 4s linear infinite; }
@keyframes ticker-rev { from { transform: translateX(-50%); } to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- dải số liệu: viền cầu vồng xoay ---------- */
.ribbon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--a), #6C4CF6, #FF6B57, #FBBF24, #12A16B, #2F7BF0, #6C4CF6); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-angle 6s linear infinite; opacity: .9; }

/* ---------- khối trò chơi: nở từ thẻ bo góc ra toàn màn hình, đèn lồng theo chuột ---------- */
.games-band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 140, .2), transparent 62%); }
.games-band:hover::after { opacity: 1; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .games-band[data-expand] { clip-path: inset(0 calc((1 - var(--vp, 1)) * 7%) round calc((1 - var(--vp, 1)) * 64px)); }
}

/* ---------- điện thoại trong showcase lật 3D khi đổi tính năng ---------- */
.show-stage .phone.flip { animation: phone-flip .8s cubic-bezier(.3, .7, .3, 1); }
@keyframes phone-flip {
  0% { transform: translate(-50%, -50%) rotateY(0); }
  45% { transform: translate(-50%, -50%) rotateY(-78deg) scale(.92); }
  100% { transform: translate(-50%, -50%) rotateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro .curtain, .say-words, .book-letters, .rider { display: none; }
  .swoosh path { stroke-dashoffset: 0; }
}
@media (max-width: 760px) {
  .cc-logo { font-size: 32px; } .cc-logo img { width: 48px; height: 48px; border-radius: 15px; }
  .say-word { font-size: 13px; padding: 5px 10px; }
  .tickers { margin: 40px 0 -4px; padding: 18px 0 24px; }
  .ticker-b { margin-top: 16px; }
  .ticker-b span { font-size: 17px; }
  .ticker-b { padding: 10px 0; }
}