/* LearnLingo Cinematic: additive layer (motion + UI polish). Safe to remove: deactivate the plugin. */

/* ---------- opening sequence (home hero): hidden only while JS is about to animate it (failsafe 5.2s) ---------- */
html.lx-pre .hero .hero-badge,html.lx-pre .hero .hero-title,html.lx-pre .hero .hero-sub,html.lx-pre .hero .hero-actions,
html.lx-pre .hero .pwa-install-row,html.lx-pre .hero .hero-visual{opacity:0}
.lx-lb{position:absolute;left:0;right:0;height:9vh;z-index:7;pointer-events:none;background:#05060f}
.lx-lb.t{top:0;transform-origin:top}.lx-lb.b{bottom:0;transform-origin:bottom}
.lx-streak{position:absolute;left:0;top:41%;width:58%;height:3px;z-index:8;pointer-events:none;opacity:0;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.95) 22%,#fff 50%,rgba(45,212,191,.9) 80%,transparent);box-shadow:0 0 22px 6px rgba(139,92,246,.6),0 0 90px 24px rgba(139,92,246,.28)}
.lx-flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 32% 45%,rgba(196,181,253,.8),rgba(139,92,246,.22) 42%,transparent 70%)}
.hero-title .lx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em}
.hero-title .lx-w>span{display:inline-block;will-change:transform}
.hero-title.lx-done .lx-w{overflow:visible}

/* ---------- kinetic section headings ---------- */
.lx-kin .lx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .16em;margin:0 -.05em -.16em}
.lx-kin .lx-w>span{display:inline-block;transform:translateY(112%);opacity:0;filter:blur(8px);transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .7s ease;transition-delay:calc(var(--i,0)*55ms)}
.lx-kin.lx-in .lx-w>span{transform:none;opacity:1;filter:none}
.lx-kin.lx-in.lx-done .lx-w{overflow:visible}
html.lx-fs .lx-kin .lx-w>span{transform:none;opacity:1;filter:none}

/* ---------- progress bar + nav ---------- */
.lx-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:99990;pointer-events:none;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#8B5CF6,#2DD4BF 60%,#F2B84B)}
nav.site-nav{transition:background .35s ease,box-shadow .35s ease,padding .3s ease}
html.lx-scrolled nav.site-nav{background:rgba(11,14,31,.88);box-shadow:0 14px 40px -22px rgba(0,0,0,.8)}
html.lx-scrolled nav.site-nav .nav-inner{padding-top:9px;padding-bottom:9px}
nav.site-nav .nav-inner{transition:padding .3s ease}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,#C4B5FD,#2DD4BF);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- light leak between chapters ---------- */
.lx-leak{position:fixed;top:-12%;bottom:-12%;left:0;width:55vw;z-index:79;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(139,92,246,.34) 34%,rgba(45,212,191,.28) 58%,rgba(242,184,75,.22) 80%,transparent)}

/* ---------- card spotlight (a real child element so it never fights existing ::before/::after) ---------- */
.lang-card,.plan-card,.feat-card,.roadmap-stage,.tutor-course-card{isolation:isolate}
.plan-card,.feat-card,.roadmap-stage,.tutor-course-card{position:relative}
.lx-spot{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.22),transparent 62%)}
.lang-card:hover>.lx-spot,.plan-card:hover>.lx-spot,.feat-card:hover>.lx-spot,.roadmap-stage:hover>.lx-spot,.tutor-course-card:hover>.lx-spot{opacity:1}
.plan-card.premium>.lx-spot{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(242,184,75,.2),transparent 62%)}

