/* styles.css */
:root{
  --bg: #061024;
  --neon: #9CFF2E;
  --text: rgba(255,255,255,.92);
  --text-dim: rgba(255,255,255,.78);

  --frame-radius: 18px;
  --frame-pad: clamp(18px, 4vw, 42px);

  --logo-max: min(86vw, 560px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background: var(--bg); color: var(--text); }

.splash{
  min-height: 100dvh;
  display:grid;
  place-items:center;
  padding: clamp(14px, 3.5vw, 40px);

  /* Texture background */
  background-image: url("texture.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Dark vignette + center “spotlight” like the reference */
.splash::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 35%,
      rgba(6,16,36,0.15) 0%,
      rgba(6,16,36,0.65) 55%,
      rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}

/* Subtle scanlines across the whole screen */
.splash::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0.00) 3px,
    rgba(0,0,0,0.00) 7px
  );
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events:none;
}

.frame{
  position: relative;
  z-index: 1;
  width: min(860px, 92vw);
  padding: var(--frame-pad);
  border-radius: var(--frame-radius);

  /* Inner border feel */
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 10px rgba(0,0,0,.12);

  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: grid;
  gap: clamp(18px, 3.4vw, 34px);
  justify-items: center;
}

.copy{
  text-align:center;
  line-height:1;
  margin-top: clamp(6px, 1vw, 10px);
}

.title{
  margin:0;
  font-family: "Bebas Neue", "Oswald", system-ui, sans-serif;
  letter-spacing: .08em;
  font-size: clamp(34px, 6.3vw, 64px);
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0,0,0,.6);
}

.subtitle{
  margin: clamp(6px, 1.2vw, 10px) 0 0;
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: clamp(14px, 2.2vw, 22px);
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.logo-wrap{
  position: relative;
  width: var(--logo-max);
  aspect-ratio: 1 / 1; /* keeps a strong centered block like your reference */
  display:grid;
  place-items:center;
  isolation: isolate; /* keep blend effects contained */
}

/* Base logo */
.logo{
  width: 100%;
  height: auto;
  max-width: var(--logo-max);
  user-select:none;
  -webkit-user-drag:none;

  /* “neon” feel + pop */
  filter:
    drop-shadow(0 10px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(156,255,46,.22))
    drop-shadow(0 0 42px rgba(156,255,46,.18));
  transform: scale(1.02);
}

/* Add a slight “glitch tilt” more visible on desktop */
@media (min-width: 820px){
  .logo{ transform: scale(1.04) skewX(-2deg); }
}

/* Glitch overlay copies */
.logo--glitch{
  position:absolute;
  inset:auto;
  width: 100%;
  height: auto;
  opacity: .75;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Green-ish and cyan-ish offsets */
.g1{
  filter:
    hue-rotate(-20deg) saturate(1.2)
    drop-shadow(0 0 18px rgba(156,255,46,.28));
  animation: glitch1 2.6s infinite steps(1, end);
}
.g2{
  filter:
    hue-rotate(150deg) saturate(1.1)
    drop-shadow(0 0 18px rgba(0, 220, 255, .18));
  opacity: .45;
  animation: glitch2 3.1s infinite steps(1, end);
}

/* Logo scanlines (applied only over the logo block) */
.logo-wrap::after{
  content:"";
  position:absolute;
  inset: 8% 0 8% 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.00),
    rgba(0,0,0,0.00) 3px,
    rgba(0,0,0,0.20) 4px,
    rgba(0,0,0,0.20) 5px
  );
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events:none;
}

/* A few horizontal “tears” like the reference */
.logo-wrap::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 0 12%, rgba(156,255,46,.20) 12% 42%, transparent 42% 100%),
    linear-gradient(to right, transparent 0 28%, rgba(156,255,46,.14) 28% 70%, transparent 70% 100%),
    linear-gradient(to right, transparent 0 8%, rgba(156,255,46,.10) 8% 25%, transparent 25% 100%);
  background-repeat:no-repeat;
  background-size: 100% 10px, 100% 7px, 100% 6px;
  background-position: 0 58%, 0 66%, 0 74%;
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events:none;
  animation: tears 3.8s infinite steps(1, end);
}

@keyframes glitch1{
  0%, 12% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  13% { transform: translate(-6px,-2px); clip-path: inset(18% 0 58% 0); }
  14% { transform: translate(4px,1px); clip-path: inset(52% 0 24% 0); }
  15% { transform: translate(-3px,2px); clip-path: inset(8% 0 74% 0); }
  16% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  55% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  56% { transform: translate(7px,0); clip-path: inset(35% 0 40% 0); }
  57% { transform: translate(-5px,0); clip-path: inset(64% 0 18% 0); }
  58%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

@keyframes glitch2{
  0%, 22% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  23% { transform: translate(6px,0); clip-path: inset(10% 0 78% 0); }
  24% { transform: translate(-7px,2px); clip-path: inset(70% 0 14% 0); }
  25% { transform: translate(3px,-1px); clip-path: inset(42% 0 40% 0); }
  26% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  73% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  74% { transform: translate(-6px,0); clip-path: inset(26% 0 52% 0); }
  75% { transform: translate(6px,1px); clip-path: inset(58% 0 22% 0); }
  76%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

@keyframes tears{
  0%, 28% { opacity: .40; background-position: 0 58%, 0 66%, 0 74%; }
  29% { opacity: .70; background-position: 0 54%, 0 63%, 0 71%; }
  30% { opacity: .45; background-position: 0 60%, 0 68%, 0 76%; }
  31%, 100% { opacity: .40; background-position: 0 58%, 0 66%, 0 74%; }
}

/* Mobile: keep everything centered and not cramped */
@media (max-width: 420px){
  .frame{ width: 94vw; }
  .logo-wrap{ width: min(92vw, 420px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .g1, .g2, .logo-wrap::before{ animation: none; }
}