/* ============================================================================
   BTECH.LK — CIRCUIT LAB, the rest of the site
   ---------------------------------------------------------------------------
   Homepage එකේ භාෂාවම අනිත් පිටු වලට. එකම board එකේ තව modules — ඒත් පිටුවක්
   කියවන්න තියෙන එකක් නිසා චලනය අඩුයි, ව්‍යුහය තදයි.

   Scope: .bt-page (content pages) · .bt-catalog (courses) · .bt-auth (login,
   register) · .bt-course-auth (portal login/register, seminar ticket).
   Homepage එකට මේක බලපාන්නේ නෑ — ඒකට .bt-home layer එකේ specificity වැඩියි.
   ============================================================================ */

html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth) {
    --cl-void:      #04060C;
    --cl-void-2:    #070A12;
    --cl-copper:    #0E1626;
    --cl-signal:    var(--accent,  #1273FF);
    --cl-glow:      var(--accent2, #4C9BFF);
    --cl-silver:    #E8EEF9;
    --cl-mute:      #8FA0BD;
    --cl-dim:       #5D6D88;
    --cl-trace:     color-mix(in srgb, var(--cl-glow) 22%, transparent);
    --cl-halo:      color-mix(in srgb, var(--cl-signal) 42%, transparent);
    background: var(--cl-void);
}

/* the same substrate, quieter — content pages are for reading */
html body:is(.bt-page, .bt-catalog)::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--cl-glow) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cl-glow) 3%, transparent) 1px, transparent 1px);
    background-size: 62px 62px, 62px 62px;
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
}
/* Content sits above the substrate behind it. Written through :where() so the
   whole selector carries no specificity — with real specificity it outranked
   each element's own stacking and dropped the fixed navbar from z-index 900
   to 1, which let later sections paint over the open nav drawer. */
:where(html body:is(.bt-page, .bt-catalog)) > :where(*) { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   TYPE — the same voice as the landing page
   ══════════════════════════════════════════════════════════════ */
html body:is(.bt-page, .bt-catalog) :is(h1, .hero h1, .section-h, .page-header h1) {
    letter-spacing: -.045em; line-height: 1.1; font-weight: 800;
    background: linear-gradient(174deg, #fff 10%, #D8E3F5 55%, #8FA3C4 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html body:is(.bt-page, .bt-catalog) .eyebrow {
    display: inline-flex; align-items: center; gap: 9px; max-width: 380px;
    font-size: 10px; font-weight: 700; letter-spacing: .28em;
    text-transform: uppercase; color: var(--cl-glow);
}
html body:is(.bt-page, .bt-catalog) .eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cl-glow); box-shadow: 0 0 10px var(--cl-glow);
}
html body:is(.bt-page, .bt-catalog) .eyebrow::after {
    content: ''; flex: 1 1 auto; height: 1px; min-width: 24px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cl-glow) 36%, transparent), transparent);
}

/* ══════════════════════════════════════════════════════════════
   SURFACES — etched components, corner brackets, hover trace
   ══════════════════════════════════════════════════════════════ */
