/* Splash screen button styling */
.btn-splash {
  display: inline-block;
  padding: 10px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #2a3cad 0%, #50dfdb 100%);
  border: none;
  border-radius: 30px;
  box-shadow: 0 4px 16px rgba(23,32,90,0.2);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  text-decoration: none;
}
.btn-splash:hover, .btn-splash:focus {
  background: linear-gradient(90deg, #50dfdb 0%, #2a3cad 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(23,32,90,0.3);
}

/* Menu button styling */
.ui-btn {
  display: inline-block;
  padding: 8px 22px;
  font-size: 1rem;
  font-weight: 500;
  color: #2a3cad;
  background: #fff;
  border: 2px solid #2a3cad;
  border-radius: 24px;
  transition: background 0.2s, color 0.2s, border 0.2s;
  cursor: pointer;
  text-decoration: none;
  margin: 0 4px;
}
.ui-btn:hover, .ui-btn:focus {
  background: #2a3cad;
  color: #fff;
  border-color: #50dfdb;
}
/* you can add your own custom css here if you don't want to worry about SASS/SCSS */

/* Global dark background override so pages aren't white */
body.site {
  background: radial-gradient(1200px 800px at 20% -10%, #0f1022 0%, #0b0f1a 55%, #090c18 100%);
  color: #e5e7eb;
}
/* Ensure Bootstrap light theme doesn't force white */
body.site[data-bs-theme="light"],
body.site { background-color: transparent !important; }


/* Landing Splash Overhaul */
.splash-landing {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    linear-gradient(180deg, rgba(9,3,20,0.7), rgba(8,5,18,0.85)),
    url('../images/landing.webp') center/cover no-repeat fixed;
}
/* Purple neon variant */
.glitch-form-wrapper {
  --bg-color: rgba(7,7,12,0.8);
  --primary-color: #BC13FE;
  --secondary-color: #7b2cbf;
  --text-color: #f1eafe;
  --font-family: 'Fira Code', Consolas, 'Courier New', monospace;
  display:flex; justify-content:center; align-items:center;
}
.glitch-card { background: var(--bg-color); width:100%; max-width:420px; border:1px solid rgba(188,19,254,.35); box-shadow: 0 0 24px rgba(188,19,254,.15), inset 0 0 10px rgba(0,0,0,.5); margin:0 auto; }
.card-header { display:flex; justify-content:space-between; align-items:center; background: rgba(0,0,0,.25); padding:.6rem 1rem; border-bottom:1px solid rgba(188,19,254,.3) }
.card-title { display:flex; align-items:center; gap:.5rem; color: var(--primary-color); text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:.8rem }
.card-title svg { stroke: var(--primary-color) }
.card-dots span { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2b2b2b; margin-left:5px }
.card-body { padding:1.5rem }
.form-group { position:relative; margin-bottom:1.25rem }
.glitch-form-wrapper .form-group input { width:100%; background:transparent; border:none; border-bottom:2px solid rgba(188,19,254,.35); padding:.75em 0; font-size:1rem; color:var(--text-color); outline:none; transition:border-color .3s }
.glitch-form-wrapper .form-label { position:absolute; top:.75em; left:0; font-size:1rem; color:var(--primary-color); opacity:.7; text-transform:uppercase; letter-spacing:.1em; pointer-events:none; transition:all .3s }
.glitch-form-wrapper .form-group input:focus { border-color: var(--primary-color) }
.glitch-form-wrapper .form-group input:focus + .form-label,
.glitch-form-wrapper .form-group input:not(:placeholder-shown) + .form-label { top:-1.2em; font-size:.8rem; opacity:1 }
@keyframes glitch-anim { 0%{transform:translate(0)}20%{transform:translate(-5px,3px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-3px)}100%{transform:translate(0)} }
.submit-btn { width:100%; padding:.85em; margin-top:1rem; background:transparent; border:2px solid var(--primary-color); color:var(--primary-color); font-weight:700; text-transform:uppercase; letter-spacing:.2em; cursor:pointer; transition:all .3s; position:relative }
.submit-btn:hover, .submit-btn:focus { background:var(--primary-color); color:#0b0b0e; box-shadow:0 0 25px var(--primary-color) }
.login-feedback { margin-top:.75rem; color:#ffd1d1 }
.reset-link { display:inline-block; margin-top:.5rem; color:#d7b7ff }

/* New splash styles */
.splash-landing .splash-logo { font-family: 'Bruno Ace SC', system-ui, sans-serif; font-size: clamp(36px, 6vw, 92px); letter-spacing:.04em; line-height:1.05; background-image:url('../images/echoes-logo-bg.gif'); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:0 0 22px rgba(188,19,254,.35) }
.splash-landing .splash-tagline { margin-top:14px; font-size:clamp(16px, 2.1vw, 22px); line-height:1.6; color:#e9dbff; font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif }

.eotg-topnav { background:#000 !important; border-bottom:1px solid rgba(188,19,254,.25) }
.eotg-topnav .navbar-toggler { border-color:#fff }
.eotg-topnav .navbar-toggler-icon { filter: invert(1) }
.eotg-brand { display:flex; align-items:center; gap:.75rem; font-family:'Quantico', system-ui, sans-serif; color:#fff; text-shadow: 0 0 12px rgba(188,19,254,.8), 0 0 28px rgba(188,19,254,.35); letter-spacing:.08em }
.eotg-brand-logo { max-height:48px; width:auto }
.eotg-brand-name { display:inline-flex; align-items:center; font-size:clamp(1rem, 2vw, 1.35rem); letter-spacing:.06em; color:#f7f5ff; text-transform:uppercase }
.eotg-topnav .eotg-links .nav-link { color:#fff !important; padding:.6rem 1rem; text-transform: none; letter-spacing:.02em }
.eotg-topnav .eotg-links .nav-link:hover { color:#e7dbff !important }
.eotg-topnav .eotg-links .nav-link.active { color:#e7dbff !important; border-bottom:2px solid #BC13FE }

/* Grid subnav (section-grid pages) */
.grid-subnav { background:#0a0a0a; border-bottom:1px solid rgba(239,68,68,.25) }
.grid-subnav .grid-links { list-style:none; margin:0; padding:.5rem 0; display:flex; gap:18px; justify-content:center }
.grid-subnav .grid-links a { color:#ffffff; text-decoration:none; font-weight:600; letter-spacing:.02em }
.grid-subnav .grid-links a:hover { color:#ffedd5 }
.grid-subnav .grid-links a.active { color:#ffedd5; border-bottom:2px solid #BC13FE; padding-bottom:.25rem }

/* Keep footer hidden on landing if desired; show topbar */
.splash-landing ~ footer { display:none }

.splash-box{
  position: absolute;
  top: 70%;
  left: 15%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #111845a6;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 20px 50px rgb(23, 32, 90);
  border: 2px solid #2a3cad;
  color: white;
  padding: 20px;
}

.splash-box:before{
  content: '';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.1);
  transition:0.5s;
  pointer-events: none;
}

.splash-box:hover:before{
  left:-50%;
  transform: skewX(-5deg);
}


.splash-box .content{
  position:absolute;
  top:15px;
  left:15px;
  right:15px;
  bottom:15px;
  border:1px solid #f0a591;
  padding:5px;
  text-align:center;
  box-shadow: 0 5px 10px rgba(9,0,0,0.5);
  
}

.splash-box span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  
}

.splash-box span:nth-child(1)
{
  transform:rotate(0deg);
}

.splash-box span:nth-child(2)
{
  transform:rotate(90deg);
}

.splash-box span:nth-child(3)
{
  transform:rotate(180deg);
}

.splash-box span:nth-child(4)
{
  transform:rotate(270deg);
}

.splash-box span:before
{
  content: '';
  position: absolute;
  width:100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
  transform:scaleX(0);
  transform-origin: left;
  }
  50%
  {
    transform:scaleX(1);
  transform-origin: left;
  }
  50.1%
  {
    transform:scaleX(1);
  transform-origin: right;
    
  }
  
  100%
  {
    transform:scaleX(0);
  transform-origin: right;
    
  }
}

/* Splash: animated GIF-in-text logo + glow */
.splash-landing.expanded .splash-card { max-width: 1100px }
.splash-view { text-align: center }
.splash-actions { margin-top: 32px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap }
  .btn-splash {
 --glow-color: rgb(217, 176, 255);
 --glow-spread-color: rgba(191, 123, 255, 0.781);
 --enhanced-glow-color: rgb(231, 206, 255);
 --btn-color: rgb(100, 61, 136);
 border: .25em solid var(--glow-color);
 padding: 1em 3em;
 color: var(--glow-color);
 font-size: 15px;
 font-weight: bold;
 background-color: var(--btn-color);
 border-radius: 1em;
 outline: none;
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
 text-shadow: 0 0 .5em var(--glow-color);
 position: relative;
 transition: all 0.3s;
}

.btn-splash::after {
 pointer-events: none;
 content: "";
 position: absolute;
 top: 120%;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: var(--glow-spread-color);
 filter: blur(2em);
 opacity: .7;
 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

.btn-splash:hover {
 color: var(--btn-color);
 background-color: var(--glow-color);
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

.btn-splash:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}
.ui-btn {
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 15px 20px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #FAC921;
  --default-btn-color: #fff;
  --font-size: 16px;
  /* 👆 this field should not be empty */
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
  /* 👆 this field should not be empty */
}

/* button settings 👆 */

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "â„–:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}
.bruno-ace-sc-regular {
  font-family: "Bruno Ace SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Section-grid page background image override */
body.section-grid {
  background: var(--eotg-feed-bg, radial-gradient(1200px 800px at 20% -10%, #141a45 0%, #0b0f2b 55%, #070a1a 100%)) fixed;
  background-size: var(--eotg-feed-bgsize, cover);
  background-repeat: var(--eotg-feed-bgrepeat, no-repeat);
}

/* ENTER glitch button (neon purple + cyan) */

/* Card-style splash box (from user's design) */
.card {
  --border: 4px;
  --rounded: 16px;
  --quantity: 12;
  --w-card: 450px;
  --h-card: 400px;
  margin: 0 auto;
  width: var(--w-card);
  height: var(--h-card);
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--rounded);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--border);
}
.card::before,
.card::after {
  content: "";
  z-index: -1;
  position: absolute;
  will-change: auto;
  --size: calc(100%);
  width: var(--size);
  height: var(--size);
  border-radius: var(--rounded);
  background-size: 400% 400%;
  animation: bg-spin 3s linear 0s infinite normal none running;
  background-image: radial-gradient(circle farthest-side at 0 100%, #00ccb1, transparent), radial-gradient(circle farthest-side at 100% 0, #5ddcff, transparent), radial-gradient(circle farthest-side at 100% 100%, #3c67e3, transparent), radial-gradient(circle farthest-side at 0 0, #4e00c2, #0000);
}
.card::after {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.5s;
  animation-delay: 0.5s;
  filter: blur(24px);
  opacity: 0.7;
}
@keyframes bg-spin {
  25% { background-position: right 20% bottom 40%; }
  75% { background-position: left 45% top 20%; }
}

.content {
  position: absolute;
  width: calc(100% - (var(--border) * 4));
  height: calc(100% - (var(--border) * 4));
  border-radius: calc(var(--rounded) - 4px);
  overflow: hidden;
  z-index: 7;
  background-color: rgba(25,28,41,0.55);
}