/* =====================================================================
   HiuHiu IELTS — MOTION
   ===================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }

/* page transition */
#app.page-in > * { animation: pageIn .55s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* generic scroll reveal */
.rv { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
.box.rv { transform: translateX(-18px); }
.box.rv.in { transform: none; }
ul.examples li.rv { transform: translateX(22px); }
ul.examples li.rv.in { transform: none; }

/* hero: moving red gradient, floating orbs, staggered entrance */
.hero { background-size: 220% 220%; animation: heroGrad 14s ease-in-out infinite alternate; }
@keyframes heroGrad { 0% { background-position: 0% 30%; } 100% { background-position: 100% 70%; } }
.hero::before { animation: orbA 11s ease-in-out infinite alternate; }
.hero::after { animation: orbB 13s ease-in-out infinite alternate; }
@keyframes orbA { to { transform: translate(-60px, 40px) scale(1.12); } }
@keyframes orbB { to { transform: translate(70px, -30px) scale(.9); } }
.hero > * { animation: heroIn .9s var(--ease-out) both; }
.hero > *:nth-child(1) { animation-delay: .05s; }
.hero > *:nth-child(2) { animation-delay: .15s; }
.hero > *:nth-child(3) { animation-delay: .27s; }
.hero > *:nth-child(4) { animation-delay: .39s; }
.hero > *:nth-child(5) { animation-delay: .52s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero h1 { background: linear-gradient(90deg, #fff 0%, #fff 40%, #ffc2ca 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: heroIn .9s var(--ease-out) .15s both, shine 6s linear 1.2s infinite; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* buttons: light sweep */
.btn { position: relative; overflow: hidden; }
.btn-primary::after, .hero .btn-light::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .7s var(--ease-out); }
.btn-primary:hover::after, .hero .btn-light:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }

/* cards: lift + red glow + spotlight following the cursor */
.card.hover { transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s; }
.card.hover:hover { box-shadow: 0 18px 40px rgba(160, 6, 25, .16), 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.grid > a.card.tilting, .book-card.tilting { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); transition: transform .12s linear; }
.grid > a.card { position: relative; overflow: hidden; }
.grid > a.card::after, .book-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%); }
.book-card::before { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 70%); }
.grid > a.card.tilting::after, .book-card.tilting::before { opacity: 1; }
.feature-icon { transition: transform .5s var(--ease-back); }
.card.hover:hover .feature-icon { transform: rotate(-8deg) scale(1.12); }
.book-card .bk-num { transition: transform .5s var(--ease-back); }
.book-card:hover .bk-num { transform: scale(1.12) translateX(4px); }

/* progress bars fill in */
.progress-bar > span { animation: barIn 1.3s var(--ease-out) both; transform-origin: left; }
@keyframes barIn { from { transform: scaleX(0); } }

/* nav */
.nav-links a { transition: background .25s, color .25s, transform .25s; }
.nav-links a:hover { transform: translateY(-1px); }
.brand-logo { transition: transform .5s var(--ease-back); }
.brand:hover .brand-logo { transform: rotate(-10deg) scale(1.08); }

/* =====================================================================
   ROADMAP TIMELINE
   ===================================================================== */
.roadmap { padding-left: 50px; }
.roadmap::before { display: none; }
.rm-track { position: absolute; left: 15px; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--border); }
.rm-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 4px; background: linear-gradient(var(--primary), #ff4d5e 60%, var(--primary-2)); box-shadow: 0 0 14px rgba(255, 46, 67, .65), 0 0 2px rgba(255, 46, 67, .9); transition: height .15s linear; }
.rm-fill::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: #fff; border: 4px solid var(--primary); box-shadow: 0 0 0 6px rgba(255, 46, 67, .18), 0 0 22px rgba(255, 46, 67, .9); animation: headPulse 1.6s ease-in-out infinite; }
@keyframes headPulse { 50% { box-shadow: 0 0 0 11px rgba(255, 46, 67, .08), 0 0 30px rgba(255, 46, 67, 1); } }
.stage { margin-bottom: 34px; }
.stage-dot { left: -50px; top: 20px; width: 34px; height: 34px; border: 3px solid var(--border); background: var(--surface); color: var(--muted); font-size: 14px; z-index: 2; transition: border-color .4s, background .4s, color .4s, box-shadow .4s, transform .6s var(--ease-back); transform: scale(.4); }
.stage.in .stage-dot { transform: scale(1); }
.stage.reached .stage-dot { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 18px rgba(255, 46, 67, .55); }
.stage.current .stage-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--primary); animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.stage.current .card { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: 0 16px 40px rgba(160, 6, 25, .18); }
.stage.current .stage-head h3::after { content: "Bạn đang ở đây"; margin-left: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--primary); padding: 3px 9px; border-radius: 99px; vertical-align: 3px; }

/* stage card is pushed in from the side */
.stage.rv { opacity: 1; transform: none; }
.stage .card { position: relative; opacity: 0; transform: translateX(90px) rotate(1.5deg); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out), box-shadow .3s; }
.stage.in .card { opacity: 1; transform: none; filter: none; }
.stage .card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease-out) .35s; }
.stage.in .card::before { transform: scaleY(1); }
.stage li { opacity: 0; transform: translateX(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 420ms); }
.stage.in li { opacity: 1; transform: none; }
.stage .links .btn { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease-back); transition-delay: .75s; }
.stage.in .links .btn { opacity: 1; transform: none; }
.stage.in .card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(160, 6, 25, .2); }

/* zig-zag timeline on wide screens */
@media (min-width: 980px) {
  .roadmap { padding-left: 0; }
  .rm-track { left: 50%; transform: translateX(-50%); }
  .stage { width: 50%; }
  .stage.left { padding-right: 52px; }
  .stage.right { margin-left: 50%; padding-left: 52px; }
  .stage.left .stage-dot { left: auto; right: -17px; }
  .stage.right .stage-dot { left: -17px; }
  .stage.left .card { transform: translateX(-90px) rotate(-1.5deg); }
  .stage.left.in .card { transform: none; }
  .stage .card::after { content: ""; position: absolute; top: 28px; width: 0; height: 0; border: 9px solid transparent; }
  .stage.left .card::after { right: -18px; border-left-color: var(--border); }
  .stage.right .card::after { left: -18px; border-right-color: var(--border); }
  .stage + .stage { margin-top: -60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .stage .card, .stage li, .stage .links .btn { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* roadmap: the glowing head melts into the line when the end is reached */
.rm-fill { transition: height .18s linear, box-shadow .6s; }
.rm-fill::after { transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1), filter .7s ease; }
.roadmap.rm-complete .rm-fill::after { opacity: 0; transform: translateX(-50%) scaleX(.25) scaleY(2.6); filter: blur(6px); animation: none; }
.roadmap.rm-complete .rm-fill { box-shadow: 0 0 22px rgba(255, 46, 67, .9), 0 0 4px rgba(255, 46, 67, 1); animation: rmGlow 1.2s ease-out 1; }
@keyframes rmGlow { 0% { filter: brightness(1.8); } 100% { filter: none; } }