/* =====================================================================
   Public-site motion and polish. Loaded only by the public layout, and every
   rule is scoped to .site-public, so the admin panel and login are untouched.
   ===================================================================== */
.site-public { --ease: cubic-bezier(.22, 1, .36, 1); }
.site-public main { animation: page-in .6s var(--ease) both; }
@keyframes page-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Scroll progress bar */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; background: linear-gradient(90deg, var(--brand), #ffb27a); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Header gains a soft shadow once you scroll; nav links get a sliding underline */
.site-public .site-header { transition: box-shadow .3s ease, background .3s ease; }
.site-public .site-header.is-scrolled { box-shadow: 0 10px 30px rgba(20, 22, 26, .08); background: rgba(255, 255, 255, .97); }
@media (min-width: 821px) {
    .site-public .nav > a:not(.btn):not(.nav-login), .site-public .nav-dropdown-toggle { position: relative; }
    .site-public .nav > a:not(.btn):not(.nav-login)::after, .site-public .nav-dropdown-toggle::before {
        content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
        background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease);
    }
    .site-public .nav > a:not(.btn):not(.nav-login):hover::after, .site-public .nav-dropdown-toggle:hover::before { transform: scaleX(1); }
}
.site-public .nav-cta { animation: cta-pulse 2.8s ease-in-out infinite; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 6px 18px rgba(255, 117, 15, .35), 0 0 0 0 rgba(255, 117, 15, .35); } 50% { box-shadow: 0 6px 18px rgba(255, 117, 15, .35), 0 0 0 10px rgba(255, 117, 15, 0); } }

/* Buttons: light sweep on hover, satisfying press */
.site-public .btn { position: relative; overflow: hidden; isolation: isolate; }
.site-public .btn-primary::after, .site-public .btn-whatsapp::after {
    content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: transform .7s var(--ease);
}
.site-public .btn-primary:hover::after, .site-public .btn-whatsapp:hover::after { transform: translateX(120%) skewX(-20deg); }
.site-public .btn:active { transform: translateY(1px) scale(.98); }

/* Hero: subtle language alphabet drift, the eyebrow shimmers, tiles float */
.site-public .hero { position: relative; overflow: hidden; }
.site-public .hero::before, .site-public .hero::after { content: none; display: none; }
.site-public .alphabet-motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.site-public .alphabet-motion span {
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
    padding: .3rem .56rem; border: 1px solid rgba(17, 24, 39, .08); border-radius: 999px;
    background: rgba(255, 255, 255, .52); color: rgba(17, 24, 39, .16); backdrop-filter: blur(4px);
    font-size: clamp(.82rem, 1.35vw, 1.12rem); font-weight: 900; line-height: 1;
    box-shadow: 0 10px 26px rgba(17, 24, 39, .05);
    animation: alphabet-drift 10s ease-in-out infinite; animation-delay: calc(var(--i) * -0.75s);
}
@keyframes alphabet-drift {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); opacity: .42; }
    50% { transform: translate(-50%, -50%) translateY(-14px); opacity: .72; }
}
.site-public .hero-inner { position: relative; z-index: 1; }
.site-public .eyebrow { position: relative; overflow: hidden; }
.site-public .eyebrow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8), transparent 70%); transform: translateX(-100%); animation: shine 4s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Ticker of what we teach and help with */
.site-public .ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0; background: #fff; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.site-public .ticker-track { display: flex; gap: 48px; width: max-content; animation: ticker 32s linear infinite; }
.site-public .ticker:hover .ticker-track { animation-play-state: paused; }
.site-public .ticker span { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); opacity: .85; white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.site-public .ticker span::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Scroll reveal. Elements are tagged by site.js. It uses the individual translate and scale
   properties so it never fights the hover transforms, and it falls back to visible after 3s. */
