/* Welcome page styles — optimized for scroll performance (esp. Firefox) */
[x-cloak] { display: none !important; }

/* Prevent horizontal scroll/drag on mobile caused by decorative absolute blobs */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Welcome-page glass override — lighter than app.css.
   backdrop-filter is one of the most expensive properties in Firefox during scroll.
   Reduced blur radius + fallback for browsers without support. */
.glass {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgba(255, 255, 255, .95); }
}

.hero-surface {
    background:
        radial-gradient(circle at 20% 20%, rgba(167, 139, 250, .14), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(56, 189, 248, .10), transparent 30%),
        linear-gradient(135deg, #f0f0ff 0%, #e8ecff 28%, #f3f0ff 64%, #f8fafc 100%);
    /* Isolate paint work; helps compositors avoid repainting body during scroll */
    contain: layout paint;
}

.grid-pattern {
    background-image:
        linear-gradient(rgba(99, 102, 241, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .045) 1px, transparent 1px);
    background-size: 32px 32px;
    /* Promote to its own layer so it isn't repainted on every scroll frame */
    will-change: transform;
    transform: translateZ(0);
}

.soft-card {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 16px 48px rgba(15, 23, 42, .06);
    /* Promote to own layer */
    will-change: transform;
    transform: translateZ(0);
}

.hero-title-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.teacher-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.teacher-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .11);
    border-color: rgba(99, 102, 241, .22);
}

.teacher-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.4), transparent 55%);
    pointer-events: none;
}

.highlight-glow {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .14), 0 20px 52px rgba(99, 102, 241, .15);
}

.skeleton {
    background: linear-gradient(90deg, #eef2f7 25%, #e5ebf3 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

.search-shell:focus-within {
    box-shadow: 0 0 0 4px rgba(129,140,248,.22), 0 18px 40px rgba(79,70,229,.16);
}

.pill {
    border-radius: 999px;
}

.subject-tag {
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    color: #4f46e5;
}

.group-badge {
    background: linear-gradient(135deg, #10b981, #06b6d4);
}

.discount-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.stars-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.availability-badge {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
}

/* Enhanced teacher card - optimized for scroll performance */
.teacher-card-v2 {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, .9);
    display: flex;
    flex-direction: column;
    /* Promote to own layer to avoid repaint on scroll */
    will-change: transform;
    transform: translateZ(0);
}
.teacher-photo-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, .75) 0%, rgba(15, 23, 42, .20) 40%, transparent 65%);
}
.teacher-photo-img {
    /* Disable image antialiasing during transform to improve performance */
    image-rendering: -webkit-optimize-contrast;
}
.cta-arrow {}
.price-block {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid rgba(99, 102, 241, .18);
}
.cta-book {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 6px 18px -6px rgba(79, 70, 229, .5);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.cta-book:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(79, 70, 229, .6);
    opacity: .96;
}
.live-dot {
    background: #10b981;
}
.pill-soft {
    background: rgba(255, 255, 255, .95);
}
.badge-top {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(245,158,11,.45);
}
.badge-group {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(16,185,129,.45);
}
.badge-discount {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(244,63,94,.45);
}
.subject-pill {
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    color: #4338ca;
    border: 1px solid rgba(99,102,241,.15);
}
.slot-chip {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid rgba(16,185,129,.25);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tab-btn.active {
    color: #312e81;
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff, #faf5ff);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.10);
}

.cal-day {
    min-height: 96px;
    transition: background .2s ease;
}

.cal-day:hover {
    background: #fafbff;
}

.cal-subject {
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.cal-subject:hover {
    transform: scale(1.03);
    background: #e0e7ff;
}

/* Decorative blobs — use radial gradients for soft edges instead of `filter: blur`,
   which forces Firefox to allocate a large offscreen buffer and repaint on every
   scroll frame (major cause of scroll jank / flicker). */
.blob {
    background-image: radial-gradient(circle, currentColor 0%, transparent 65%);
    background-color: transparent !important;
    color: rgba(129, 140, 248, .35);
    opacity: .55;
    pointer-events: none;
    /* Own compositor layer, never repainted while scrolling */
    will-change: transform;
    transform: translateZ(0);
}

/* Hover lift is nice on desktop but adds jank + accidental triggers on touch */
@media (hover: none) {
    .teacher-card:hover,
    .cta-book:hover {
        transform: none;
        box-shadow: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teacher-card,
    .cta-book,
    .cal-subject { transition: none; }
}