/* ---------- UI polish ---------- */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid #2DD4BF;outline-offset:3px;border-radius:8px}
@media(min-width:1180px){html body .lang-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:1179px){html body .lang-grid{grid-template-columns:repeat(2,1fr)}}
.btn{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .3s ease,border-color .3s ease,translate .25s cubic-bezier(.16,1,.3,1)}
.btn-primary:hover{box-shadow:0 14px 34px -8px rgba(139,92,246,.85)}
.btn-ghost:hover{border-color:#C4B5FD}
.plan-card.premium,.plan-card:not(.free){transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.plan-card:not(.free):hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(139,92,246,.55)}
.plan-badge{animation:lx-badge 3.2s ease-in-out infinite}
@keyframes lx-badge{50%{box-shadow:0 0 0 6px rgba(242,184,75,.16),0 0 28px rgba(242,184,75,.4)}}
.faq-item{transition:border-color .3s ease,background .3s ease,transform .3s ease}
.faq-item:hover{border-color:rgba(167,139,250,.55)}
.stats-bar .stat-num{font-variant-numeric:tabular-nums}
.step-num{transition:transform .5s cubic-bezier(.3,1.5,.4,1)}
.step:hover .step-num{transform:scale(1.12) rotate(-4deg)}
/* floating "Upgrade to Premium" pill: soft breathing glow */
.float-upgrade{animation:lx-breathe 3.6s ease-in-out infinite}
@keyframes lx-breathe{50%{box-shadow:0 0 0 8px rgba(242,184,75,.12),0 14px 40px -8px rgba(242,184,75,.55)}}


/* contrast fix: stage / tag labels on the light sections (light lavender and gold on near-white failed WCAG AA) */
.section-light .roadmap-stage-label.free,.section-light .lang-tag.free{color:#5B35C8;background:rgba(139,92,246,.14)}
.section-light .roadmap-stage-label.premium,.section-light .lang-tag.early{color:#7A4E00;background:rgba(242,184,75,.26)}

/* ---------- Tutor course cards ---------- */
.tutor-course-card{border-radius:18px!important;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease,translate .3s}
.tutor-course-card:hover{transform:translateY(-8px);border-color:rgba(167,139,250,.6)!important;box-shadow:0 34px 60px -30px rgba(139,92,246,.6)}
.tutor-course-card .tutor-card-footer .tutor-btn{transition:background .3s ease,box-shadow .3s ease,color .3s ease}
.tutor-course-card:hover .tutor-card-footer .tutor-btn{background:linear-gradient(135deg,#C4B5FD,#8B5CF6)!important;color:#180E33!important;border-color:transparent!important;box-shadow:0 10px 26px -8px rgba(139,92,246,.7)}
.lx-rv{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease;transition-delay:var(--d,0ms)}
.lx-rv.lx-in{opacity:1;transform:none}
.lx-rv.lx-in:hover{transition-delay:0ms}
.tutor-course-card.lx-rv.lx-in:hover{transform:translateY(-8px)}
html.lx-fs .lx-rv{opacity:1;transform:none}
.lx-cover{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1,#8B5CF6),var(--c2,#4C3A8A))}
.lx-cover::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.28),transparent 46%),radial-gradient(circle at 12% 92%,rgba(0,0,0,.35),transparent 55%)}
.lx-cover::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%)}
.lx-cover b{position:relative;z-index:1;font:800 clamp(54px,7vw,86px)/1 "Sora",system-ui,'Noto Sans JP','Noto Sans Devanagari',sans-serif;letter-spacing:-.03em;text-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.tutor-course-card:hover .lx-cover b{transform:scale(1.12) rotate(-3deg)}
.lx-cover em{position:absolute;z-index:1;left:14px;bottom:12px;padding:5px 12px;border-radius:99px;font:700 .72rem "JetBrains Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;background:rgba(5,6,15,.55);border:1px solid rgba(255,255,255,.28)}
.lx-cover i{position:absolute;z-index:1;left:14px;top:12px;font:700 .72rem "JetBrains Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.tutor-course-card .lx-hide{display:none!important}

/* ---------- cursor (same look as before: dot + ring, difference blend) ---------- */
.lx-cur,.lx-cur2{position:fixed;left:0;top:0;pointer-events:none;z-index:99991;border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s}
.lx-cur{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff}
.lx-cur2{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff}
.lx-cur2.big{width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(255,255,255,.18)}
body.lx-hc .lx-cur,body.lx-hc .lx-cur2{opacity:1}

/* ---------- page transitions (supporting browsers only) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lx-vt-out .28s ease both}
::view-transition-new(root){animation:lx-vt-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes lx-vt-out{to{opacity:0;filter:blur(6px)}}
@keyframes lx-vt-in{from{opacity:0;filter:blur(8px)}}

@media(prefers-reduced-motion:reduce){
  .lx-kin .lx-w>span,.lx-rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .plan-badge,.float-upgrade{animation:none}
  .lx-leak,.lx-cur,.lx-cur2,.lx-lb,.lx-streak,.lx-flash{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}