* {
  box-sizing: border-box;
}

:root {
  --shell: #090707;
}

html, body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  height: 100%;
  margin: 0;
  background: var(--shell);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.site-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      #1e0d0f 0%,
      #35090b 16%,
      #680204 48%,
      #a40000 100%
    );
}

.site-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 0, 0, 0.07), transparent 36%),
    linear-gradient(to bottom, rgba(255,255,255,0.015), transparent 20%);
  opacity: .62;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 1;
  background: url("assets/grain.png") repeat;
  background-size: 256px 256px;
  opacity: .62;
}

/* Full-screen VHS overlays. These are deliberately attached to the
   viewport instead of the logo, so the scanlines never form a box. */
.site-shell.vhs-active::before,
.site-shell.vhs-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.site-shell.vhs-active::before {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,.075) 3px,
      rgba(255,255,255,0) 4px
    );
  mix-blend-mode: screen;
  opacity: 0;
  animation: scanlines 550ms steps(1, end) both;
}

.site-shell.vhs-active::after {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 7px,
      rgba(255,70,70,.055) 8px,
      transparent 10px,
      transparent 17px
    );
  mix-blend-mode: screen;
  opacity: 0;
  animation: tracking-noise 550ms steps(1, end) both;
}

.hero {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0 4vw;
}

.glitch-logo {
  position: relative;
  width: min(46vw, 940px);
  aspect-ratio: 1 / 1;
  isolation: isolate;
  filter: drop-shadow(0 0 16px rgba(255, 73, 73, 0.17));
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.logo-main {
  z-index: 2;
}

.logo-coming {
  z-index: 3;
  opacity: 0;
  transform: scale(.90);
}

/*
  VHS-style glitch transition:
  each state holds for ~2 seconds, then a short burst of
  scanlines, tracking noise, RGB separation and horizontal tearing
  switches to the other artwork.
*/
.glitch-logo {
  --glitch-x: 0px;
  --glitch-y: 0px;
}

.glitch-logo.is-glitching .logo-main {
  animation: main-glitch 550ms steps(1, end) both;
}

.glitch-logo.is-glitching .logo-coming {
  animation: coming-glitch 550ms steps(1, end) both;
}

.glitch-slice {
  position: absolute;
  z-index: 9;
  left: -12%;
  width: 124%;
  height: 7%;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.35),
      rgba(255,255,255,0)
    ),
    url("assets/sheeykal-coming-soon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url("assets/sheeykal-logo.png");
  mask-image: url("assets/sheeykal-logo.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mix-blend-mode: screen;
  filter: contrast(1.35) saturate(1.3);
}

.slice-1 { top: 12%; }
.slice-2 { top: 27%; }
.slice-3 { top: 44%; }

.glitch-logo.is-glitching .slice-1 {
  animation: slice-one 550ms steps(1, end) both;
}

.glitch-logo.is-glitching .slice-2 {
  animation: slice-two 550ms steps(1, end) both;
}

.glitch-logo.is-glitching .slice-3 {
  animation: slice-three 550ms steps(1, end) both;
}

@keyframes main-glitch {
  0%, 8% {
    opacity: 1;
    transform: translate(0,0);
    filter: none;
  }
  10% {
    transform: translate(-5px,0);
    filter: saturate(1.8) contrast(1.3);
  }
  13% {
    transform: translate(12px,2px);
    filter: saturate(.5) contrast(1.6);
  }
  17%, 70% {
    opacity: 0;
    transform: translate(-14px,-1px);
  }
  74% {
    opacity: .35;
    transform: translate(8px,1px);
  }
  79% {
    opacity: .8;
    transform: translate(-4px,0);
  }
  84%, 100% {
    opacity: 1;
    transform: translate(0,0);
    filter: none;
  }
}

@keyframes coming-glitch {
  0%, 15% {
    opacity: 0;
    transform: translate(0,0) scale(.90);
  }
  19% {
    opacity: .25;
    transform: translate(8px,0) scale(.90);
  }
  23% {
    opacity: .85;
    transform: translate(-7px,1px) scale(.90);
  }
  27%, 68% {
    opacity: 1;
    transform: translate(0,0) scale(.90);
  }
  72% {
    opacity: .55;
    transform: translate(10px,-1px) scale(.90);
  }
  78% {
    opacity: .1;
    transform: translate(-12px,1px) scale(.90);
  }
  84%, 100% {
    opacity: 0;
    transform: translate(0,0) scale(.90);
  }
}

@keyframes scanlines {
  0%, 7%, 100% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: .28; }
  19% { opacity: .95; }
  24% { opacity: .12; }
  31% { opacity: .9; }
  37% { opacity: .22; }
  43% { opacity: 1; }
  49% { opacity: .16; }
  56% { opacity: .95; }
  62% { opacity: .3; }
  69% { opacity: 1; }
  76% { opacity: .2; }
  83% { opacity: .92; }
  91% { opacity: .32; }
  96% { opacity: .8; }
}

