/* ===============================
   FONTS
================================ */
@import url('https://db.onlinewebfonts.com/c/247b08e72137c5cede6d37c51939f2a5?family=Corinth+Stencil+W01+Regular');

@font-face {
  font-family: "Damavand-Bold";
  src: url("../font/Damavand-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: 'DIN Condensed';
  src: url('../font/din-druk/DINCondensed-Bold.woff2') format('woff2'),
    url('../font/din-druk/DINCondensed-Bold.woff') format('woff'),
    url('../font/din-druk/DINCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Druk Text Wide';
  src: url('../font/din-druk/DrukTextWide-Heavy.woff2') format('woff2'),
    url('../font/din-druk/DrukTextWide-Heavy.woff') format('woff'),
    url('../font/din-druk/DrukTextWide-Heavy.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DINAlternate-Bold';
  src: url('../font/din-druk/DINAlternate-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   RESET
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", "Segoe UI", sans-serif;
}

body {
  height: 100vh;
  overflow: hidden;
  color: #cfe8ff;
  background: #000;
}

/* ===============================
   OVERLAY + GLITCH INTRO
================================ */
.overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.1);
  animation: overlayIntro 2.8s ease-out forwards;
  z-index: 0;
}

@keyframes overlayIntro {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.glitch {
  will-change: transform, opacity;
}

/* delay glitch until fade settles */
.glitch::before,
.glitch::after,
.glitch .channel {
  animation-delay: 1.5s;
  animation-play-state: paused;
  opacity: 0;
}

/* glitch active state */
.glitch.active::before,
.glitch.active::after,
.glitch.active .channel {
  animation-play-state: running;
  opacity: 1;
}


/* ===============================
   ACCESS BOX (FORM CONTAINER)
================================ */
.access-box {
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
  position: absolute;
  max-width: 1000px;
  height: auto;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 160px 15px 140px;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr;
  /* background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px) saturate(120%); */
  box-shadow: inset 0 0 40px rgba(0, 60, 80, 0.04);
  overflow: hidden;
  z-index: 5;
  mix-blend-mode: lighten;
}

/* hidden until overlay finishes */
.access-box.hidden {
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.96);
  pointer-events: none;
}

.access-box.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: boxIntro 3s ease-out forwards;
  pointer-events: auto;
}

@keyframes boxIntro {
  from {
    opacity: 0;
    filter: blur(6px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

canvas#ui {
  pointer-events: none;
  max-width: 100%;
  position: absolute;
  inset: 0;
  top: 8%;
  left: 5%;
  z-index: 1;
}


/* ===============================
   SCANLINES
================================ */
/* .scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 1px,
      transparent 2px,
      transparent 4px);
  pointer-events: none;
  animation: scanShift 0.35s linear infinite;
}

@keyframes scanShift {
  to {
    background-position: 0 4px;
  }
} */

/* ===============================
   PANELS
================================ */
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.confirmation {
  display: none;
}

.access-box.submitted #formView {
  display: none;
}

.access-box.submitted #confirmView {
  display: flex;
  animation: glitchIn 0.4s ease-out;
  padding-top: 50px;
}

/* ===============================
   TEXT
================================ */

.access-box .panel .title {
  margin-bottom: 30px;
}

.title a {
  font-family: "Damavand-Bold", sans-serif;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 3px;
  color: rgba(220, 240, 255, 0.98);
  text-decoration: none;
}

/* ===============================
   FORM
================================ */
.label {
  display: inline-block;
  width: 92%;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 20px;
  font-family: 'DINAlternate-Bold';
}

input {
  width: 70%;
  padding: 18px;
  font-size: 16px;
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  margin-bottom: 30px;
  font-family: 'DINAlternate-Bold';
}

input::placeholder {
  color: #ffffff;
  font-family: 'DINAlternate-Bold';
}

input:focus {
  border-color: rgba(0, 180, 255, 0.95);
  box-shadow: 0 0 28px rgba(0, 150, 230, 0.08);
  outline: none;
}

input.invalid {
  border-color: rgba(255, 120, 120, 0.95);
}

/* ===============================
   BUTTON
================================ */
button {
  font-size: 14px;
  line-height: 22px;
  border-radius: 50px;
  width: fit-content;
  padding: 18px 30px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.08);
  border: 2px solid #36fda1;
  color: #36fda1;
  cursor: pointer;
  position: relative;
  text-shadow:
    0 0 6px rgba(54, 253, 161, 0.7);
  transition: all 0.3s ease;
  font-family: 'DINAlternate-Bold';
}

