/* stp:base */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  --bg: #ffffff;
  --ink: #101010;
  --blue: #006fb7;
  --btn: #008afb;
  --btn-hover: #2ea3ff;
  --footer: #01084a;
  --accent: #008afb;
  --font: 'Kanit', sans-serif;
}

html { font-size: calc(100vw / 1440 * 10); overflow-x: hidden; overflow-y: scroll; }
@media (max-width: 1024px) { html { font-size: calc(100vw / 1024 * 10); } }
@media (max-width: 640px) { html { font-size: calc(100vw / 375 * 10); } }

html.menu-lock, html.menu-lock body { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.3s, opacity 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s; }
ul, ol { list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

#mobile-menu { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
#mobile-menu.opened { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s; }
#mobile-menu .menu-panel > a { opacity: 0; transform: translateY(-1.2rem); transition: opacity 0.3s ease, transform 0.3s ease; }
#mobile-menu.opened .menu-panel > a { opacity: 1; transform: none; }
#mobile-menu.opened .menu-panel > a:nth-child(2) { transition-delay: 0.04s; }
#mobile-menu.opened .menu-panel > a:nth-child(3) { transition-delay: 0.08s; }
#mobile-menu.opened .menu-panel > a:nth-child(4) { transition-delay: 0.12s; }
#mobile-menu.opened .menu-panel > a:nth-child(5) { transition-delay: 0.16s; }
#mobile-menu.opened .menu-panel > a:nth-child(6) { transition-delay: 0.2s; }
#mobile-menu.opened .menu-panel > a:nth-child(7) { transition-delay: 0.24s; }
#mobile-menu.opened .menu-panel > a:nth-child(8) { transition-delay: 0.28s; }

@keyframes store-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1rem); }
}

.store-btn { animation: store-float 3s ease-in-out infinite; }
.store-btn:hover { animation-play-state: paused; background-color: var(--btn-hover); }

