/* 
  R U IN?
  draft v1
  kontakt: DMTS
*/

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #e6e6e6;
    height: 100%;
    overflow: hidden;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* FADE IN */
body {
    opacity: 0;
    animation: fadeIn 2.5s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* NOISE TEXTURE */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: repeating-radial-gradient(
    circle at 0 0,
    rgba(255,255,255,0.015),
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
    );
    pointer-events: none;
    mix-blend-mode: overlay;
}

.wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h1 {
    transition: transform 1s ease, opacity 0.6s ease;
    will-change: transform;
    font-size: 3rem;
    letter-spacing: 0.35em;
    margin-bottom: 3rem;
    position: relative;
    cursor: pointer;
}

h1.in-place {
  transform: translateY(0);
}

/* GLITCH */
h1::before,
h1::after {
    content: "R U IN?";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.6;
}

h1::before {
  animation:
    glitch 2.5s infinite,
    glitchBig 0.6s steps(2) infinite;
  animation-delay: 0s, 14s;
  color: #ff004c;
}

h1::after {
  animation:
    glitch 3s infinite reverse,
    glitchBig 0.6s steps(2) infinite;
  animation-delay: 0s, 5s;
  color: #00ffe5;
}

@keyframes glitch {
    0% { clip-path: inset(0 0 95% 0); }
    10% { clip-path: inset(20% 0 60% 0); }
    20% { clip-path: inset(40% 0 40% 0); }
    30% { clip-path: inset(10% 0 80% 0); }
    40% { clip-path: inset(50% 0 30% 0); }
    50% { clip-path: inset(0 0 95% 0); }
    100% { clip-path: inset(0 0 95% 0); }
}

@keyframes glitchBig {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0,0);
    opacity: 0;
  }

  5% {
    opacity: 1;
    clip-path: inset(10% 0 60% 0);
    transform: translate(-6px,2px);
  }

  10% {
    clip-path: inset(40% 0 20% 0);
    transform: translate(6px,-2px);
  }

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

  20% {
    clip-path: inset(0 0 0 0);
    transform: translate(0,0);
    opacity: 0;
  }

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

.text {
    line-height: 1.9;
    letter-spacing: 0.15em;
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 3rem;
}

.links a {
    display: inline-block;
    margin: 0 14px;
    text-decoration: none;
    color: #e6e6e6;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.links a:hover {
    opacity: 1;
}

.bg {
    position: fixed;
    inset: 0;
    background-image: url("../img/bg.gif");
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(80%) brightness(40%);
    z-index: -2;
    animation: slowDrift 40s linear infinite alternate;
}

.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    pointer-events: none;
}

@keyframes slowDrift {
    from { transform: scale(1) translate(0,0); }
    to   { transform: scale(1.05) translate(-10px, -10px); }
}
.hidden {
    display: none;
}

.poem {
    opacity: 0;
    animation: poemFade 2s ease forwards;
    line-height: 2;
    letter-spacing: 0.15em;
    font-size: 0.95rem;
}

.poem p {
    margin: 1.6rem 0;
}

.divider {
    opacity: 0.4;
}

@keyframes poemFade {
    to {
    opacity: 1;
    }
}