/* assets/css/pages/shared.css */

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

:root{
  --primary:#00d9ff;
  --secondary:#ff00ea;
  --dark:#0a0a0f;
  --light:#ffffff;
  --glow:#00ffcc;
  --font-display:'Orbitron', monospace;
  --font-heading:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
}

html{
  min-height:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  font-family:var(--font-body);
  background:var(--dark);
  overflow-x:hidden;
  font-weight:300;
  letter-spacing:.02em;
  position:relative;
  color:var(--light);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100svh;
  height:100lvh;
  z-index:-2;
  pointer-events:none;
  background-color:var(--dark);
  background-image:url("https://sosmagic.b-cdn.net/Achterground%20enzo/Achtergrond%20.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  will-change:transform;
  opacity:1;
  transition:opacity .35s ease;
}

body.bg-video-ready::before{
  opacity:0;
}

.bg-video-layer{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100svh;
  height:100lvh;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.bg-video-layer video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

img,
svg,
video{
  max-width:100%;
}

a{
  color:inherit;
}

[hidden]{
  display:none !important;
}

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius:10px;
}

/* Header */
.site-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  padding:18px 20px;
  pointer-events:none;
}

.site-topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:auto;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu-wrap{
  position:relative;
}

.icon-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,0);
  color:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .15s ease, border-color .2s ease, filter .2s ease;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

.icon-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.28);
}

@keyframes sharedNeonShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.icon-btn::before,
.menu-item::before,
.menu-link::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    rgba(255,0,255,.98) 0%,
    rgba(255,0,255,.98) 30%,
    rgba(0,255,255,.98) 70%,
    rgba(0,255,255,.98) 100%
  );
  background-size:300% 300%;
  opacity:1;
  animation:sharedNeonShift 4.2s linear infinite;
  z-index:-1;
  pointer-events:none;
  filter:saturate(1.25) contrast(1.05);
}

.icon-btn::after,
.menu-item::after,
.menu-link::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    rgba(255,0,255,0) 0%,
    rgba(255,0,255,.70) 35%,
    rgba(0,255,255,.70) 65%,
    rgba(0,255,255,0) 100%
  );
  background-size:300% 300%;
  opacity:.85;
  animation:sharedNeonShift 4.2s linear infinite;
  z-index:-2;
  pointer-events:none;
  filter:blur(14px);
}

.icon-btn:hover,
.menu-item:hover,
.menu-link:hover{
  filter:brightness(1.06);
}

.home-btn svg{
  display:block;
}

.menu-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:170px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.menu-panel--wide{
  min-width:230px;
}

.menu-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.menu-item,
.menu-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:inherit;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  color:rgba(255,255,255,.94);
}

.menu-item{
  width:100%;
  padding:12px;
  cursor:pointer;
}

.menu-link{
  padding:12px;
  text-decoration:none;
}

.menu-link:hover,
.menu-item:hover{
  border-color:rgba(255,255,255,.22);
}

@media (max-width:768px){
  .site-topbar{ padding:12px; }

  .icon-btn{
    width:34px;
    height:34px;
    border-radius:10px;
  }

  .menu-panel{
    top:calc(100% + 8px);
    min-width:120px;
  }

  .menu-panel--wide{
    min-width:154px;
  }

  .menu-list{ gap:7px; }

  .menu-item,
  .menu-link{
    padding:8px 10px;
    border-radius:10px;
    letter-spacing:.07em;
    font-size:12px;
  }
}

/* Footer */
.footer{
  padding:8px 5% 6px;
  background:rgba(0,0,0,.12);
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}

.footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
  animation:sharedFooterGlow 3s ease-in-out infinite;
}

@keyframes sharedFooterGlow{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}

.footer-content{
  max-width:1200px;
  margin:0 auto;
}

.footer-info-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:3px 14px;
  font-size:12px;
  line-height:1.15;
  color:rgba(255,255,255,.78);
}

.footer-info-item{
  color:rgba(255,255,255,.78);
  font-family:var(--font-heading);
  font-size:.95rem;
  line-height:1.25;
  text-align:center;
}

.footer-info-item strong{
  font-weight:600;
  color:rgba(255,255,255,.88);
}

.footer-info-item a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
}

.footer-info-item a:hover{
  text-decoration:underline;
}

.footer-copyright{
  margin-top:4px;
  font-size:11px;
  line-height:1.15;
  opacity:.65;
  text-align:center;
  color:rgba(255,255,255,.6);
  font-family:var(--font-heading);
  font-weight:400;
  letter-spacing:.02em;
}

@media (max-width:900px){
  .footer-info-grid{
    grid-template-columns:1fr;
    gap:3px;
    text-align:center;
  }
}