.section { position: relative; overflow: hidden; }
.bg-tex {
  position: absolute;
  z-index: 0;
  max-width: none;
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.br-d { display: inline; }
@media (max-width: 640px) { .br-d { display: none; } }
/* /stp:base */
/* stp:header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4rem 8.8rem;
  transition: box-shadow 0.3s;
}
.header-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #52c0ff 0%, #ffffff 100%);
  transition: opacity 0.35s ease;
}
.header.scrolled { box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.15); }
.logo { display: flex; align-items: center; gap: 0.4rem; font-size: clamp(14px, 1.8rem, 1.8rem); line-height: 2.8rem; font-weight: 800; color: var(--ink); }
.logo img { width: 3.4rem; height: 3.8rem; }
.logo:hover { opacity: 0.75; }
.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav-link { font-size: clamp(14px, 1.8rem, 1.8rem); line-height: 2.8rem; font-weight: 400; color: var(--ink); white-space: nowrap; }
.nav-link:hover { color: var(--blue); }
.burger-btn { display: none; position: relative; width: 2.4rem; height: 2.4rem; background: transparent; border: 0; z-index: 110; }
.burger-btn span {
  position: absolute;
  left: 0.2rem;
  width: 2rem;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.burger-btn span:nth-child(1) { top: 0.6rem; }
.burger-btn span:nth-child(2) { top: 1.2rem; }
.burger-btn span:nth-child(3) { top: 1.8rem; }
.burger-btn.act span:nth-child(1) { top: 1.2rem; transform: rotate(45deg); }
.burger-btn.act span:nth-child(2) { opacity: 0; }
.burger-btn.act span:nth-child(3) { top: 1.2rem; transform: rotate(-45deg); }
@media (max-width: 1024px) {
  .header { padding: 2.4rem 4rem; }
}
@media (max-width: 640px) {
  .header { padding: 2.4rem 2rem; }
  .nav { display: none; }
  .burger-btn { display: block; }
}
/* /stp:header */
/* stp:menu */
#mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; }
.menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2rem;
  padding: 11rem 8.8rem 2.4rem;
  background: linear-gradient(180deg, #52c0ff 0%, #fcfeff 100%);
}
html.menu-lock .header { box-shadow: none; }
html.menu-lock .header-bg { opacity: 0; }
.menu-link { font-size: clamp(14px, 1.8rem, 1.8rem); line-height: 2.8rem; font-weight: 400; color: var(--ink); }
.menu-link:hover { color: var(--blue); }
/* /stp:menu */
/* stp:hero */
.hero { background: linear-gradient(180deg, #ffffff 82.893%, #009aff 100%); }
.hero .bg-tex { left: -12.2rem; top: -20.8rem; width: 168.4rem; height: 112.2rem; }
.hero-inner { position: relative; z-index: 1; max-width: 144rem; margin: 0 auto; min-height: 80rem; padding: 15.7rem 8.8rem 9.5rem; }
.hero-text { width: 67.2rem; }
.hero h1 { font-size: 8rem; line-height: 8.8rem; font-weight: 900; color: var(--blue); }
.hero p { width: 63rem; margin-top: 3.6rem; font-size: 2.4rem; line-height: 3.2rem; font-weight: 200; }
.hero p b { font-weight: 500; }
.hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36.6rem;
  height: 7.2rem;
  margin-top: 4rem;
  border-radius: 99rem;
  background-color: var(--btn);
  box-shadow: inset 0 0.4rem 1.26rem #ffffff;
}
.hero-btn:hover { box-shadow: inset 0 0.4rem 1.26rem #ffffff, 0 0.8rem 2rem rgba(0, 138, 251, 0.45); }
.hero-btn img { width: 17.2rem; height: 4rem; }
.hero-art { position: absolute; left: 74.7rem; top: 9.3rem; width: 63.15rem; height: 67.7rem; }
.hero-art img { width: 100%; height: 100%; }
@media (max-width: 1024px) {
  .hero-inner { min-height: 0; padding: 12rem 4rem 6rem; }
  .hero-text { width: 100%; }
  .hero h1 { font-size: 6.4rem; line-height: 7.2rem; }
  .hero p { width: 100%; }
  .hero-art { position: relative; left: auto; top: auto; margin: 4rem auto 0; width: 63.15rem; max-width: 100%; height: auto; }
  .hero-art img { height: auto; }
}
@media (max-width: 640px) {
  .hero .bg-tex { left: -73rem; top: 0; width: 183.6rem; height: 122.4rem; }
  .hero-inner { padding: 12.2rem 2rem 4rem; }
  .hero h1 { font-size: 5.2rem; line-height: 6.4rem; }
  .hero p { margin-top: 3.6rem; font-size: 2rem; line-height: 2.8rem; }
  .hero-btn { width: 100%; margin-top: 3.6rem; }
  .hero-art { margin: 2.4rem 0 0; width: 33.6rem; }
}
/* /stp:hero */
/* stp:how-it-works */
.how { background: linear-gradient(180deg, #e08f33 0%, #f8d0a2 100%); }
.how .bg-tex { left: -12.2rem; top: -12.3rem; width: 168.4rem; height: 112.2rem; }
.how-inner { position: relative; z-index: 1; max-width: 144rem; margin: 0 auto; padding: 10rem 9.4rem 10rem 10.6rem; }
.how h2 { font-size: 6.4rem; line-height: 7rem; font-weight: 700; text-align: center; }
.how-cols { display: flex; align-items: center; gap: 4.8rem; margin-top: 5.2rem; }
.how-text { width: 56.6rem; flex: none; }
.how-text p, .how-list { font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.how-text p + p { margin-top: 3.2rem; }
.how-list { width: 62.6rem; padding-left: 3.6rem; list-style: disc; }
.how-slogan { margin-top: 2.4rem; font-size: 3.2rem; line-height: 3.2rem; font-weight: 400; text-align: center; }
.how-mascot { position: absolute; right: 6.3rem; top: 5.4rem; width: 21rem; height: 25rem; }
@media (max-width: 1024px) {
  .how-inner { padding: 8rem 4rem; }
  .how-cols { flex-direction: column; align-items: stretch; gap: 3.2rem; }
  .how-text, .how-list { width: 100%; }
  .how-slogan { margin-top: 4rem; }
  .how-mascot { position: relative; right: auto; top: auto; margin: 4rem auto 0; }
}
@media (max-width: 640px) {
  .how .bg-tex { left: -84.5rem; top: -12.3rem; width: 207rem; height: 137.9rem; }
  .how-inner { padding: 6.4rem 2rem 8rem; }
  .how h2 { font-size: 4.4rem; line-height: 5.2rem; text-align: left; color: #ffffff; }
  .how-cols { gap: 2.4rem; margin-top: 4rem; }
  .how-text p, .how-list { font-size: 2rem; line-height: 2.8rem; }
  .how-list { padding-left: 3rem; }
  .how-slogan { display: none; }
  .how-mascot { margin: 2.4rem auto 0; }
}
/* /stp:how-it-works */
/* stp:footer */
.footer { background: var(--footer); border-top: 0.4rem solid var(--btn); color: #ffffff; padding: 3.2rem 2rem 3.6rem; }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: 2rem; }
.footer .logo { width: 23rem; color: #ffffff; }
.footer-copy { font-size: clamp(14px, 1.4rem, 1.4rem); line-height: 2rem; font-weight: 400; text-align: center; white-space: nowrap; }
.footer-links { display: flex; gap: 3.2rem; }
.footer-links a { font-size: clamp(14px, 1.6rem, 1.6rem); line-height: 2.4rem; font-weight: 400; white-space: nowrap; }
.footer-links a:hover { color: #5cc4ff; }
@media (max-width: 1024px) {
  .footer-inner { flex-wrap: wrap; }
  .footer .logo { width: auto; }
}
@media (max-width: 640px) {
  .footer { padding: 6rem 2.4rem 6.4rem; }
  .footer-inner { flex-direction: column; gap: 2rem; }
  .footer-copy { white-space: normal; }
}
/* /stp:footer */
/* stp:why-play */
.why { background: linear-gradient(180deg, #8cd2ff 0%, #ffffff 78%); }
.why-inner { position: relative; max-width: 144rem; margin: 0 auto; padding: 10rem 8.8rem; }
.why-mascot { position: absolute; z-index: 0; left: 4.8rem; top: 9.3rem; width: 49.3rem; height: 49.3rem; }
.why-copy { position: relative; z-index: 1; width: 84.7rem; margin-left: 41.7rem; }
.why h2 { font-size: 6.4rem; line-height: 7rem; font-weight: 700; color: var(--blue); }
.why p { font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.why-copy p { margin-top: 5.2rem; }
.why-p2 { position: relative; z-index: 1; width: 87.4rem; margin: 2.8rem 0 0 8rem; }
@media (max-width: 1024px) {
  .why-inner { padding: 8rem 4rem; }
  .why-mascot { position: relative; left: auto; top: auto; width: 40rem; height: 40rem; margin: 0 auto 3rem; }
  .why-copy { width: 100%; margin: 0; }
  .why-p2 { width: 100%; margin: 2.8rem 0 0; }
}
@media (max-width: 640px) {
  .why-inner { display: flex; flex-direction: column; padding: 6.4rem 2rem; }
  .why-copy { display: contents; }
  .why h2 { order: 1; font-size: 4.4rem; line-height: 5.2rem; font-weight: 600; }
  .why p { font-size: 2rem; line-height: 2.8rem; }
  .why-copy p { order: 2; margin-top: 4rem; }
  .why-mascot { order: 3; align-self: flex-start; width: 28.5rem; height: 28.5rem; margin: -0.7rem 0 -2.4rem; }
  .why-p2 { order: 4; width: 100%; margin: 0; }
}
/* /stp:why-play */
/* stp:rewards */
.rewards { background: linear-gradient(180deg, #ffffff 15%, #e2d7ed 100%); }
.rewards-inner { max-width: 144rem; margin: 0 auto; padding: 10rem 9.6rem; }
.rewards h2 { max-width: 107.8rem; margin: 0 auto; font-size: 6.4rem; line-height: 7rem; font-weight: 700; text-align: center; }
.rewards-text { max-width: 107.8rem; margin: 5.2rem auto 0; text-align: center; font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.rewards-text p + p { margin-top: 3.2rem; }
.rewards-img { position: relative; display: block; margin-top: 3.2rem; aspect-ratio: 1248 / 702; border-radius: 3rem; overflow: hidden; }
.rewards-img img { width: 100%; height: 100%; object-fit: cover; }
.rewards-img::after { content: ''; position: absolute; inset: 0; border: 2rem solid #d49dee; border-radius: 3rem; }
.rewards-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.2rem 4.8rem; max-width: 102rem; margin: 4rem auto 0; }
.rewards-list li { display: flex; align-items: center; gap: 1.6rem; font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.rewards-list img { flex: none; width: 3.6rem; height: 4.3rem; }
@media (max-width: 1024px) {
  .rewards-inner { padding: 8rem 4rem; }
  .rewards-list { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .rewards-inner { padding: 6.4rem 2rem; }
  .rewards h2 { font-size: 4.4rem; line-height: 5.2rem; font-weight: 600; }
  .rewards-text { margin-top: 4rem; font-size: 2rem; line-height: 2.8rem; }
  .rewards-img { margin-top: 2.4rem; aspect-ratio: 335 / 378; border-radius: 2rem; }
  .rewards-img::after { border-width: 1.2rem; border-radius: 2rem; }
  .rewards-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 2rem; margin-top: 2.4rem; }
  .rewards-list li { gap: 1.6rem; font-size: 2rem; line-height: 2.8rem; font-weight: 400; }
  .rewards-list span { flex: 1; text-align: center; }
  .rewards-list img { width: 3.5rem; }
}
/* /stp:rewards */
/* stp:custom-sets */
.custom { background: #ffffff; }
.custom-bg { position: absolute; z-index: 0; left: -9.2rem; top: -2.1rem; width: 162.4rem; height: 89.2rem; max-width: none; object-fit: cover; opacity: 0.45; pointer-events: none; }
.custom-inner { position: relative; z-index: 1; max-width: 144rem; margin: 0 auto; padding: 10rem; }
.custom-inner h2, .custom-text { width: 84.7rem; }
.custom h2 { font-size: 6.4rem; line-height: 7rem; font-weight: 700; }
.custom-text { margin-top: 5.2rem; font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.custom-text p + p { margin-top: 2.8rem; }
.custom-mascot { position: absolute; left: 104.1rem; top: 9.5rem; width: 31rem; height: 44.9rem; }
@media (max-width: 1024px) {
  .custom-inner { padding: 8rem 4rem; }
  .custom-inner h2, .custom-text { width: 100%; }
  .custom-mascot { position: relative; left: auto; top: auto; display: block; margin: 4rem auto 0; width: 31rem; }
}
@media (max-width: 640px) {
  .custom-bg { left: -103.7rem; top: -0.9rem; width: 245rem; height: 121.9rem; }
  .custom-inner { padding: 6.4rem 2rem; }
  .custom h2 { font-size: 4.4rem; line-height: 5.2rem; }
  .custom-text { margin-top: 4rem; font-size: 2rem; line-height: 2.8rem; }
  .custom-mascot { margin: 2.4rem auto 0; width: 28.6rem; height: 41.4rem; }
}
/* /stp:custom-sets */
/* stp:features */
.features { background: linear-gradient(180deg, #cccde6 0%, #ffffff 100%); }
.feat-inner { position: relative; max-width: 144rem; height: 105rem; margin: 0 auto; }
.feat-copy { position: relative; z-index: 1; width: 64.1rem; margin-left: 71.1rem; padding-top: 10rem; }
.features h2 { font-size: 6.4rem; line-height: 7rem; font-weight: 700; margin-bottom: 5.2rem; }
.feat-copy p, .feat-list { font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.feat-copy p + p { margin-top: 2.8rem; }
.feat-list { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; padding-left: 3.6rem; list-style: disc; }
.feat-phone { position: absolute; left: 8.8rem; top: 29.8rem; width: 58.7rem; height: 76.3rem; }
.feat-frog { position: absolute; left: 20.4rem; top: 3.6rem; width: 35.7rem; height: 26.2rem; }
@media (max-width: 1024px) {
  .feat-inner { height: auto; padding: 8rem 4rem 0; }
  .feat-copy { width: 100%; margin: 0; padding-top: 0; }
  .feat-media { display: flex; flex-direction: column; align-items: center; margin-top: 4rem; }
  .feat-phone, .feat-frog { position: static; }
  .feat-frog { margin-left: -6rem; }
}
@media (max-width: 640px) {
  .feat-inner { padding: 6.4rem 2rem 0; }
  .features h2 { font-size: 4.4rem; line-height: 5.2rem; margin-bottom: 4rem; }
  .feat-copy p, .feat-list { font-size: 2rem; line-height: 2.8rem; }
  .feat-list { margin-top: 2.4rem; padding-left: 3rem; }
  .feat-media { align-items: flex-start; margin-top: 2.4rem; }
  .feat-frog { width: 26.3rem; height: 19.3rem; margin-left: 2.7rem; }
  .feat-phone { width: 33.5rem; height: 43.5rem; }
}
/* /stp:features */
/* stp:details */
.details { background: linear-gradient(180deg, #ffffff 20%, #8bd1fe 100%); }
.details-inner { position: relative; max-width: 144rem; min-height: 89.4rem; margin: 0 auto; padding: 10rem 11.6rem; }
.details h2 { font-size: 6.4rem; line-height: 7rem; font-weight: 700; text-align: center; }
.facts { display: flex; flex-direction: column; gap: 3.2rem; max-width: 54rem; margin-top: 5.2rem; }
.facts li { display: flex; align-items: flex-start; gap: 4.8rem; }
.facts li.facts-mid { align-items: center; }
.facts img { flex: none; }
.facts p { font-size: 2.4rem; line-height: 3.2rem; font-weight: 300; }
.facts b { font-weight: 500; }
.piece-rot { position: relative; flex: none; width: 5.9rem; height: 3.8rem; }
.piece-rot img { position: absolute; left: 1.05rem; top: -1.05rem; width: 3.8rem; height: 5.9rem; transform: rotate(90deg); }
.facts img[width="55"] { width: 5.5rem; height: 5.6rem; }
.facts img[width="56"] { width: 5.6rem; height: 5.4rem; }
.facts img[width="54"] { width: 5.4rem; height: 5.4rem; }
.details-mascot { position: absolute; left: 92.3rem; top: 20.6rem; width: 40rem; height: 58.8rem; }
@media (max-width: 1024px) {
  .details-inner { min-height: 0; padding: 8rem 4rem; }
  .details-mascot { position: relative; left: auto; top: auto; display: block; margin: 4rem auto 0; }
}
@media (max-width: 640px) {
  .details-inner { padding: 6.4rem 2rem; }
  .details h2 { font-size: 4.4rem; line-height: 5.2rem; text-align: left; }
  .facts { max-width: none; margin-top: 4rem; }
  .facts li { gap: 2.4rem; }
  .facts p { font-size: 2rem; line-height: 2.8rem; }
  .details-mascot { margin: 2.4rem auto 0; width: 30.4rem; height: 44.7rem; }
}
/* /stp:details */
/* stp:legal */
.legal-body { min-height: 100vh; display: flex; flex-direction: column; }
.legal-main { flex: 1 0 auto; padding-top: 8.6rem; }
.legal-page { padding: 8rem 8.8rem; }
.legal-content { max-width: 126.4rem; margin: 0 auto; display: flex; flex-direction: column; font-size: 2rem; line-height: 2.8rem; font-weight: 400; color: var(--ink); }
.legal-content > * + * { margin-top: 0; }
.legal-content h1 { margin-bottom: 6rem; font-size: 3.2rem; line-height: 4rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.legal-content h2 { margin-top: 2.8rem; font-size: 2.4rem; line-height: 3.2rem; font-weight: 700; }
.legal-content h3 { margin-top: 2rem; font-size: 2.2rem; line-height: 3rem; font-weight: 700; }
.legal-content h4 { margin-top: 2rem; font-size: 2rem; line-height: 2.8rem; font-weight: 700; }
.legal-content p { font-size: 2rem; line-height: 2.8rem; }
.legal-content ul, .legal-content ol { padding-left: 3.2rem; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { font-size: 2rem; line-height: 2.8rem; }
.legal-content strong, .legal-content b { font-weight: 700; }
.legal-content em, .legal-content i { font-style: italic; }
.legal-content u { text-decoration: underline; }
.legal-content a { text-decoration: underline; text-underline-offset: 0.3rem; }
.legal-content a:hover { color: var(--blue); }
@media (max-width: 1024px) {
  .legal-page { padding: 6rem 4rem; }
}
@media (max-width: 640px) {
  .legal-main { padding-top: 8.6rem; }
  .legal-page { padding: 6rem 2rem 4rem; }
  .legal-content h1 { margin-bottom: 4rem; }
}
/* /stp:legal */
/* stp:title-anim */
.ta-w { display: inline-block; white-space: nowrap; }
.anim-on .ta-hero .ta-w {
  --k: 1;
  transform-origin: 50% 60%;
  animation: ta-snap 0.9s cubic-bezier(0.3, 1.45, 0.5, 1) calc(0.9s + var(--i) * 0.14s) both;
}
.anim-on .ta-hero .ta-w.ta-acc {
  animation: ta-snap 0.9s cubic-bezier(0.3, 1.45, 0.5, 1) calc(0.9s + var(--i) * 0.14s) both, ta-fit 6s ease-in-out calc(3.2s + var(--i) * 0.14s) infinite;
}
@keyframes ta-snap {
  0% { opacity: 0; transform: translate(calc(var(--dx) * var(--k)), calc(var(--dy) * var(--k))) rotate(var(--r)) scale(0.85); filter: drop-shadow(0 1.2rem 1.2rem rgba(0, 111, 183, 0.35)); color: var(--btn-hover); }
  45% { opacity: 1; }
  70% { transform: translate(0, 0) rotate(0) scale(1.08); filter: drop-shadow(0 0 0.8rem rgba(0, 138, 251, 0.55)); color: var(--btn); }
  85% { transform: scale(0.97); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgba(0, 138, 251, 0)); }
}
@keyframes ta-fit {
  0%, 86%, 100% { transform: none; color: var(--blue); }
  89% { transform: rotate(-6deg) translateY(-0.4rem); color: var(--btn); }
  92% { transform: rotate(5deg) translateY(-0.4rem); }
  95% { transform: rotate(-2deg) scale(1.04); }
  98% { transform: none; color: var(--blue); }
}
.anim-on .ta-sec { perspective: 60rem; }
.anim-on .ta-sec .ta-w { opacity: 0; transform-origin: 50% 0; }
.anim-on .ta-sec.is-in .ta-w { animation: ta-page 0.75s cubic-bezier(0.25, 1.3, 0.5, 1) calc(var(--i) * 0.08s) both; }
@keyframes ta-page {
  0% { opacity: 0; transform: rotateX(-95deg) translateY(-0.6rem); color: var(--accent); }
  40% { opacity: 1; }
  70% { transform: rotateX(12deg); color: var(--accent); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .anim-on .ta-hero .ta-w { --k: 0.45; animation-duration: 0.75s; }
  .anim-on .ta-sec.is-in .ta-w { animation-duration: 0.6s; }
}
/* /stp:title-anim */