button::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 60px;
  background: rgba(120, 180, 255, 0.35);
  filter: blur(20px);
  opacity: 0.6;
  z-index: -1;
}

button:hover {
  box-shadow:
    0 0 6px rgba(54, 253, 161, 0.4),
    0 0 18px rgba(54, 253, 161, 0.3),
    0 0 36px rgba(54, 253, 161, 0.2),
    inset 0 0 8px rgba(54, 253, 161, 0.2);
}


/* ===============================
   STATUS
================================ */
.status {
  font-size: 13px;
  letter-spacing: 2px;
  margin-top: 30px;
  color: rgba(140, 190, 210, 0.7);
}

/* ===============================
   CONFIRMATION
================================ */
.access-btn {
  width: 48%;
  margin-top: 20px;
  padding: 20px;
  border-radius: 50px;
  background: transparent;
  border: 2px solid rgba(0, 255, 120, 0.45);
  color: rgba(200, 255, 220, 0.9);
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;

  /* neon glow */
  box-shadow:
    0 0 10px rgba(0, 255, 120, 0.35),
    0 0 25px rgba(0, 255, 120, 0.25),
    inset 0 0 10px rgba(0, 255, 120, 0.25);

  transition: all 0.3s ease;
font-family: 'DINAlternate-Bold';
}

.access-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 60px;
  background: rgba(0, 255, 120, 0.25);
  filter: blur(18px);
  opacity: 0.6;
  z-index: -1;
}

.access-box.submitted .access-btn {
  border-color: #c3fe00;
  color: #ffffff;
  text-shadow:
    0 0 5px rgba(195, 254, 0, 0.6),
    0 0 10px rgba(195, 254, 0, 0.6);
  box-shadow:
    0 0 15px rgba(195, 254, 0, 0.6),
    0 0 35px rgba(195, 254, 0, 0.45),
    0 0 60px rgba(195, 254, 0, 0.25),
    inset 0 0 12px rgba(195, 254, 0, 0.3);
}



/* ===============================
   GLITCH ANIMATIONS (UNCHANGED)
================================ */
/* keep your existing glitch keyframes here exactly as-is */
/* glitch-before, glitch-after, rgb-shift-r/g/b, channels */

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

@media (max-width: 820px) {
  canvas#ui {
    top: 12%;
    left: 0%;
  }
}

@media (max-width: 768px) {
  canvas#ui {
    top: 14.5%;
    left: 0%;
  }
}


@media (max-width: 650px) {
  .access-box {
    max-width: 100%;
    width: 96%;
  }

  button {
    font-size: 14px;
    line-height: 22px;
    padding: 12px 24px;
  }

  input {
    padding: 12px;
    margin-bottom: 20px;
  }

  .access-box.submitted #confirmView {
    padding-top: 0;
  }

  .access-btn {
    width: 60%;
    padding: 14px;
  }

  .access-box .panel .title {
    margin-bottom: 20px;
  }

  canvas#ui {
    top: 14%;
    left: 0%;
    height: 400px;
  }
}

@media (max-width: 479px) {
  .access-btn {
    width: 70%;
  }
}


/* glitch animation */
.glitch {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* ✅ keep image visible */
  height: 100%;
  overflow: hidden;
}

