/* ============================================================
   Homepage hero — animated live lesson (includes/home-hero-scene.php)
   ============================================================ */

/* The floating cards are positioned against this wrapper, so the subject tabs can sit below it */
.hm-hero-visual.hx-visual { padding: 0; }
.hx-stage-wrap { position: relative; padding: 28px 8px 36px 28px; }
@media (max-width: 640px) { .hx-stage-wrap { padding: 24px 0 28px; } }

.hm-hero-photo.hx-frame { background: #0b1324; aspect-ratio: 5 / 4; }

.hx-call {
    position: absolute; inset: 0;
    display: grid; grid-template-rows: 12% 1fr;
    container-type: size;
    background: radial-gradient(120% 80% at 80% 0%, #12304a 0%, #0b1324 60%);
    color: #e2e8f0;
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
}

/* top bar */
.hx-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 3cqw; min-width: 0; }
.hx-live {
    display: inline-flex; align-items: center; gap: 1.2cqw; flex-shrink: 0;
    padding: .9cqw 2cqw .9cqw 1.6cqw; border-radius: 99px; background: rgba(239, 68, 68, .16);
    font-weight: 800; font-size: 2.3cqw; letter-spacing: .08em; color: #fecaca;
}
.hx-live b { font-weight: 700; color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hx-live-dot { position: relative; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ef4444; }
.hx-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #ef4444; animation: hx-ping 1.4s ease-out infinite; }
@keyframes hx-ping { to { transform: scale(2.6); opacity: 0; } }
.hx-title { min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 2.5cqw; }
.hx-title-sub { color: #94a3b8; font-weight: 600; }
.hx-title-main { color: #fff; font-weight: 700; }
.hx-people { display: inline-flex; align-items: center; gap: .8cqw; flex-shrink: 0; font-weight: 700; font-size: 2.3cqw; color: #94a3b8; }
.hx-people svg { width: 3cqw; height: 3cqw; }

/* main */
.hx-main { position: relative; display: grid; grid-template-columns: 1fr 27%; gap: 2.4cqw; padding: 0 3cqw 3cqw; min-height: 0; }
.hx-board { position: relative; border-radius: 2.6cqw; background: #fff; overflow: hidden; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .35); }
.hx-board-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hx-hand { font: 700 40px 'Caveat', 'Outfit', cursive; fill: #0f172a; }
.hx-hand-mid { fill: #0f766e; }
.hx-hand-ans { fill: #b45309; font-size: 46px; }
.hx-note { font: 600 13px 'Plus Jakarta Sans', sans-serif; fill: #64748b; }
.hx-code { font: 600 12.5px ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace; fill: #e2e8f0; white-space: pre; }
.hx-out { font: 700 13px ui-monospace, Consolas, 'Courier New', monospace; fill: #0d9488; }
.hx-eng-label { font: 700 13px 'Plus Jakarta Sans', sans-serif; fill: #64748b; letter-spacing: .04em; text-transform: uppercase; }
.hx-eng { font: 700 23px 'Outfit', sans-serif; fill: #0f172a; }
.hx-eng-fix { font: 700 30px 'Caveat', 'Outfit', cursive; fill: #0d9488; }
.hx-eng-oktxt { font: 700 14px 'Plus Jakarta Sans', sans-serif; fill: #0f766e; }
.hx-sci-label { font: 700 14px 'Plus Jakarta Sans', sans-serif; fill: #334155; }

.hx-toast {
    position: absolute; left: 50%; top: 4%; transform: translate(-50%, -140%);
    padding: 1.2cqw 2.6cqw; border-radius: 99px; white-space: nowrap;
    background: #0f172a; color: #fff; font-size: 2.3cqw; font-weight: 600;
    box-shadow: 0 1cqw 3cqw rgba(15, 23, 42, .35); opacity: 0;
}
.hx-toast b { color: #fbbf24; }

.hx-course-link {
    position: absolute; right: 2.2cqw; bottom: 2.2cqw;
    display: inline-flex; align-items: center; gap: .8cqw;
    padding: 1.2cqw 2.2cqw; border-radius: 99px;
    background: #0d9488; color: #fff !important; text-decoration: none;
    font-size: 2.3cqw; font-weight: 700; white-space: nowrap;
    box-shadow: 0 .8cqw 2.4cqw rgba(13, 148, 136, .45);
    opacity: 0; transform: translateY(1.5cqw); pointer-events: none;
    transition: opacity .35s, transform .35s, background .2s;
}
.hx-course-link svg { width: 2.6cqw; height: 2.6cqw; transition: transform .2s; }
.hx-course-link.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hx-course-link:hover { background: #0f766e; }
.hx-course-link:hover svg { transform: translateX(.6cqw); }
.hx-course-link:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }

/* video tiles */
.hx-tiles { display: grid; grid-template-rows: 1fr 1fr; gap: 2.4cqw; min-height: 0; }
.hx-tile { position: relative; border-radius: 2.2cqw; overflow: hidden; background: #134e4a; box-shadow: inset 0 0 0 .4cqw transparent; transition: box-shadow .3s; }
.hx-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-tile.is-speaking { box-shadow: inset 0 0 0 .5cqw #5eead4; }
.hx-tag {
    position: absolute; left: 1.2cqw; bottom: 1.2cqw; padding: .5cqw 1.4cqw; border-radius: 99px;
    background: rgba(15, 23, 42, .65); color: #fff; font-size: 1.9cqw; font-weight: 700; white-space: nowrap;
}
.hx-speak { position: absolute; right: 1.4cqw; top: 1.4cqw; display: flex; gap: .4cqw; align-items: center; height: 2.4cqw; opacity: 0; transition: opacity .2s; }
.hx-speak i { width: .6cqw; height: 100%; border-radius: 1cqw; background: #5eead4; animation: hx-eq .8s ease-in-out infinite; }
.hx-speak i:nth-child(2) { animation-delay: -.3s; } .hx-speak i:nth-child(3) { animation-delay: -.55s; }
.hx-tile.is-speaking .hx-speak { opacity: 1; }
@keyframes hx-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* connecting overlay */
.hx-connect {
    position: absolute; inset: 0 3cqw 3cqw; border-radius: 2.6cqw;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw;
    background: #0f1b2e; color: #cbd5e1; font-size: 2.6cqw; font-weight: 600;
    opacity: 0; pointer-events: none;
}
.hx-spinner { width: 7cqw; height: 7cqw; border-radius: 50%; border: .8cqw solid rgba(94, 234, 212, .2); border-top-color: #5eead4; animation: hx-spin .9s linear infinite; }
@keyframes hx-spin { to { transform: rotate(360deg); } }

/* subject tabs under the screen */
.hx-tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: -14px 8px 0 28px; }
.hx-tab {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 8px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: #334155;
    font: 700 .86rem/1 var(--font-ui, 'Plus Jakarta Sans', sans-serif);
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .35);
    transition: background .25s, color .25s, transform .2s, border-color .25s;
}
.hx-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.hx-tab:hover { transform: translateY(-2px); border-color: #99f6e4; }
.hx-tab.is-on { background: #0f766e; color: #fff; border-color: #0f766e; }
.hx-tab-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fbbf24; }
.hx-tab:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
@media (max-width: 640px) {
    .hx-tabs { margin: -10px 0 0; gap: 6px; }
    .hx-tab { flex-direction: column; gap: 5px; padding: 9px 4px 11px; font-size: .74rem; border-radius: 12px; }
}

/* light sweep across the hero during the hand-off from the preloader */
.hx-sweep { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.hx-sweep::before {
    content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(253, 230, 138, .35) 55%, transparent);
    transform: translateX(-120%) skewX(-14deg); opacity: 0;
}
.hx-sweep.is-on::before { animation: hx-sweep 1.25s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes hx-sweep { 0% { opacity: 1; transform: translateX(-120%) skewX(-14deg); } 100% { opacity: 1; transform: translateX(400%) skewX(-14deg); } }

@media (prefers-reduced-motion: reduce) {
    .hx-live-dot::after, .hx-spinner, .hx-speak i { animation: none !important; }
    .hx-sweep { display: none; }
}

/* the "3 free trial classes" card moves to the bottom-left so the call's top bar stays clear */
.hx-visual .hm-float.hx-float-trial { top: auto; left: -14px; bottom: 14px; }
@media (max-width: 640px) { .hx-visual .hm-float.hx-float-trial { left: -4px; bottom: 6px; } }