/* =========================================================
   GOLDEN BRIDGE — SPLASH INTRO  (index.html ONLY)
   Branded full-screen intro: logo + school name.
   Loaded only on the home page.
   ========================================================= */

.splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 28%, rgba(199,152,47,.22) 0%, rgba(199,152,47,0) 55%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .7s ease, visibility .7s ease;
}
/* thin gold top accent, matching the header */
.splash::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);
}

/* lock page scroll while the splash is visible */
body.splash-active{overflow:hidden;}

.splash-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  max-width:560px;
  animation:splashRise .8s cubic-bezier(.22,.61,.36,1) both;
}

.splash-logo{
  width:clamp(180px, 34vw, 300px);
  height:auto;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));
  animation:splashPop .9s cubic-bezier(.22,.61,.36,1) both;
}

.splash-name{
  font-family:var(--serif);
  font-weight:700;
  color:#fff;
  font-size:clamp(1.7rem, 5vw, 2.9rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
}
.splash-name span{color:var(--gold-light);}

.splash-tag{
  color:#C9D6E3;
  font-style:italic;
  font-size:clamp(.9rem, 2.4vw, 1.05rem);
  margin:0;
  letter-spacing:.01em;
}

/* small animated loader bar */
.splash-loader{
  margin-top:6px;
  width:min(220px, 55vw);
  height:4px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(255,255,255,.16);
  position:relative;
}
.splash-loader::after{
  content:"";
  position:absolute;top:0;left:-40%;width:40%;height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  animation:splashLoad 1.25s ease-in-out infinite;
}

/* fade-out state added by JS */
.splash.hide{opacity:0;visibility:hidden;pointer-events:none;}

/* CSS safety net: auto-hide even if the JS never runs */
.splash{animation:splashAutoHide 0s linear 6s forwards;}
@keyframes splashAutoHide{
  to{opacity:0;visibility:hidden;pointer-events:none;}
}

@keyframes splashRise{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
@keyframes splashPop{
  from{opacity:0;transform:scale(.82);}
  to{opacity:1;transform:scale(1);}
}
@keyframes splashLoad{
  0%{left:-40%;}
  100%{left:100%;}
}

/* Accessibility / motion preference */
@media (prefers-reduced-motion:reduce){
  .splash-inner,.splash-logo{animation:none;}
  .splash-loader::after{animation:none;left:0;width:100%;}
  .splash{transition:opacity .3s ease, visibility .3s ease;}
}