/* ==========================================================================
   BM English School - Lite design layer (white + orange minimalism)
   Replaces the heavy 3D layer: no WebGL, no blur filters, no endless animations.
   Only opacity/transform transitions, which phones handle on the GPU cheaply.
   ========================================================================== */

:root {
  --fx-orange: #FF5A00;
  --fx-orange-2: #FF8A00;
  --fx-orange-3: #FFB36B;
  --fx-cream: #FFF7F0;
  --ink: #0F172A;
  --muted: #64748B;
  --line: rgba(15, 23, 42, 0.08);
  --line-orange: rgba(255, 90, 0, 0.18);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -16px rgba(15, 23, 42, 0.18);
  --shadow-orange: 0 18px 40px -22px rgba(255, 90, 0, 0.55);
}

body { background: #FFFFFF; }

/* ---------- Hero: calm, typographic ---------- */
.hero-section {
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(255, 138, 0, 0.12) 0%, rgba(255, 138, 0, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--fx-cream) 100%);
  overflow: hidden !important;
}

/* Static dot pattern: a texture, not an animation */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 90, 0, 0.16) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 80% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 80% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

.hero-glow { display: none; }
.hero-grid { position: relative; z-index: 1; }

.hero-title {
  letter-spacing: -0.035em;
  color: var(--ink);
}

.hero-subhead {
  color: var(--fx-orange);
  position: relative;
  display: inline-block;
  width: fit-content;
}

/* Hand-drawn style underline that draws itself once */
.hero-subhead::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.16em;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--fx-orange), var(--fx-orange-3));
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: liteDraw 1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

@keyframes liteDraw { to { transform: scaleX(1); } }

.hero-description { color: #475569; }

/* Hero photo: clean card + offset orange block behind it */
.hero-media-wrapper { position: relative; }

.hero-media-wrapper::before {
  content: '';
  position: absolute;
  inset: 28px -18px -18px 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--fx-orange), var(--fx-orange-2));
}

.hero-media-card {
  position: relative;
  border: 6px solid #FFFFFF;
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.45);
}

.hero-floating-stat {
  border: 1px solid var(--line-orange);
  box-shadow: var(--shadow-soft);
  background: #FFFFFF;
  backdrop-filter: none;
}

/* ---------- Section headers ---------- */
.section-title { display: block; letter-spacing: -0.02em; }

.section-header .section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin: 0.9rem auto 0;
  border-radius: 9999px;
  background: var(--fx-orange);
}

.badge-tag {
  background: #FFFFFF;
  border: 1px solid var(--line-orange);
}

/* ---------- Cards: flat, crisp, one soft shadow ---------- */
.stat-card,
.course-card,
.form-card,
.glass-card,
.teacher-card,
.journey-card,
.quiz-card,
.faq-item {
  background: #FFFFFF !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .stat-card:hover,
  .course-card:hover,
  .teacher-card:hover,
  .gallery-card:hover,
  .modern-video-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-orange) !important;
    box-shadow: var(--shadow-orange) !important;
  }
}

.stat-card .material-symbols-outlined {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--fx-orange);
  background: rgba(255, 90, 0, 0.1);
}

.stat-number { color: var(--ink); }

/* Course cards */
.course-card { overflow: hidden; }

.course-card.featured {
  background: var(--fx-orange) !important;
  border-color: transparent !important;
}

.course-card.featured .course-title,
.course-card.featured .course-desc,
.course-card.featured [data-i18n="schedule_title"] { color: #FFFFFF; }

.course-card.featured .course-desc { opacity: 0.92; }

.course-card.featured .schedule-pill {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}

.course-card.featured .btn-accent {
  background: #FFFFFF !important;
  color: var(--fx-orange) !important;
}

/* Results carousel */
.carousel-ticker-wrapper {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding: 2.5rem 0;
  perspective: none;
}

.carousel-ticker-track { transform-style: flat; }

.baraban-card {
  transform: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.baraban-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-orange);
}