@keyframes tracking-noise {
  0%, 100% { opacity: 0; }
  8% { opacity: .9; transform: translateY(-13px); }
  14% { opacity: .2; transform: translateY(18px); }
  21% { opacity: .95; transform: translateY(-7px); }
  29% { opacity: .15; transform: translateY(24px); }
  36% { opacity: .88; transform: translateY(-17px); }
  44% { opacity: .22; transform: translateY(11px); }
  52% { opacity: 1; transform: translateY(-21px); }
  60% { opacity: .12; transform: translateY(17px); }
  68% { opacity: .94; transform: translateY(-10px); }
  77% { opacity: .18; transform: translateY(21px); }
  86% { opacity: .9; transform: translateY(-15px); }
  94% { opacity: .25; transform: translateY(9px); }
}

@keyframes slice-one {
  0%, 6% { opacity: 0; transform: translateX(0) skewX(0); }
  9% { opacity: 1; transform: translateX(-55px) skewX(-10deg); }
  14% { opacity: 0; transform: translateX(82px); }
  20% { opacity: .8; transform: translateX(31px) skewX(5deg); }
  25% { opacity: 0; }
  33% { opacity: .95; transform: translateX(-76px); }
  39% { opacity: 0; }
  48% { opacity: .8; transform: translateX(61px) skewX(-5deg); }
  54% { opacity: 0; }
  64% { opacity: 1; transform: translateX(-68px) skewX(7deg); }
  70% { opacity: 0; }
  80% { opacity: .9; transform: translateX(53px); }
  88% { opacity: 0; }
  94% { opacity: .65; transform: translateX(-32px); }
  100% { opacity: 0; }
}

@keyframes slice-two {
  0%, 12% { opacity: 0; }
  16% { opacity: .95; transform: translateX(72px) skewX(8deg); }
  22% { opacity: 0; transform: translateX(-91px); }
  30% { opacity: .75; transform: translateX(25px); }
  35% { opacity: 0; }
  43% { opacity: 1; transform: translateX(-64px) skewX(-7deg); }
  50% { opacity: 0; }
  59% { opacity: .9; transform: translateX(79px); }
  66% { opacity: 0; }
  74% { opacity: .8; transform: translateX(-47px) skewX(6deg); }
  81% { opacity: 0; }
  90% { opacity: .95; transform: translateX(62px); }
  96%,100% { opacity: 0; }
}

@keyframes slice-three {
  0%, 19% { opacity: 0; }
  23% { opacity: .9; transform: translateX(-77px) skewX(7deg); }
  29% { opacity: 0; }
  37% { opacity: .85; transform: translateX(48px); }
  43% { opacity: 0; }
  51% { opacity: 1; transform: translateX(-61px) skewX(-8deg); }
  58% { opacity: 0; }
  67% { opacity: .9; transform: translateX(74px); }
  73% { opacity: 0; }
  82% { opacity: .95; transform: translateX(-51px) skewX(5deg); }
  89% { opacity: 0; }
  96% { opacity: .75; transform: translateX(36px); }
  100% { opacity: 0; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .hero {
    padding: 0 6vw;
  }

  .glitch-logo {
    width: min(78vw, 760px);
  }
}

@media (max-width: 520px) {
  .hero {
    padding: 0 7vw;
  }

  .glitch-logo {
    width: min(92vw, 620px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-logo.is-glitching .logo-main,
  .glitch-logo.is-glitching .logo-coming,
  .glitch-logo.is-glitching .glitch-slice {
    animation: none;
  }
}


/* Mobile viewport fix: keep the artwork centered and the gradient continuous. */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    height: 100%;
    background: #680204;
  }

  body {
    min-height: 100svh;
    height: 100svh;
  }

  .site-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background:
      linear-gradient(
        to bottom,
        #1e0d0f 0%,
        #35090b 16%,
        #680204 48%,
        #a40000 100%
      );
  }

  .hero {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .glitch-logo {
    width: min(82vw, 520px);
    margin: 0;
  }

  .footer-links {
    bottom: max(18px, env(safe-area-inset-bottom));
  }
}


html, body, button, input, textarea, select { font-family: "SFMono-Regular", "SF Mono", "Roboto Mono", "Courier New", monospace; }
.footer-links { position:absolute; left:50%; bottom:clamp(18px,3.2vw,34px); transform:translateX(-50%); z-index:5; display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.5vw,28px); white-space:nowrap; }
.footer-links a { color:#fff; font:inherit; font-size:clamp(11px,1vw,14px); font-weight:400; line-height:1; letter-spacing:.02em; text-decoration:none; opacity:.9; transition:opacity .18s ease; }
.footer-links a:hover, .footer-links a:focus-visible { opacity:1; }
@media (max-width:700px) { .footer-links { bottom:max(18px,env(safe-area-inset-bottom)); } .footer-links a { font-size:11px; } }