/* ============================================================
   FORGE ATLAS · v10.1 · SPLASH GATE
   Full-screen click-to-enter cinematic entry.
   Plays once per session. Skips if reduced-motion.
   ============================================================ */

.splash-gate{
  position:fixed; inset:0;
  z-index:99999;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(212,168,67,.08), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(126,234,255,.06), transparent 60%),
    #06060a;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
  opacity:1;
  transition:opacity .9s cubic-bezier(.7,0,.3,1);
}
.splash-gate.exiting{
  opacity:0;
  pointer-events:none;
}

.splash-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(212,168,67,.05) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(212,168,67,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 90%);
  animation:splashGridDrift 24s linear infinite;
}
@keyframes splashGridDrift{
  from{ background-position:0 0; }
  to  { background-position:64px 64px; }
}

.splash-particles{
  position:absolute; inset:0;
  pointer-events:none;
}
.splash-particles::before,
.splash-particles::after{
  content:"";
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:#D4A843;
  box-shadow:
    -120px  60px 0 0 rgba(212,168,67,.7),
     220px -40px 0 0 rgba(126,234,255,.5),
    -300px 180px 0 0 rgba(212,168,67,.4),
     180px 220px 0 0 rgba(126,234,255,.6),
    -200px -100px 0 0 rgba(212,168,67,.5),
     320px  40px 0 0 rgba(255,255,255,.3),
    -80px -200px 0 0 rgba(212,168,67,.4),
     280px 140px 0 0 rgba(126,234,255,.4),
     400px  20px 0 0 rgba(212,168,67,.3),
    -360px  80px 0 0 rgba(126,234,255,.3),
    -160px -260px 0 0 rgba(255,255,255,.25),
     360px -120px 0 0 rgba(212,168,67,.5);
}
.splash-particles::before{
  top:50%; left:50%;
  animation:splashFloat 14s ease-in-out infinite;
}
.splash-particles::after{
  top:48%; left:52%;
  animation:splashFloat 18s ease-in-out infinite reverse;
  opacity:.6;
}
@keyframes splashFloat{
  0%,100%{ transform:translate(0,0); }
  25%    { transform:translate(20px,-15px); }
  50%    { transform:translate(-15px,10px); }
  75%    { transform:translate(10px,20px); }
}

.splash-scan{
  position:absolute; left:-100%; top:50%;
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, #D4A843, #7eeaff, #D4A843, transparent);
  filter:blur(.5px);
  animation:splashScan 6s ease-in-out infinite;
}
@keyframes splashScan{
  0%   { left:-60%; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { left:120%; opacity:0; }
}

.splash-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:24px;
  max-width:760px;
  opacity:0;
  transform:translateY(20px);
  animation:splashIn 1.4s cubic-bezier(.2,.7,.2,1) .3s forwards;
}
@keyframes splashIn{
  to{ opacity:1; transform:translateY(0); }
}

.splash-mark{
  width:72px; height:72px;
  margin:0 auto 28px;
  position:relative;
}
.splash-mark svg{
  width:100%; height:100%;
  filter:drop-shadow(0 0 24px rgba(212,168,67,.4));
}
.splash-mark::before{
  content:"";
  position:absolute; inset:-12px;
  border:1px dashed rgba(212,168,67,.4);
  border-radius:50%;
  animation:splashRing 8s linear infinite;
}
@keyframes splashRing{
  from{ transform:rotate(0); }
  to  { transform:rotate(360deg); }
}

.splash-brand{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.30em;
  color:rgba(245,241,234,.55);
  text-transform:uppercase;
  margin-bottom:14px;
  font-weight:500;
}

.splash-headline{
  font-family:'Oswald', 'Inter', sans-serif;
  font-weight:300;
  font-size:clamp(56px, 13vw, 156px);
  line-height:.92;
  color:#f5f1ea;
  letter-spacing:-.04em;
  margin:0 0 18px;
  text-shadow:0 4px 60px rgba(0,0,0,.6);
}
.splash-headline em{
  font-style:italic;
  font-weight:400;
  background:linear-gradient(135deg, #f4cb6c 0%, #D4A843 60%, #f4cb6c 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:splashShimmer 4s ease-in-out infinite;
}
@keyframes splashShimmer{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

.splash-sub{
  font-family:'Oswald', 'Inter', sans-serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(15px, 2vw, 19px);
  color:rgba(245,241,234,.70);
  letter-spacing:.005em;
  margin-bottom:48px;
  max-width:48ch;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}

.splash-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:18px 36px;
  background:transparent;
  border:1px solid #D4A843;
  color:#D4A843;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  border-radius:3px;
  transition:all .35s cubic-bezier(.2,.7,.2,1);
  position:relative;
  overflow:hidden;
}
.splash-cta::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(212,168,67,.15), transparent);
  transform:translateX(-100%);
  transition:transform .6s ease;
}
.splash-cta:hover{
  background:#D4A843;
  color:#06060a;
  letter-spacing:.28em;
  padding-left:42px;
  padding-right:42px;
  box-shadow:0 0 40px rgba(212,168,67,.4);
}
.splash-cta:hover::before{
  transform:translateX(100%);
}
.splash-cta:focus-visible{
  outline:2px solid #7eeaff;
  outline-offset:6px;
}
.splash-cta-arrow{
  display:inline-block;
  transition:transform .35s ease;
}
.splash-cta:hover .splash-cta-arrow{
  transform:translateX(6px);
}

.splash-hint{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:.20em;
  color:rgba(245,241,234,.35);
  text-transform:uppercase;
  margin-top:36px;
}
.splash-hint kbd{
  display:inline-block;
  padding:2px 8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  font-family:inherit;
  font-size:10px;
  color:rgba(245,241,234,.7);
  margin:0 4px;
}

.splash-corner{
  position:absolute;
  width:60px; height:60px;
  border:1px solid rgba(212,168,67,.3);
  opacity:.5;
}
.splash-corner.tl{ top:32px; left:32px; border-right:none; border-bottom:none; }
.splash-corner.tr{ top:32px; right:32px; border-left:none; border-bottom:none; }
.splash-corner.bl{ bottom:32px; left:32px; border-right:none; border-top:none; }
.splash-corner.br{ bottom:32px; right:32px; border-left:none; border-top:none; }

.splash-foot{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  letter-spacing:.20em;
  color:rgba(245,241,234,.25);
  text-transform:uppercase;
  text-align:center;
}
.splash-foot em{ color:rgba(212,168,67,.5); font-style:normal; }

@media (max-width:520px){
  .splash-corner{ width:32px; height:32px; }
  .splash-corner.tl, .splash-corner.tr{ top:16px; }
  .splash-corner.tl, .splash-corner.bl{ left:16px; }
  .splash-corner.tr, .splash-corner.br{ right:16px; }
  .splash-corner.bl, .splash-corner.br{ bottom:16px; }
  .splash-foot{ bottom:14px; font-size:9px; }
}

@media (prefers-reduced-motion: reduce){
  .splash-gate, .splash-grid,
  .splash-particles::before, .splash-particles::after,
  .splash-scan, .splash-content,
  .splash-headline em, .splash-mark::before,
  .splash-cta::before{
    animation:none !important;
    transition:opacity .2s ease !important;
  }
  .splash-content{ opacity:1; transform:none; }
}