/* =====================================================================
   SPLASH SCREEN — Cinematic Academic Grand Entrance
   Emeralds International School
   ===================================================================== */

/* ─── Keyframes ─────────────────────────────────────────────────────── */

@keyframes splashFadeIn{from{opacity:0}to{opacity:1}}
@keyframes splashScaleIn{from{opacity:0;transform:scale(.7) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes splashSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes splashSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

@keyframes ringRotate{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes crestFloat{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 15px 35px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(212,168,67,.15))}
  50%{transform:translateY(-10px);filter:drop-shadow(0 25px 45px rgba(0,0,0,.4)) drop-shadow(0 0 30px rgba(212,168,67,.25))}
}

@keyframes crestGlow{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.9)}
  50%{opacity:.8;transform:translate(-50%,-50%) scale(1.3)}
}

@keyframes titleReveal{
  0%{opacity:0;transform:translateY(25px);letter-spacing:12px;filter:blur(8px)}
  100%{opacity:1;transform:translateY(0);letter-spacing:4px;filter:blur(0)}
}

@keyframes mottoLineGrow{
  from{width:0;opacity:0}
  to{width:50px;opacity:1}
}

@keyframes mottoTextReveal{
  0%{opacity:0;letter-spacing:6px;filter:blur(4px)}
  100%{opacity:1;letter-spacing:3px;filter:blur(0)}
}

@keyframes loaderFill{
  0%{width:0}
  20%{width:15%}
  40%{width:35%}
  60%{width:55%}
  80%{width:78%}
  95%{width:92%}
  100%{width:100%}
}

@keyframes loaderShimmer{
  0%{left:-40%}
  100%{left:140%}
}

@keyframes enterPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,168,67,.4),0 8px 30px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 15px rgba(212,168,67,0),0 8px 30px rgba(0,0,0,.3)}
}

@keyframes particlesDrift{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(-300px) rotate(3deg)}
}

@keyframes ornamentFade{
  from{opacity:0;transform:scale(.5)}
  to{opacity:1;transform:scale(1)}
}

@keyframes badgeFade{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:.8;transform:translateY(0)}
}

@keyframes yearPop{
  0%{opacity:0;transform:scale(.5)}
  60%{opacity:1;transform:scale(1.1)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes splashExit{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08);filter:blur(10px)}
}

/* ─── Base Container ────────────────────────────────────────────────── */

.splash-screen{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:#040C1A;
  overflow:hidden;
}

.splash-screen.hidden{
  animation:splashExit .9s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}

/* ─── Video Background ──────────────────────────────────────────────── */

.splash-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.35;
  filter:saturate(.6) brightness(.5);
}

/* ─── Overlays ──────────────────────────────────────────────────────── */

.splash-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(4,12,26,.85) 0%,
      rgba(10,25,47,.5) 40%,
      rgba(10,25,47,.6) 60%,
      rgba(4,12,26,.9) 100%
    );
}

.splash-vignette{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(4,12,26,.7) 100%);
}

/* ─── Gold Particles ────────────────────────────────────────────────── */

.splash-particles{
  position:absolute;inset:0;z-index:3;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%,rgba(212,168,67,.7),transparent),
    radial-gradient(1px 1px at 18% 38%,rgba(255,255,255,.5),transparent),
    radial-gradient(2px 2px at 32% 8%,rgba(212,168,67,.5),transparent),
    radial-gradient(1px 1px at 48% 55%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.5px 1.5px at 62% 20%,rgba(212,168,67,.6),transparent),
    radial-gradient(1px 1px at 78% 42%,rgba(255,255,255,.35),transparent),
    radial-gradient(2px 2px at 88% 65%,rgba(212,168,67,.5),transparent),
    radial-gradient(1px 1px at 42% 78%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 55% 88%,rgba(212,168,67,.4),transparent),
    radial-gradient(1px 1px at 72% 75%,rgba(255,255,255,.25),transparent);
  background-size:250px 250px;
  animation:particlesDrift 60s linear infinite;
  opacity:.6;
}

/* ─── Corner Ornaments ──────────────────────────────────────────────── */