.card-header-3d { background: var(--fx-orange); }
.student-avatar-3d { background: #FFFFFF; color: var(--fx-orange); border-color: rgba(255, 255, 255, 0.6); box-shadow: none; }
.score-badge-3d { background: #FFFFFF; color: var(--fx-orange); box-shadow: none; }
.student-course-3d { color: rgba(255, 255, 255, 0.85); }
.breakdown-item-3d { background: var(--fx-cream); border-color: rgba(255, 90, 0, 0.12); }

.filter-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}

/* Atmosphere */
.gallery-card,
.modern-video-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.gallery-card:hover img { transform: scale(1.04); }

/* Location card stays the one bold orange block */
.location-big-card {
  background: var(--fx-orange);
  border: none;
  box-shadow: var(--shadow-orange);
}

.location-big-card::before { display: none; }
.location-card-tag, .loc-label { color: rgba(255, 255, 255, 0.85); }
.location-pin-pulse, .loc-icon-box { background: #FFFFFF; border-color: transparent; animation: none; }
.loc-icon-box { color: var(--fx-orange); }
.location-pin-pulse .material-symbols-outlined { color: var(--fx-orange) !important; }
.loc-val-link:hover { color: var(--ink); }
.btn-google-full { background: var(--ink) !important; box-shadow: none !important; }

.form-input:focus,
.form-select:focus { box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.12); }

/* ---------- Buttons: solid, no endless sheen ---------- */
.btn-accent,
.btn-submit {
  background: var(--fx-orange) !important;
  box-shadow: 0 10px 24px -10px rgba(255, 90, 0, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-accent:hover,
.btn-submit:hover {
  background: #E64F00 !important;
  transform: translateY(-2px);
}

.btn-accent:active,
.btn-submit:active { transform: translateY(0); }

.btn-secondary {
  background: #FFFFFF !important;
  border: 1.5px solid var(--line) !important;
  box-shadow: none;
}

.btn-secondary:hover { border-color: var(--fx-orange) !important; }

/* ---------- Footer: dark ink with an orange accent line ---------- */
.footer {
  background: var(--ink);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--fx-orange), var(--fx-orange-2));
}

.footer .footer-links a,
.footer p,
.footer-bottom { color: rgba(255, 255, 255, 0.7) !important; }
.footer .footer-links a:hover { color: #FFFFFF !important; }
.footer .material-symbols-outlined { color: var(--fx-orange) !important; }

/* ---------- Pillars & teachers: keep shape, drop heavy glow ---------- */
.teacher-coin {
  background: var(--fx-orange);
  box-shadow: 0 10px 20px -10px rgba(255, 90, 0, 0.8);
  transform: none;
}

.teacher-card:hover .teacher-coin { transform: none; }
.teacher-name, .teacher-score { transform: none; }
.journey-line-fill { box-shadow: none; }

/* ---------- Scroll reveal: a short fade-up, nothing else ---------- */
.lite-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.lite-reveal.lite-in {
  opacity: 1;
  transform: none;
}

/* ---------- Phones: remove remaining costly effects ---------- */
@media (max-width: 1023px) {
  .hero-media-wrapper::before { inset: 18px -10px -10px 18px; }
  .gallery-card, .modern-video-card { height: 460px; min-height: 460px; }
  .video-frame-container { height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .lite-reveal { opacity: 1; transform: none; transition: none; }
  .hero-subhead::after { animation: none; transform: scaleX(1); }
  .carousel-ticker-track { animation-duration: 240s !important; }
}

/* Header on phones: solid instead of backdrop blur (blur re-renders on every scroll frame) */
@media (max-width: 1023px) {
  .header,
  .header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
}

/* Video cards: flat dark backdrop instead of a blurred copy of the video */
.video-blur-backdrop {
  filter: none !important;
  transform: none !important;
  background-image: none !important;
  background: radial-gradient(circle at 50% 40%, #1E293B 0%, #0F172A 80%);
}

/* Small pills on top of playing videos: blur would repaint on every video frame */
.video-live-pill {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.78) !important;
}

.pulse-dot { animation: none !important; }

.ai-pulse-dot { animation: none !important; }

/* Tour on phones: a bit shorter arch so the caption never overlaps the photo */
@media (max-width: 900px) {
  .tour-frame { height: min(50vh, 520px); margin-top: -20vh; }
}