/* =========================================================
   TUTOR MONK — MOTION LAYER
   Site-wide animation system. Everything is progressive:
   elements are only hidden once motion.js adds .tmm-ready.
   All of it is disabled under prefers-reduced-motion.
========================================================= */
:root{
  --tmm-ease:cubic-bezier(.22,1,.36,1);
  --tmm-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- scroll progress bar ---------- */
.tmm-progress{position:fixed;top:0;left:0;height:4px;width:100%;z-index:10001;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#f47b34,#ffb347,#0874d9,#f47b34);background-size:300% 100%;animation:tmm-bar 4s linear infinite;pointer-events:none}
@keyframes tmm-bar{to{background-position:300% 0}}

/* ---------- page loader ---------- */
.tmm-loader{position:fixed;inset:0;z-index:10002;display:grid;place-items:center;background:#092b52;transition:opacity .6s var(--tmm-ease),visibility .6s,transform .8s var(--tmm-ease)}
.tmm-loader.tmm-done{opacity:0;visibility:hidden;transform:translateY(-100%)}
.tmm-loader-ring{width:74px;height:74px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:#f47b34;border-right-color:#0874d9;animation:tmm-spin .9s linear infinite}
@keyframes tmm-spin{to{transform:rotate(360deg)}}

/* ---------- cursor glow + dot ---------- */
.tmm-glow{position:fixed;top:0;left:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(244,123,52,.10),rgba(244,123,52,.04) 45%,transparent 70%);will-change:transform}
.tmm-dot{position:fixed;top:0;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#f47b34;pointer-events:none;z-index:10003;
  transition:width .25s var(--tmm-ease),height .25s var(--tmm-ease),margin .25s var(--tmm-ease),background .25s,opacity .25s;will-change:transform}
.tmm-dot.tmm-hover{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(244,123,52,.22);border:2px solid #f47b34}

/* ---------- scroll reveal (6 flavours) ---------- */
.tmm-ready [data-tmm]{opacity:0;transition:opacity .9s var(--tmm-ease),transform .9s var(--tmm-ease),filter .9s var(--tmm-ease);
  transition-delay:var(--tmm-delay,0ms);will-change:transform,opacity}
.tmm-ready [data-tmm="up"]{transform:translateY(60px)}
.tmm-ready [data-tmm="down"]{transform:translateY(-50px)}
.tmm-ready [data-tmm="left"]{transform:translateX(-80px)}
.tmm-ready [data-tmm="right"]{transform:translateX(80px)}
.tmm-ready [data-tmm="zoom"]{transform:scale(.8)}
.tmm-ready [data-tmm="flip"]{transform:perspective(900px) rotateX(-28deg) translateY(40px);transform-origin:50% 100%}
.tmm-ready [data-tmm="blur"]{transform:translateY(30px);filter:blur(14px)}
.tmm-ready [data-tmm].tmm-in{opacity:1;transform:none;filter:none}

/* ---------- heading word-by-word reveal ---------- */
.tmm-words .tmm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.tmm-words .tmm-w>span{display:inline-block;transform:translateY(110%) rotate(6deg);opacity:0;
  transition:transform .85s var(--tmm-ease),opacity .85s var(--tmm-ease);transition-delay:calc(var(--i)*70ms)}
.tmm-words.tmm-in .tmm-w>span{transform:none;opacity:1}

/* ---------- animated underline on section headings ---------- */
.tmm-underline{position:relative;display:inline-block}
.tmm-underline::after{content:"";position:absolute;left:0;bottom:-8px;height:5px;border-radius:5px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#f47b34,#0874d9);transition:transform 1s var(--tmm-ease) .5s}
.tmm-underline.tmm-in::after{transform:scaleX(.35)}

/* ---------- header ---------- */
.custom-header{transition:padding .4s var(--tmm-ease),box-shadow .4s,background .4s,transform .5s var(--tmm-ease)!important}
.custom-header.tmm-scrolled{padding-top:8px!important;padding-bottom:8px!important;box-shadow:0 10px 34px rgba(9,43,82,.14);background:rgba(255,255,255,.95)!important}
.custom-header.tmm-scrolled .logo img{height:52px}
.logo img{transition:height .4s var(--tmm-ease),transform .4s var(--tmm-spring)}
.logo a:hover img{transform:scale(1.07) rotate(-2deg)}
.custom-header.tmm-hide{transform:translateY(-110%)}
.nav-menu>a,.nav-menu .dropdown-link{position:relative}
.nav-menu>a::after,.nav-menu .dropdown-link::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:#f47b34;transform:scaleX(0);transition:transform .35s var(--tmm-ease)}
.nav-menu>a:hover::after,.nav-menu .dropdown-link:hover::after{transform:scaleX(1)}
.submenu{transform-origin:top center}
@media (min-width:993px){.dropdown:hover .submenu{animation:tmm-drop .45s var(--tmm-ease) both}}
.submenu a{transition:transform .3s var(--tmm-ease),padding .3s}
.submenu a:hover{transform:translateX(8px)}
@keyframes tmm-drop{from{opacity:0;transform:translateX(-50%) translateY(-14px) scaleY(.85)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.dropdown-arrow{transition:transform .35s var(--tmm-ease)}
.dropdown:hover .dropdown-arrow{transform:rotate(180deg)}

/* ---------- buttons: ripple, shine, pulse ---------- */
.tmk-btn,.custom-btn,.tmk-main-btn,.tmk-outline-btn,.tmk-final-button,.tmk-control-btn{position:relative;overflow:hidden;
  transition:transform .35s var(--tmm-spring),box-shadow .35s}
.free-class-btn{position:relative;overflow:hidden}
.tmk-btn:hover,.custom-btn:hover,.tmk-main-btn:hover,.tmk-final-button:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 34px rgba(244,123,52,.38)}
.tmk-btn:active,.custom-btn:active,.tmk-main-btn:active{transform:scale(.95)}
.free-class-btn:hover{transform:translateY(-3px)}
.tmm-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:tmm-rip .7s ease-out forwards;pointer-events:none}
@keyframes tmm-rip{to{transform:scale(4);opacity:0}}
.tmk-final-button,.tmk-main-btn{animation:tmm-pulse 2.6s ease-in-out infinite}
@keyframes tmm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(244,123,52,.55)}50%{box-shadow:0 0 0 16px rgba(244,123,52,0)}}

/* ---------- 3D tilt cards with moving spotlight ---------- */
.tmm-tilt{transform-style:preserve-3d;transition:transform .5s var(--tmm-ease),box-shadow .5s;will-change:transform;position:relative}
.tmm-tilt.tmm-tilting{transition:transform .08s linear,box-shadow .5s}
.tmm-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light}
.tmm-tilt:hover::before{opacity:1}
.tmm-tilt:hover{box-shadow:0 30px 60px rgba(9,43,82,.22)}
.tmm-tilt .tmk-card-icon,.tmm-tilt .tmk-subject-icon,.tmm-tilt .tmk-process-number,.tmm-tilt .tmk-card-number{transition:transform .5s var(--tmm-spring);transform:translateZ(0)}
.tmm-tilt:hover .tmk-card-icon,.tmm-tilt:hover .tmk-subject-icon{transform:translateZ(40px) scale(1.18) rotate(-8deg)}
.tmm-tilt:hover .tmk-process-number,.tmm-tilt:hover .tmk-card-number{transform:translateZ(36px) scale(1.15)}
.tmk-subject-icon,.tmk-card-icon{animation:tmm-bob 4s ease-in-out infinite}
.tmk-subject-card:nth-child(2n) .tmk-subject-icon{animation-delay:-1.3s}
.tmk-subject-card:nth-child(3n) .tmk-subject-icon{animation-delay:-2.4s}
@keyframes tmm-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* tilt must not inherit the slow reveal transition once revealed */
.tmm-ready .tmm-tilt.tmm-in{transition:transform .5s var(--tmm-ease),box-shadow .5s,opacity .9s;transition-delay:0s}
.tmm-ready .tmm-tilt.tmm-in.tmm-tilting{transition:transform .08s linear,box-shadow .5s}

/* ---------- hero extras ---------- */
.tmk-hero{position:relative;overflow:hidden}
.tmm-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0;will-change:transform}
.tmm-orb--a{width:380px;height:380px;background:#f47b34;top:-80px;left:-100px;animation:tmm-orb 14s ease-in-out infinite}
.tmm-orb--b{width:440px;height:440px;background:#0874d9;bottom:-140px;right:-120px;opacity:.38;animation:tmm-orb 18s ease-in-out infinite reverse}
.tmm-orb--c{width:260px;height:260px;background:#ffd166;top:35%;left:48%;opacity:.35;animation:tmm-orb 11s ease-in-out infinite -4s}
@keyframes tmm-orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,50px) scale(1.2)}66%{transform:translate(-50px,80px) scale(.9)}}
.tmk-hero-inner,.tmk-hero-math{position:relative;z-index:1}
.tmk-math-symbol{will-change:transform}
.tmk-hero-eyebrow{display:inline-block;animation:tmm-eyebrow 3s ease-in-out infinite}
@keyframes tmm-eyebrow{0%,100%{letter-spacing:.06em}50%{letter-spacing:.16em}}
.tmk-hero-typed{color:#f47b34}
.tmm-parallax{will-change:transform}

/* ---------- cards / lists hover life ---------- */
.tmk-card,.tmk-course-card,.tmk-value-card,.tmk-subject-card,.tmk-process-card{transition:transform .5s var(--tmm-ease),box-shadow .5s,border-color .4s}
.tmk-faq-item{transition:transform .4s var(--tmm-ease),box-shadow .4s,background .4s}
.tmk-faq-item:hover{transform:translateX(10px);box-shadow:0 14px 34px rgba(9,43,82,.12)}
.tmk-faq-item[open]{animation:tmm-faq .5s var(--tmm-ease)}
@keyframes tmm-faq{from{transform:scale(.98)}to{transform:none}}
.tmk-socials a,.tmk-social{transition:transform .4s var(--tmm-spring)!important}
.tmk-social:hover{transform:translateY(-8px) rotate(10deg) scale(1.15)!important}
.tmk-footer-column a{transition:transform .3s var(--tmm-ease),color .3s}
.tmk-footer-column a:hover{transform:translateX(8px)}
.tmk-footer-contact{transition:transform .3s var(--tmm-ease)}
.tmk-footer-contact:hover{transform:translateX(6px)}
.tmk-footer{position:relative;overflow:hidden}
.tmk-footer::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#f47b34,#0874d9,#f47b34);background-size:300% 100%;animation:tmm-bar 5s linear infinite}

/* ---------- section dividers ---------- */
.tmk-final-cta{position:relative;overflow:hidden}
.tmk-final-cta::before,.tmk-final-cta::after{content:"";position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.07)}
.tmk-final-cta::before{width:340px;height:340px;top:-120px;left:-80px;animation:tmm-orb 16s ease-in-out infinite}
.tmk-final-cta::after{width:260px;height:260px;bottom:-90px;right:-60px;animation:tmm-orb 12s ease-in-out infinite reverse}

/* ---------- counters ---------- */
[data-tmm-count]{font-variant-numeric:tabular-nums}

/* ---------- inner pages (usa/canada/etc, login, dashboard) ---------- */
.tm-login-card{animation:tmm-card-in 1s var(--tmm-ease) both}
@keyframes tmm-card-in{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:none}}
.tm-login-card.tmm-tilt::before{display:none}
.tm-dashboard .tmm-glow{display:none}
.tm-dashboard-avatar{animation:tmm-bob 4s ease-in-out infinite}
.grade-card,.tmk-country-tab{transition:transform .4s var(--tmm-spring),box-shadow .4s}
.grade-card:hover,.tmk-country-tab:hover{transform:translateY(-6px) scale(1.03)}
.grade-content.active,.tmk-country-content.active{animation:tmm-swap .6s var(--tmm-ease) both}
@keyframes tmm-swap{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- back to top ---------- */
.tmm-top{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border:0;border-radius:50%;color:#fff;font-size:20px;z-index:9990;
  background:linear-gradient(135deg,#f47b34,#e66c2d);box-shadow:0 12px 28px rgba(244,123,52,.45);opacity:0;transform:translateY(30px) scale(.6);pointer-events:none;
  transition:opacity .4s,transform .5s var(--tmm-spring)}
.tmm-top.tmm-show{opacity:1;transform:none;pointer-events:auto}
.tmm-top:hover{transform:translateY(-6px) scale(1.1)}

/* ---------- reduced motion + touch ---------- */
@media (hover:none){.tmm-glow,.tmm-dot{display:none}}
@media (prefers-reduced-motion:reduce){
  .tmm-progress,.tmm-loader,.tmm-glow,.tmm-dot,.tmm-orb{display:none!important}
  .tmm-ready [data-tmm],.tmm-words .tmm-w>span{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}