.splash-ornament{
  position:absolute;z-index:5;
  width:80px;height:80px;
  border-color:rgba(212,168,67,.3);
  border-style:solid;
  border-width:0;
  animation:ornamentFade 1.2s ease .8s both;
}
.splash-ornament.top-left{top:30px;left:30px;border-top-width:2px;border-left-width:2px;border-radius:4px 0 0 0}
.splash-ornament.top-right{top:30px;right:30px;border-top-width:2px;border-right-width:2px;border-radius:0 4px 0 0}
.splash-ornament.bottom-left{bottom:30px;left:30px;border-bottom-width:2px;border-left-width:2px;border-radius:0 0 0 4px}
.splash-ornament.bottom-right{bottom:30px;right:30px;border-bottom-width:2px;border-right-width:2px;border-radius:0 0 4px 0}

/* ─── Center Content ────────────────────────────────────────────────── */

.splash-content{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:40px;
}

/* ─── Rotating Gold Ring ────────────────────────────────────────────── */

.splash-ring{
  position:absolute;
  top:50%;left:50%;
  width:260px;height:260px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1.5px solid transparent;
  background:conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 30%,
    rgba(212,168,67,.5) 45%,
    rgba(240,204,107,.3) 50%,
    rgba(212,168,67,.5) 55%,
    transparent 70%,
    transparent 100%
  ) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:ringRotate 6s linear infinite;
  opacity:0;
  animation:ringRotate 6s linear infinite, splashFadeIn 1s ease .5s forwards;
}

/* Second ring — opposite direction */
.splash-ring::after{
  content:'';
  position:absolute;inset:-15px;
  border-radius:50%;
  border:1px solid transparent;
  background:conic-gradient(
    from 180deg,
    transparent 0%,
    transparent 35%,
    rgba(212,168,67,.25) 48%,
    transparent 62%,
    transparent 100%
  ) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:ringRotate 8s linear reverse infinite;
}

/* ─── School Crest ──────────────────────────────────────────────────── */

.splash-crest{
  position:relative;
  margin-bottom:30px;
  animation:splashScaleIn 1s cubic-bezier(.2,.8,.2,1) .3s both;
}

.splash-crest::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(212,168,67,.2) 0%,transparent 65%);
  transform:translate(-50%,-50%);
  border-radius:50%;
  animation:crestGlow 4s ease-in-out infinite;
}

.splash-crest-img{
  position:relative;z-index:1;
  height:130px;width:auto;
  object-fit:contain;
  animation:crestFloat 5s ease-in-out infinite;
}

/* ─── School Title ──────────────────────────────────────────────────── */