html body:is(.bt-page, .bt-catalog, .bt-course-auth)
    :is(.glass, .card, .course, .exam-card, .sem-card, .article-card,
        .tute-card, .pay-card, .note-card, .faq-item, .c-item) {
    position: relative;
    background: linear-gradient(158deg, #0C1220, #080C15);
    border: 1px solid var(--cl-copper);
    border-radius: 16px; box-shadow: none;
    transition: border-color .35s, translate .35s;
}
html body:is(.bt-page, .bt-catalog)
    :is(.glass, .card, .course, .exam-card, .sem-card)::before {
    content: ''; position: absolute; inset: 10px auto auto 10px;
    width: 12px; height: 12px; pointer-events: none;
    border-top: 1.5px solid var(--cl-trace); border-left: 1.5px solid var(--cl-trace);
    border-top-left-radius: 4px; transition: border-color .35s;
}
html body:is(.bt-page, .bt-catalog)
    :is(.glass, .card, .course, .exam-card, .sem-card)::after {
    content: ''; position: absolute; inset: auto 10px 10px auto;
    width: 12px; height: 12px; pointer-events: none;
    border-bottom: 1.5px solid var(--cl-trace); border-right: 1.5px solid var(--cl-trace);
    border-bottom-right-radius: 4px; transition: border-color .35s;
    background: none; mask: none; -webkit-mask: none;
}
html body:is(.bt-page, .bt-catalog)
    :is(.glass, .card, .course, .exam-card, .sem-card):hover {
    border-color: color-mix(in srgb, var(--cl-glow) 40%, transparent);
    translate: 0 -3px;
}
html body:is(.bt-page, .bt-catalog)
    :is(.glass, .card, .course, .exam-card, .sem-card):hover::before,
html body:is(.bt-page, .bt-catalog)
    :is(.glass, .card, .course, .exam-card, .sem-card):hover::after {
    border-color: var(--cl-glow);
}

/* a trace runs the card as you enter it */
html body:is(.bt-page, .bt-catalog) :is(.course, .exam-card, .sem-card) {
    overflow: hidden;
}
html body:is(.bt-page, .bt-catalog) :is(.course, .exam-card, .sem-card) > :last-child::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
    background: linear-gradient(90deg, var(--cl-signal), var(--cl-glow));
    box-shadow: 0 0 10px var(--cl-halo);
    transition: width .55s cubic-bezier(.22,.61,.36,1);
}

/* ══════════════════════════════════════════════════════════════
   CHROME
   ══════════════════════════════════════════════════════════════ */
html body:is(.bt-page, .bt-catalog) :is(.navbar, .topbar) {
    background: color-mix(in srgb, var(--cl-void) 86%, transparent);
    border-bottom: 1px solid var(--cl-copper);
    backdrop-filter: blur(16px) saturate(150%);
}
html body:is(.bt-page, .bt-catalog) :is(.navbar, .topbar).scrolled {
    background: color-mix(in srgb, var(--cl-void) 96%, transparent);
    border-bottom-color: color-mix(in srgb, var(--cl-glow) 24%, transparent);
}
html body:is(.bt-page, .bt-catalog) footer {
    background: var(--cl-void); border-top: 1px solid var(--cl-copper); position: relative;
}
html body:is(.bt-page, .bt-catalog) footer::before {
    content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cl-glow), transparent);
    opacity: .45;
}

/* buttons speak the same way everywhere */
html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
    :is(.btn, .btn-nav, .btn-primary, .btn-dark, .btn-accent, .login-btn, .register-btn) {
    position: relative; overflow: hidden; border-radius: 10px;
}
html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
    :is(.btn-nav, .btn-primary, .btn-dark, .btn-accent, .login-btn, .register-btn)::after {
    content: ''; position: absolute; inset: 0; translate: -110% 0;
    background: linear-gradient(96deg, transparent, rgba(255,255,255,.35), transparent);
    transition: translate .62s cubic-bezier(.22,.61,.36,1);
}
html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
    :is(.btn-nav, .btn-primary, .btn-dark, .btn-accent, .login-btn, .register-btn):hover::after {
    translate: 110% 0;
}
html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
    :is(.btn-nav, .btn-primary, .btn-dark, .btn-accent, .login-btn, .register-btn):hover {
    translate: 0 -2px;
}

/* forms read like terminal fields */
html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .f-input) {
    background: #070B13; border: 1px solid var(--cl-copper);
    border-radius: 10px; color: var(--cl-silver);
    transition: border-color .25s, box-shadow .25s, background .25s;
}
html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
    :is(input, select, textarea, .f-input):focus {
    border-color: var(--cl-glow); background: #090E18; outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-signal) 16%, transparent);
}

/* empty states: "no signal yet", never a fault */
html body:is(.bt-page, .bt-catalog) :is(.empty, .bt-empty, .empty-box) {
    border: 1px dashed color-mix(in srgb, var(--cl-glow) 16%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--cl-void-2) 70%, transparent);
    color: var(--cl-mute);
}