.glitch::before,
.glitch::after,
.glitch .channel {
  background: inherit;
  background-size: cover;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.glitch::before {
  animation: glitch-before 1.5s linear infinite alternate both;
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 60.2424383843%, 100% 60.2424383843%, 100% 64.385097299%, 0% 64.385097299%);
    transform: translate(4.6723007634%, 0.0768854618%);
  }

  2% {
    clip-path: polygon(0% 40.4310089253%, 100% 40.4310089253%, 100% 46.6777943435%, 0% 46.6777943435%);
    transform: translate(-3.2636763008%, 0.44841077%);
  }

  4% {
    clip-path: polygon(0% 57.1031689199%, 100% 57.1031689199%, 100% 61.3383454169%, 0% 61.3383454169%);
    transform: translate(-3.5971570603%, -0.4354973279%);
  }

  6% {
    clip-path: polygon(0% 6.5084639817%, 100% 6.5084639817%, 100% 16.2407516035%, 0% 16.2407516035%);
    transform: translate(6.0981293577%, -0.0301149628%);
  }

  8% {
    clip-path: polygon(0% 0.9655159272%, 100% 0.9655159272%, 100% 7.5973210718%, 0% 7.5973210718%);
    transform: translate(-6.0086560449%, 0.0622674451%);
  }

  10% {
    clip-path: polygon(0% 14.6287221052%, 100% 14.6287221052%, 100% 17.2329712148%, 0% 17.2329712148%);
    transform: translate(-4.6507640952%, 0.4551049381%);
  }

  12% {
    clip-path: polygon(0% 50.8153866163%, 100% 50.8153866163%, 100% 52.4564500867%, 0% 52.4564500867%);
    transform: translate(-2.2496187783%, -0.4395042354%);
  }

  14% {
    clip-path: polygon(0% 8.3281009422%, 100% 8.3281009422%, 100% 11.5074624414%, 0% 11.5074624414%);
    transform: translate(0.1174691593%, -0.0200017956%);
  }

  16% {
    clip-path: polygon(0% 23.9992233803%, 100% 23.9992233803%, 100% 33.6893314513%, 0% 33.6893314513%);
    transform: translate(-4.5798692269%, 0.1503437049%);
  }

  18% {
    clip-path: polygon(0% 10.6765175025%, 100% 10.6765175025%, 100% 17.6481759269%, 0% 17.6481759269%);
    transform: translate(-0.6665501383%, -0.0055193146%);
  }

  20%,
  100% {
    clip-path: none;
    transform: none;
  }
}

.glitch::after {
  animation: glitch-after 1.5s linear infinite alternate both;
  content: "";
}

@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 25.209210494%, 100% 25.209210494%, 100% 34.7256503248%, 0% 34.7256503248%);
    transform: translate(-6.4480711418%, -0.0740554892%);
  }

  2% {
    clip-path: polygon(0% 71.3930305336%, 100% 71.3930305336%, 100% 78.9756543759%, 0% 78.9756543759%);
    transform: translate(-7.5279436735%, 0.2032222788%);
  }

  4% {
    clip-path: polygon(0% 34.4327704902%, 100% 34.4327704902%, 100% 39.845159521%, 0% 39.845159521%);
    transform: translate(6.4426726952%, 0.0794000694%);
  }

  6% {
    clip-path: polygon(0% 50.8640480189%, 100% 50.8640480189%, 100% 60.8294829109%, 0% 60.8294829109%);
    transform: translate(6.6071291425%, -0.2245695218%);
  }

  8% {
    clip-path: polygon(0% 44.5213095766%, 100% 44.5213095766%, 100% 51.9951058847%, 0% 51.9951058847%);
    transform: translate(4.6986504619%, 0.1599995922%);
  }

  10% {
    clip-path: polygon(0% 76.687700198%, 100% 76.687700198%, 100% 85.7181369879%, 0% 85.7181369879%);
    transform: translate(1.0910257044%, -0.372649153%);
  }

  12% {
    clip-path: polygon(0% 26.0591302602%, 100% 26.0591302602%, 100% 30.497358557%, 0% 30.497358557%);
    transform: translate(6.7716174688%, -0.1406998828%);
  }

  14% {
    clip-path: polygon(0% 2.9576691897%, 100% 2.9576691897%, 100% 9.7676139001%, 0% 9.7676139001%);
    transform: translate(4.6740177265%, 0.3669936296%);
  }

  16% {
    clip-path: polygon(0% 20.010139562%, 100% 20.010139562%, 100% 22.9684760541%, 0% 22.9684760541%);
    transform: translate(1.6198123352%, 0.4496168332%);
  }

  18% {
    clip-path: polygon(0% 38.154874119%, 100% 38.154874119%, 100% 39.8525365835%, 0% 39.8525365835%);
    transform: translate(3.2737174872%, -0.4948392329%);
  }

  20%,
  100% {
    clip-path: none;
    transform: none;
  }
}