.splash-title{
  margin:0 0 20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

.splash-title-line{
  display:block;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  color:var(--white,#fff);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
  animation:titleReveal 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.splash-title-line:first-child{
  font-size:clamp(2.2rem,5.5vw,4rem);
  animation-delay:.6s;
}

.splash-title-line.accent{
  font-size:clamp(1rem,2.5vw,1.6rem);
  font-family:'Poppins',sans-serif;
  font-weight:300;
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--gold-400,#E6B94A);
  text-shadow:0 0 30px rgba(212,168,67,.3);
  animation-delay:.9s;
}

/* ─── Motto ─────────────────────────────────────────────────────────── */

.splash-motto{
  display:flex;align-items:center;gap:18px;
  margin-bottom:25px;
  animation:splashFadeIn .8s ease 1.4s both;
}

.splash-motto-line{
  display:block;width:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,168,67,.6),transparent);
  animation:mottoLineGrow 1s ease 1.6s forwards;
}

.splash-motto-text{
  font-family:'Poppins',sans-serif;
  font-size:clamp(.7rem,1.5vw,.9rem);
  font-weight:400;font-style:italic;
  color:rgba(255,255,255,.55);
  letter-spacing:3px;
  text-transform:uppercase;
  animation:mottoTextReveal 1.2s ease 1.5s both;
}

/* ─── Year Badge ────────────────────────────────────────────────────── */

.splash-year{
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:35px;
  animation:yearPop .6s cubic-bezier(.34,1.56,.64,1) 1.8s both;
}

.splash-year-est{
  font-family:'Playfair Display',serif;
  font-size:.75rem;font-style:italic;
  color:rgba(212,168,67,.5);
  letter-spacing:2px;
}

.splash-year-num{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--gold-500,#D4A843);
  text-shadow:0 0 15px rgba(212,168,67,.3);
  letter-spacing:3px;
}

/* ─── Loading Bar ───────────────────────────────────────────────────── */

.splash-loader{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:200px;
  animation:splashFadeIn .6s ease 2s both;
}

.splash-loader-track{
  width:100%;height:2px;
  background:rgba(255,255,255,.06);
  border-radius:10px;overflow:hidden;
  position:relative;
}

.splash-loader-fill{
  position:absolute;inset:0;
  width:0;height:100%;
  background:linear-gradient(90deg,var(--gold-500,#D4A843),var(--gold-300,#F0CC6B));
  border-radius:10px;
  animation:loaderFill 5s cubic-bezier(.4,0,.2,1) 2.2s forwards;
}

/* Shimmer on loader */
.splash-loader-fill::after{
  content:'';position:absolute;
  top:0;left:-40%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:loaderShimmer 1.5s ease infinite 2.5s;
}

.splash-loader-label{
  font-family:'Poppins',sans-serif;
  font-size:.65rem;font-weight:500;
  color:rgba(255,255,255,.3);
  letter-spacing:3px;text-transform:uppercase;
}

/* ─── Enter Button ──────────────────────────────────────────────────── */

.splash-enter{
  position:absolute;
  bottom:50px;
  z-index:15;
  display:flex;align-items:center;gap:12px;
  padding:16px 40px;
  background:rgba(212,168,67,.08);
  border:1px solid rgba(212,168,67,.3);
  border-radius:9999px;
  color:var(--gold-400,#E6B94A);
  font-family:'Poppins',sans-serif;
  font-size:.8rem;font-weight:600;
  letter-spacing:4px;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  animation:splashSlideUp .8s ease 3s forwards,enterPulse 3s ease-in-out 4s infinite;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}

.splash-enter:hover{
  background:linear-gradient(135deg,rgba(212,168,67,.15),rgba(212,168,67,.08));
  border-color:rgba(212,168,67,.6);
  color:var(--white,#fff);
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(212,168,67,.2),0 0 25px rgba(212,168,67,.1);
  letter-spacing:6px;
}

.splash-enter-icon{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:rgba(212,168,67,.12);
  border-radius:50%;
  transition:all .4s ease;
}

.splash-enter:hover .splash-enter-icon{
  background:rgba(212,168,67,.25);
  transform:translateX(4px);
}

/* ─── Bottom Badge ──────────────────────────────────────────────────── */

.splash-badge{
  position:absolute;
  bottom:50px;left:50px;
  z-index:15;
  display:flex;align-items:center;gap:10px;
  font-family:'Poppins',sans-serif;
  font-size:.65rem;font-weight:400;
  color:rgba(255,255,255,.25);
  letter-spacing:2px;text-transform:uppercase;
  animation:badgeFade 1s ease 2.5s both;
}

.splash-badge i{
  color:rgba(212,168,67,.4);
  font-size:.8rem;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media(max-width:768px){
  .splash-ornament{width:40px;height:40px}
  .splash-ornament.top-left,.splash-ornament.top-right{top:15px}
  .splash-ornament.bottom-left,.splash-ornament.bottom-right{bottom:15px}
  .splash-ornament.top-left,.splash-ornament.bottom-left{left:15px}
  .splash-ornament.top-right,.splash-ornament.bottom-right{right:15px}

  .splash-content{padding:30px 20px}
  .splash-ring{width:200px;height:200px}
  .splash-crest-img{height:90px}

  .splash-motto{gap:10px;flex-wrap:wrap;justify-content:center}
  .splash-motto-line{display:none}

  .splash-loader{width:160px}

  .splash-enter{
    bottom:30px;
    padding:14px 32px;
    font-size:.7rem;letter-spacing:3px;
  }

  .splash-badge{
    bottom:auto;top:20px;left:50%;
    transform:translateX(-50%);
    font-size:.55rem;
  }
}

@media(max-width:480px){
  .splash-ornament{width:30px;height:30px}
  .splash-ring{width:170px;height:170px}
  .splash-crest-img{height:75px}

  .splash-title-line:first-child{font-size:1.8rem}
  .splash-title-line.accent{font-size:.75rem;letter-spacing:4px}

  .splash-motto-text{font-size:.6rem;letter-spacing:2px}
  .splash-year{margin-bottom:25px}

  .splash-enter{
    bottom:25px;
    padding:12px 28px;
    font-size:.65rem;letter-spacing:2.5px;
  }
  .splash-enter-icon{width:24px;height:24px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .splash-screen,.splash-screen *{
    animation-duration:.01ms!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;
  }
  .splash-particles{animation:none!important;opacity:.3}
  .splash-ring{animation:none!important;opacity:.5}
}