/* ══════════════════════════════════════════════════════════════
   AUTH PAGES — the constellation gets its own quiet board
   ══════════════════════════════════════════════════════════════ */
/* No `position` here on purpose: the brand column sets `position: sticky` itself
   so it stays put while the taller form scrolls beside it. Declaring relative
   was overriding that and leaving dead space under the panel. Backgrounds paint
   without it anyway. */
html body.bt-auth .brand-section,
html body.bt-course-auth {
    background-image:
        linear-gradient(color-mix(in srgb, var(--cl-glow) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cl-glow) 4%, transparent) 1px, transparent 1px),
        radial-gradient(ellipse at 20% 18%, color-mix(in srgb, var(--cl-signal) 15%, transparent), transparent 62%);
    background-size: 54px 54px, 54px 54px, auto;
}
html body.bt-auth .bt-orbit { animation: cl-spin 34s linear infinite; }
html body.bt-auth .bt-orbit-two { animation: cl-spin 52s linear infinite reverse; }
@keyframes cl-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
html body.bt-auth .bt-orbit-item {
    animation: cl-float 6s ease-in-out infinite;
    animation-delay: var(--f, 0s);
}
html body.bt-auth .bt-orbit-video    { --f: 0s; }
html body.bt-auth .bt-orbit-book     { --f: 1.6s; }
html body.bt-auth .bt-orbit-progress { --f: 3.1s; }
@keyframes cl-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
}
html body.bt-auth .bt-orbit-center {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl-glow) 24%, transparent),
                0 18px 50px -18px var(--cl-halo);
    animation: cl-pulse 3.6s ease-in-out infinite;
}
@keyframes cl-pulse {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl-glow) 24%, transparent),
                           0 18px 50px -18px var(--cl-halo); }
    50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl-glow) 46%, transparent),
                           0 18px 62px -14px var(--cl-halo); }
}

/* ══════════════════════════════════════════════════════════════
   ENTRY MOTION — quieter than the landing page, same grammar
   ══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
    html body:is(.bt-page, .bt-catalog)
        :is(.course, .exam-card, .sem-card, .card, .glass, .faq-item, .article-card, .reveal) {
        animation: cl-enter linear both;
        animation-timeline: view();
        animation-range: entry 3% cover 24%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.bt-auth :is(.bt-orbit, .bt-orbit-two, .bt-orbit-item, .bt-orbit-center) { animation: none; }
    html body:is(.bt-page, .bt-catalog, .bt-auth, .bt-course-auth)
        :is(.btn, .btn-nav, .btn-primary, .btn-dark, .btn-accent)::after { transition: none; }
    html body:is(.bt-page, .bt-catalog)
        :is(.course, .exam-card, .sem-card, .card, .glass, .faq-item, .reveal) {
        animation: none; opacity: 1; translate: 0 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   NARROW PHONES
   The wordmark is 5.4:1, so a 38px-tall logo measures 207px — on a
   320px bar that left no room for the Login button and the burger,
   and the row spilled 52px off the side. Cap the mark and tighten
   the button; everything still reads.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    html body:is(.bt-page, .bt-catalog) .navbar { padding-inline: 12px; }
    html body:is(.bt-page, .bt-catalog) :is(.logo-wrap, .logo-area) img {
        height: 28px; max-width: 132px;
        object-fit: contain; object-position: left center;
    }
    html body:is(.bt-page, .bt-catalog) :is(.btn-nav, .btn-login) {
        padding: 9px 13px; font-size: 12px;
    }
}

/* The seminar / MCQ topbar puts the wordmark, a Home link, an action button and
   the theme toggle on one row. At 320px that row measured 490px. Same remedy:
   cap the mark, tighten the buttons, and let the row wrap if it still cannot fit. */
