/* =========================
   PANDGEY GLITCH STYLE (global)
   ========================= */

/* Optional: import fonts (pick any you like) */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=UnifrakturCook:wght@700&family=Courier+Prime:wght@400;700&display=swap');

:root {
    --bg: #05050500;
    --panel-bg: #000;
    --outer-border: rgba(255, 255, 255, .35);
    --inner-border: rgba(255, 255, 255, .85);
    --text: rgba(255, 255, 255, .82);
    --text-dim: rgba(255, 255, 255, .65);

    /* glitch colors */
    --r: #D60270;
    --c: #0038A8;

    /* sizing */
    --panel-w: min(520px, 92vw);
    --panel-pad: 44px;
    --inner-inset: 18px;
}

/* page base */
html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.02em;
    overflow-x: hidden;
}

/* CRT scanlines + grain overlay */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

body::before {
    /* scanlines */
    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 1px,
            rgba(0, 0, 0, 0.00) 2px,
            rgba(0, 0, 0, 0.00) 4px);
    mix-blend-mode: overlay;
    opacity: .35;
    animation: scanShift 7s linear infinite;
}

body::after {
    /* grain */
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .06), transparent 45%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
    opacity: .12;
    filter: contrast(120%);
    animation: grainJitter 1.2s steps(2) infinite;
}

@keyframes scanShift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(8px);
    }
}

@keyframes grainJitter {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(-1px, 1px);
    }

    75% {
        transform: translate(1px, 1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* layout wrapper */
.stack {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    min-height: 100vh;
    flex-wrap: wrap;
}

/* framed panel card */
.panel {
    width: var(--panel-w);
    background: var(--panel-bg);
    padding: var(--panel-pad);
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--outer-border);
    /* subtle glow + depth */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12),
        0 0 28px rgba(255, 255, 255, .06);
}

.panel::before {
    /* inner border inset like your screenshot */
    content: "";
    position: absolute;
    inset: var(--inner-inset);
    border: 1px solid var(--inner-border);
    opacity: .8;
    pointer-events: none;
}

/* centered content */
.panel-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* =========================
   IMAGE GLITCH (RGB split + scanlines)
   ========================= */

/* Use a DIV so we can duplicate it with ::before/::after */
.normal-img {
  width: min(300px, 70%);
  display: block;
  margin: 0 auto 18px;
}

/* cyan channel */
.glitch-img::after {
    transform: translate(1px, 0);
    filter:
        drop-shadow(1px 0 var(--c)) contrast(1.15);
    animation: imgGlitchB 3.1s steps(2) infinite;
}

@keyframes imgGlitchA {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(-1px, 0);
    }

    10% {
        clip-path: inset(8% 0 62% 0);
        transform: translate(-3px, 1px);
    }

    20% {
        clip-path: inset(35% 0 40% 0);
        transform: translate(-1px, -1px);
    }

    35% {
        clip-path: inset(60% 0 18% 0);
        transform: translate(-4px, 0);
    }

    70% {
        clip-path: inset(0 0 0 0);
        transform: translate(-1px, 0);
    }
}

@keyframes imgGlitchB {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(1px, 0);
    }

    15% {
        clip-path: inset(12% 0 58% 0);
        transform: translate(4px, 0);
    }

    28% {
        clip-path: inset(44% 0 32% 0);
        transform: translate(2px, 1px);
    }

    52% {
        clip-path: inset(68% 0 10% 0);
        transform: translate(5px, -1px);
    }

    78% {
        clip-path: inset(0 0 0 0);
        transform: translate(1px, 0);
    }
}

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

.small-lines {
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-dim);
    margin: 0;
}

/* Big distorted title like your 2nd card */
.glitch-title {
    font-family: "UnifrakturCook", "VT323", serif;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 0.9;
    margin: 10px 0 18px;
    color: #ffffff;
    position: relative;
    text-transform: none;
    /* faint outline feel */
    text-shadow:
        0 0 1px rgba(255, 255, 255, .35),
        0 0 12px rgba(255, 255, 255, .08);
}

/* RGB split for title */
.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: .85;
    pointer-events: none;
}

.glitch-title::before {
    color: transparent;
    text-shadow: -2px 0 var(--r);
    transform: translate(-1px, 0);
    animation: textGlitchA 2.4s steps(2) infinite;
}

.glitch-title::after {
    color: transparent;
    text-shadow: 2px 0 var(--c);
    transform: translate(1px, 0);
    animation: textGlitchB 2.9s steps(2) infinite;
}

@keyframes textGlitchA {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
    }

    14% {
        clip-path: inset(8% 0 72% 0);
        transform: translate(-3px, 0);
    }

    26% {
        clip-path: inset(40% 0 38% 0);
        transform: translate(-1px, 1px);
    }

    60% {
        clip-path: inset(65% 0 12% 0);
        transform: translate(-4px, -1px);
    }
}

@keyframes textGlitchB {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
    }

    12% {
        clip-path: inset(12% 0 60% 0);
        transform: translate(4px, 0);
    }

    34% {
        clip-path: inset(52% 0 28% 0);
        transform: translate(2px, -1px);
    }

    72% {
        clip-path: inset(70% 0 10% 0);
        transform: translate(5px, 1px);
    }
}

/* little divider spacing helpers */
.mt-8 {
    margin-top: 8px;
}

.mt-14 {
    margin-top: 14px;
}

.return-btn{
  position: fixed;
  left: 120px;
  bottom: 100px;
  z-index: 10000;

  display: inline-block;
  padding: 8px 12px;

  background: #000;
  color: #ff0033;                 
  text-decoration: none;

  font-family: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 20px;
  line-height: 1;
  border: 1px solid rgb(255, 111, 231);
  box-shadow: 0 0 0 1px rgb(255, 124, 238);

}

/* keep it visually identical on hover/focus/active */
.return-btn:hover,
.return-btn:focus,
.return-btn:active,
.return-btn:visited{
  color: #00d9ff;
  background: #000;
  text-decoration: none;
  transform: none;
  animation: none;
  filter: none;
}