.glitch .channel {
  mix-blend-mode: screen;
}

.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.glitch .r {
  animation: rgb-shift-r 1.5s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-r {
  0% {
    transform: translate(1.5353126698%, -0.495617139%);
  }

  2% {
    transform: translate(1.1919723434%, -0.1697625397%);
  }

  4% {
    transform: translate(-1.2950579117%, 0.165840486%);
  }

  6% {
    transform: translate(0.4708834166%, 0.1631112833%);
  }

  8% {
    transform: translate(-0.483355837%, 0.2256988814%);
  }

  10% {
    transform: translate(-0.9561016074%, -0.3596908036%);
  }

  12% {
    transform: translate(-1.1410811695%, -0.1592772891%);
  }

  14% {
    transform: translate(0.6098908312%, -0.0792452565%);
  }

  16% {
    transform: translate(0.625608155%, 0.2906043575%);
  }

  18% {
    transform: translate(0.4928679427%, 0.1086889274%);
  }

  20%,
  100% {
    transform: none;
  }
}

.glitch .r::before {
  background: #f00;
}

.glitch .g {
  animation: rgb-shift-g 1.5s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-g {
  0% {
    transform: translate(1.2154478525%, -0.347355253%);
  }

  2% {
    transform: translate(-1.2624870429%, -0.0713159565%);
  }

  4% {
    transform: translate(-1.6124046552%, 0.3791447377%);
  }

  6% {
    transform: translate(-0.1544363203%, 0.0774849675%);
  }

  8% {
    transform: translate(1.7854829273%, 0.458056996%);
  }

  10% {
    transform: translate(1.3011716981%, -0.2778631305%);
  }

  12% {
    transform: translate(-1.2381015507%, 0.4540072662%);
  }

  14% {
    transform: translate(1.4700160528%, -0.4380268874%);
  }

  16% {
    transform: translate(-0.1812073483%, -0.3570674215%);
  }

  18% {
    transform: translate(-0.3167198984%, -0.0459598028%);
  }

  20%,
  100% {
    transform: none;
  }
}

.glitch .g::before {
  background: #0f0;
}

.glitch .b {
  animation: rgb-shift-b 1.5s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-b {
  0% {
    transform: translate(0.2126125322%, -0.013415839%);
  }

  2% {
    transform: translate(1.2142869173%, -0.3017128382%);
  }

  4% {
    transform: translate(-1.0924257493%, -0.3553063656%);
  }

  6% {
    transform: translate(-0.4914286145%, 0.1528118712%);
  }

  8% {
    transform: translate(-0.7924382484%, -0.3365849538%);
  }

  10% {
    transform: translate(-1.7758033671%, -0.0011685676%);
  }

  12% {
    transform: translate(-0.3353361573%, 0.3180371245%);
  }

  14% {
    transform: translate(-0.1345797544%, 0.2303798334%);
  }

  16% {
    transform: translate(0.4007827421%, -0.2974680585%);
  }

  18% {
    transform: translate(-0.0366478714%, 0.1546511547%);
  }

  20%,
  100% {
    transform: none;
  }
}

.glitch .b::before {
  background: #00f;
}