@media (max-width: 420px) {
    html body:is(.bt-page, .bt-catalog) .topbar {
        flex-wrap: wrap; gap: 8px; padding-inline: 12px;
    }
    html body:is(.bt-page, .bt-catalog) .topbar .brand img {
        height: 26px; max-width: 118px;
        object-fit: contain; object-position: left center;
    }
    html body:is(.bt-page, .bt-catalog) .nav-right { gap: 6px; }
    html body:is(.bt-page, .bt-catalog) .nav-right .btn {
        padding: 8px 10px; font-size: 11px; min-height: 40px;
    }
    html body:is(.bt-page, .bt-catalog) .nav-right .icon-btn {
        width: 40px; height: 40px; flex: 0 0 40px;
    }
}

/* ── PHONE LEGIBILITY — the shared footer ──────────────────────── */
/* the footer is shared with every other page */
@media (max-width: 600px) {
    html body footer.bi-footer .footer-col h4,
    html body footer .footer-col h4 { font-size: 12px; letter-spacing: .1em; }
    html body :is(footer, .bi-footer) :is(p, li, a, small) { font-size: max(12px, 1em); }
}

/* Text links sitting inline in a list are a 20px-tall tap target. Give the
   ones that stand on their own row enough room for a thumb. */
@media (max-width: 600px) {
    html body :is(footer, .bi-footer) .footer-col li > a {
        display: inline-flex; align-items: center; min-height: 40px; padding-block: 2px;
    }
}

/* The auth kicker sits at 9px, below the phone floor the footer rules set. */
@media (max-width: 600px) {
    html body .bt-auth-kicker { font-size: 11px; letter-spacing: 1.4px; }
}

/* ══════════════════════════════════════════════════════════════
   CATALOG NAV — the same drawer the homepage uses
   --------------------------------------------------------------
   courses.php carried a bare 26px icon with no chrome and a white drop-down,
   on a page that is otherwise black and blue. Same button, same panel, same
   behaviour as the homepage, so the two read as one site.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    html body.bt-catalog .navbar .hamburger {
        display: grid; place-items: center; flex: 0 0 46px;
        width: 46px; height: 46px; margin: 0; padding: 0;
        font-size: 22px; line-height: 1; cursor: pointer; color: #dbe9ff;
        border: 1px solid color-mix(in srgb, var(--cl-glow, #4C9BFF) 38%, transparent);
        border-radius: 10px;
        background: color-mix(in srgb, var(--cl-signal, #1273FF) 12%, transparent);
        transition: background .25s, border-color .25s, color .25s;
    }
    html body.bt-catalog .navbar .hamburger[aria-expanded="true"] {
        color: #fff; border-color: var(--cl-glow, #4C9BFF);
        background: color-mix(in srgb, var(--cl-signal, #1273FF) 28%, transparent);
    }

    html body.bt-catalog .navbar .nav-links {
        align-items: stretch;
        gap: 2px; padding: 12px 14px 16px;
        max-height: min(72vh, 540px); overflow-y: auto; overscroll-behavior: contain;
        background: linear-gradient(180deg, #070C17, #0A1222);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        border-bottom: 1px solid color-mix(in srgb, var(--cl-glow, #4C9BFF) 26%, transparent);
        box-shadow: 0 26px 50px -22px #000d;
        pointer-events: none; translate: 0 -10px; transform: none;
        transition: opacity .28s ease, translate .28s ease, visibility .28s;
    }
    html body.bt-catalog .navbar .nav-links.open { pointer-events: auto; translate: 0 0; transform: none; }
    html body.bt-catalog .navbar .nav-links li { width: 100%; list-style: none; }
    html body.bt-catalog .navbar .nav-links a {
        display: flex; align-items: center; width: 100%;
        padding: 12px 14px; min-height: 46px; border-radius: 10px;
        font-size: 14px; text-align: left;
    }
    /* the underline trick belongs to the desktop row, not to a stacked list */
    html body.bt-catalog .navbar .nav-links a::after { content: none; }
    html body.bt-catalog .navbar .nav-links a.active {
        color: #fff;
        border: 1px solid color-mix(in srgb, var(--cl-glow, #4C9BFF) 40%, transparent);
        background: color-mix(in srgb, var(--cl-signal, #1273FF) 14%, transparent);
    }
}