.site-public.reveal-ready .rv { opacity: 0; translate: 0 26px; scale: .98; transition: opacity .7s var(--ease), translate .7s var(--ease), scale .7s var(--ease); transition-delay: var(--d, 0ms); animation: rv-fallback .01s 3s forwards; }
.site-public.reveal-ready .rv.is-in { opacity: 1; translate: 0 0; scale: 1; animation: none; }
.site-public.reveal-ready .hero-tile.rv.is-in { animation: float 6s ease-in-out 1.1s infinite; }
.site-public.reveal-ready .hero-tile.t2.rv.is-in, .site-public.reveal-ready .hero-tile.t5.rv.is-in { animation-duration: 7.5s; animation-delay: 1.6s; }
.site-public.reveal-ready .hero-tile.t3.rv.is-in { animation-duration: 6.8s; animation-delay: 2.1s; }
.site-public .hero-tile:hover { animation-play-state: paused; }
@keyframes rv-fallback { to { opacity: 1; translate: 0 0; scale: 1; } }

/* Cards: lift, orange edge and an image zoom */
.site-public .card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease; }
.site-public .course:hover, .site-public .contact-item:hover, .site-public .admission-service-card:hover, .site-public .quick-link:hover {
    transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20, 22, 26, .12); border-color: rgba(255, 117, 15, .5);
}
.site-public .why { padding: 22px; border-radius: var(--radius); border: 1px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease; }
.site-public .why:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20, 22, 26, .1); border-color: rgba(255, 117, 15, .4); }
.site-public .why:hover .why-num { color: var(--brand); opacity: 1; }
.site-public .why-num { transition: color .3s ease, opacity .3s ease; }
.site-public .admission-teaser-card img, .site-public .admission-hero-cover { transition: transform .8s var(--ease); }
.site-public .admission-teaser-card:hover img { transform: scale(1.06); }
.site-public .admission-teaser-card { overflow: hidden; }
.site-public .ticks li::before { transition: transform .3s var(--ease); }
.site-public .ticks li:hover::before { transform: scale(1.25) rotate(8deg); }

/* Section headings get a little orange bar that draws in */
.site-public .section-head h2::after, .site-public .page-hero h1::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--brand); }
.site-public.reveal-ready .section-head h2::after, .site-public.reveal-ready .page-hero h1::after { width: 0; transition: width .9s var(--ease) .3s; }
.site-public.reveal-ready .section-head h2.is-in::after, .site-public.reveal-ready .page-hero h1.is-in::after { width: 56px; }

/* Quick-link cards with icon chips */
.site-public .quick-link { gap: 16px; justify-content: flex-start; padding: 22px 24px; }
.site-public .ql-icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; background: var(--brand-tint); color: var(--brand-dark); transition: background .3s ease, color .3s ease, transform .4s var(--ease); }
.site-public .quick-link:hover .ql-icon { background: var(--brand); color: #fff; transform: rotate(-8deg) scale(1.08); }
.site-public .ql-text { display: flex; flex-direction: column; gap: 4px; }
.site-public .ql-text .link { display: inline-block; transition: transform .3s var(--ease); }
.site-public .quick-link:hover .ql-text .link { transform: translateX(6px); }

/* Teacher avatar, WhatsApp button glow */
.site-public .t-avatar { transition: transform .5s var(--ease); }
.site-public .glass-card:hover .t-avatar { transform: scale(1.06) rotate(-3deg); }
.site-public .btn-whatsapp { animation: wa-glow 3s ease-in-out infinite; }
@keyframes wa-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(37, 211, 102, .35); } 50% { box-shadow: 0 10px 30px rgba(37, 211, 102, .6); } }

/* Floating WhatsApp button */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25d366; box-shadow: 0 10px 28px rgba(37, 211, 102, .5); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.wa-float:hover { transform: scale(1.1) rotate(-6deg); }
.wa-float::before, .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-ring 2.4s ease-out infinite; }
.wa-float::after { animation-delay: 1.2s; }
@keyframes wa-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }

/* Dropdown panel eases open */
.site-public .nav-item.dropdown.open .nav-dropdown-panel { animation: pop-in .25s var(--ease); }
@keyframes pop-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 820px) {
    .site-public .alphabet-motion span { opacity: .55; padding: .24rem .46rem; font-size: .78rem; }
    .site-public .alphabet-motion span:nth-child(n+8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-public *, .site-public *::before, .site-public *::after, .wa-float, .wa-float::before, .wa-float::after { animation: none !important; transition: none !important; }
    .site-public.reveal-ready .rv { opacity: 1; translate: 0 0; scale: 1; }
    .scroll-progress { display: none; }
}