@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500&display=swap');

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --maroon:   #7b1c1c;
      --red:      #a52a2a;
      --gold:     #d4a017;
      --gold-lt:  #f5c842;
      --dark:     #0f0a0a;
      --darker:   #1a0d0d;
      --white:    #ffffff;
      --cream:    #fff8f0;
    }

    /* body { background: var(--dark); overflow: hidden; font-family: 'Inter', sans-serif; } */

    /* ══════════════════════════════
       PRELOADER
    ══════════════════════════════ */
    #preloader {
      position: fixed; inset: 0; z-index: 9999;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      background: var(--darker);
      overflow: hidden;
      transition: opacity 0.9s ease, visibility 0.9s ease;
    }
    #preloader.hidden { opacity: 0; visibility: hidden; }

    /* ── Radial glow backdrop ── */
    .radial-bg {
      position: absolute; inset: 0;
      background:
        /* radial-gradient(ellipse 60% 50% at 50% 50%, rgba(123,28,28,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(212,160,23,0.08) 0%, transparent 60%); */
        #260908
    }

    /* ── Particle dots ── */
    .particles { position: absolute; inset: 0; overflow: hidden; }
    .particle {
      position: absolute; border-radius: 50%;
      background: var(--gold); opacity: 0;
      animation: floatUp linear infinite;
    }
    @keyframes floatUp {
      0%   { transform: translateY(0) scale(0); opacity: 0; }
      10%  { opacity: 0.6; }
      90%  { opacity: 0.2; }
      100% { transform: translateY(-100vh) scale(1); opacity: 0; }
    }

    /* ── Horizontal scan line ── */
    .scan-line {
      position: absolute; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(212,160,23,0.4) 50%, transparent 100%);
      animation: scanMove 3s ease-in-out infinite;
    }
    
    @keyframes scanMove {
      0%   { top: 0%; opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    /* ══════════════════════════════
       CONTENT
    ══════════════════════════════ */
    .loader-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      align-items: center; gap: 24px; padding: 20px;
      text-align: center;
    }

    /* ── Outer decorative ring ── */
    .ring-wrap {
      position: relative; width: 150px; height: 150px;
    }

    /* Rotating outer dashed ring */
    .ring-wrap svg.outer-ring {
      position: absolute; inset: 0; width: 100%; height: 100%;
      animation: spinRing 4s linear infinite;
    }
    @keyframes spinRing {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* Counter-rotating inner ring */
    .ring-wrap svg.inner-ring {
      position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px);
      animation: spinRing 6s linear infinite reverse;
    }

    /* Center logo circle */
    .logo-circle {
      position: absolute; inset: 22px;
      background: radial-gradient(circle at 35% 35%, #3a0a0a, #1a0505);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow:
        0 0 0 1px rgba(212,160,23,0.3),
        0 0 30px rgba(165,42,42,0.4),
        inset 0 0 20px rgba(0,0,0,0.5);
    }

    .logo-circle img {
      width: 200px; height: 200px;
      object-fit: contain; border-radius: 50%;
    }

    /* Cross fallback */
    .cross-icon {
      display: none;
      flex-direction: column; align-items: center;
    }
    .cross-v {
      width: 4px; height: 44px;
      background: linear-gradient(180deg, var(--gold-lt), var(--gold));
      border-radius: 2px;
    }
    .cross-h {
      width: 28px; height: 4px; margin-top: -28px;
      background: linear-gradient(90deg, var(--gold-lt), var(--gold));
      border-radius: 2px;
    }

    /* ── School name ── */
    .school-name { animation: fadeUp 0.8s ease both; animation-delay: 0.3s; }
    .school-name h1 {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.1rem, 3.5vw, 1.7rem);
      color: var(--white); font-weight: 700;
      letter-spacing: 2px; line-height: 1.4;
    }
    .school-name h1 .highlight { color: var(--gold); }
    .school-name .sub {
      font-size: 0.68rem; color: rgba(255,255,255,0.45);
      letter-spacing: 4px; text-transform: uppercase; margin-top: 6px;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Gold ornament divider ── */
    .ornament {
      display: flex; align-items: center; gap: 10px;
      animation: fadeUp 0.8s ease both; animation-delay: 0.5s;
    }
    .orn-line {
      width: 50px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold));
    }
    .orn-line.right { background: linear-gradient(90deg, var(--gold), transparent); }
    .orn-diamond {
      width: 6px; height: 6px;
      background: var(--gold); transform: rotate(45deg);
    }

    /* ── Motto ── */
    .motto {
      font-family: 'Cinzel', serif;
      font-size: clamp(0.72rem, 2vw, 0.9rem);
      color: rgba(212,160,23,0.85);
      letter-spacing: 3px; text-transform: uppercase;
      animation: fadeUp 0.8s ease both; animation-delay: 0.6s;
    }

    /* ── Progress bar ── */
    .progress-wrap {
      width: min(300px, 82vw);
      animation: fadeUp 0.8s ease both; animation-delay: 0.8s;
    }
    .progress-track {
      width: 100%; height: 3px;
      background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;
    }
    .progress-bar {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, var(--maroon), var(--gold), var(--gold-lt), var(--gold));
      background-size: 300% 100%;
      border-radius: 3px;
      animation:
        loadProgress 3s cubic-bezier(0.4,0,0.2,1) forwards,
        shimmerBar 1.8s linear infinite;
      box-shadow: 0 0 8px rgba(212,160,23,0.6);
    }
    @keyframes loadProgress {
      0%   { width: 0%; }
      30%  { width: 40%; }
      65%  { width: 72%; }
      90%  { width: 92%; }
      100% { width: 100%; }
    }
    @keyframes shimmerBar {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .progress-meta {
      display: flex; justify-content: space-between;
      margin-top: 10px;
      font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }

    /* ── Pulsing dots ── */
    .dots { display: flex; gap: 8px; animation: fadeUp 0.8s ease both; animation-delay: 1s; }
    .dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--gold); opacity: 0.2;
      animation: pulse 1.2s ease-in-out infinite;
    }
    .dot:nth-child(2) { animation-delay: 0.2s; }
    .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes pulse { 0%,100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }

    /* ══════════════════════════════
       MAIN PAGE
    ══════════════════════════════ */
    #main-page {
      min-height: 100vh; display: flex;
      align-items: center; justify-content: center;
      background: var(--cream); opacity: 0;
      transition: opacity 0.8s ease;
    }
    #main-page.visible { opacity: 1; }
    .main-content { text-align: center; padding: 40px 20px; }
    .main-content h2 {
      font-family: 'Cinzel', serif; font-size: 2rem;
      color: var(--maroon); margin-bottom: 10px;
    }
    .main-content p { color: #666; }