@import url('/www/css/index.css');

:root {
  /* Paper */
  --paper: #f3eedf;
  --paper2: #e7dcc3;

  /* Ink / soot */
  --ink: #07070a;
  --ink2: #0a0a10;

  --txt: #0b0b10;
  --mut: rgba(10, 10, 14, .72);

  /* tiny accent only (not neon) */
  --accent: #2b2bf1;
  --accent2: #7a2cff;
}

/* make everything feel like a page */
.ik-body {
  background: #000;
}

#ik-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* Paper sheet */
.ik-paper {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* book page texture + gentle shading */
  background:
    radial-gradient(140% 120% at 20% 10%, rgba(0, 0, 0, .06), transparent 55%),
    radial-gradient(120% 120% at 90% 0%, rgba(0, 0, 0, .08), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper2));

  /* “edge darkening” like a scanned page */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .05),
    inset 0 0 120px rgba(0, 0, 0, .10);
}

/* ink canvas */
#ik-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* content */
.ik-content {
  position: relative;
  z-index: 3;

  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;

  padding: 96px 16px 54px;
  /* keep nav+footer safe */
  color: var(--txt);
  margin-top: 20px;
}

/* headerline (like small print on a page) */
.ik-headerline {
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;

  font-size: .75rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(10, 10, 14, .55);
  user-select: none;
}

.ik-sep {
  opacity: .45;
}

/* title: inky stamped type + micro glitch */
.ik-title {
  margin: 0 0 18px;
  font-family: 'Stoneage', system-ui, sans-serif;
  font-size: clamp(3rem, 7.2vw, 6.2rem);
  letter-spacing: .06em;
  text-transform: uppercase;

  color: rgba(10, 10, 14, .92);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .06),
    0 14px 34px rgba(0, 0, 0, .10);

  position: relative;
  display: inline-block;
}

/* ink bleed shadow copies */
.ik-title::before,
.ik-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  filter: blur(0.7px);
  mix-blend-mode: multiply;
}

.ik-title::before {
  transform: translate(2px, 1px) skewX(-1deg);
}

.ik-title::after {
  transform: translate(-2px, 2px) skewX(1deg);
  opacity: .18;
}

/* art – center of the page */
.ik-artwrap {
  position: relative;
  width: min(560px, 86vw);
  margin: 0 auto 10px;
}

.ik-art {
  width: 100%;
  height: auto;
  transform: translateZ(0);
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, .18)) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(10px) scale(.98);
  animation: ikReveal 1.1s ease-out .25s forwards;
}

/* “ink reveal” mask that wipes away */
.ik-artmask {
  position: absolute;
  inset: -12%;
  border-radius: 38px;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, .0), rgba(0, 0, 0, .20) 62%, rgba(0, 0, 0, .0) 88%),
    repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, .10), rgba(0, 0, 0, .10) 2px, rgba(0, 0, 0, 0) 6px);
  mix-blend-mode: multiply;
  filter: blur(6px);
  opacity: .0;
  pointer-events: none;
  animation: ikMask 1.2s ease-out .05s forwards;
}

@keyframes ikReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ikMask {
  0% {
    opacity: .72;
    transform: scale(1.06);
    clip-path: inset(0 0 0 0);
  }

  55% {
    opacity: .55;
    clip-path: inset(0 0 55% 0);
  }

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

/* coming soon – looks like an ink stamp */
.ik-soon {
  display: inline-block;
  margin: 10px 0 8px;
  padding: .42rem .9rem;
  border-radius: 10px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: rgba(10, 10, 14, .76);
  border: 1px dashed rgba(0, 0, 0, .28);
  background: rgba(0, 0, 0, .03);
  transform: rotate(-1deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
}

/* whisper text */
.ik-whisper {
  margin: 0;
  font-size: 1.02rem;
  color: rgba(10, 10, 14, .68);
}

.ik-whisper span {
  display: block;
  margin-top: 2px;
  opacity: .78;
}

/* grain overlay (paper noise) */
.ik-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: ikGrain 6.2s steps(6) infinite;
}

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

  20% {
    transform: translate(-2%, 1.6%);
  }

  40% {
    transform: translate(1.5%, -2%);
  }

  60% {
    transform: translate(-1.2%, -1.8%);
  }

  80% {
    transform: translate(2.2%, 1.2%);
  }

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

/* vignette like book scan + soot edges */
.ik-vignette {
  position: absolute;
  inset: -15%;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18) 60%, rgba(0, 0, 0, .30) 100%),
    radial-gradient(circle at 10% 10%, rgba(0, 0, 0, .22), transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(0, 0, 0, .18), transparent 45%);
  mix-blend-mode: multiply;
  opacity: .95;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  #ik-ink {
    display: none;
  }

  .ik-grain {
    animation: none;
  }

  .ik-art,
  .ik-artmask {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* stronger “book page” presence */
.ik-paper {
  background:
    radial-gradient(120% 100% at 50% 18%, rgba(0, 0, 0, .06), transparent 58%),
    radial-gradient(120% 100% at 50% 88%, rgba(0, 0, 0, .09), transparent 60%),
    /* subtle fibers */
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .018) 0 1px, rgba(0, 0, 0, 0) 1px 9px),
    linear-gradient(180deg, var(--paper), var(--paper2));
}

/* make vignette slightly alive */
.ik-vignette {
  animation: ikBreath 6.5s ease-in-out infinite;
}

@keyframes ikBreath {

  0%,
  100% {
    opacity: .92;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.01);
  }
}




/* ===== Entrance timeline helpers ===== */
.ik-content>* {
  will-change: transform, opacity, filter;
}

/* Headerline: soft fade + tiny drift */
.ik-headerline {
  opacity: 0;
  transform: translate(-50%, -8px);
  animation: ikHeaderIn .9s ease-out .15s forwards;
}

@keyframes ikHeaderIn {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Title: ink-write wipe + micro jitter */
.ik-title {
  opacity: 0;
  transform: translateY(-10px);
  clip-path: inset(0 0 100% 0);
  animation:
    ikTitleWipe 1.15s cubic-bezier(.2, .9, .2, 1) .25s forwards,
    ikTitleJitter 4.8s ease-in-out 1.6s infinite;
}

/* wipe from top -> bottom like ink reveal */
@keyframes ikTitleWipe {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-10px);
    filter: blur(1px);
  }

  60% {
    opacity: 1;
    clip-path: inset(0 0 18% 0);
    filter: blur(.2px);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    filter: blur(0);
  }
}

/* subtle “ink alive” jitter */
@keyframes ikTitleJitter {

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

  50% {
    transform: translateY(1px);
  }
}

/* Inkarus: float + tiny tilt + ink shimmer */
.ik-art {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  animation:
    ikReveal 1.1s ease-out .55s forwards,
    ikFloat 6.2s ease-in-out 1.4s infinite,
    ikInkShimmer 3.6s ease-in-out 1.4s infinite;
  transform-origin: 50% 60%;
}

@keyframes ikFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-.4deg) scale(1);
  }

  50% {
    transform: translateY(-10px) rotate(.6deg) scale(1.01);
  }
}

/* ink shimmer: makes it feel “wet” without neon */
@keyframes ikInkShimmer {

  0%,
  100% {
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .18));
  }

  50% {
    filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .22)) contrast(1.04);
  }
}

/* hover: little ink smear vibe */
.ik-artwrap:hover .ik-art {
  animation-play-state: running;
  transform: translateY(-6px) rotate(1deg) scale(1.02);
}

.ik-artwrap:hover .ik-artmask {
  opacity: .22;
  filter: blur(10px);
}

/* Coming Soon: stamp in */
.ik-soon {
  opacity: 0;
  transform: translateY(10px) rotate(-4deg) scale(.92);
  animation: ikStampIn .85s cubic-bezier(.2, .9, .2, 1) 1.05s forwards,
    ikStampBreath 5s ease-in-out 2s infinite;
}

@keyframes ikStampIn {
  0% {
    opacity: 0;
    transform: translateY(12px) rotate(-6deg) scale(.9);
    filter: blur(1px);
  }

  65% {
    opacity: 1;
    transform: translateY(-2px) rotate(-2deg) scale(1.02);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(-1deg) scale(1);
  }
}

@keyframes ikStampBreath {

  0%,
  100% {
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
  }

  50% {
    box-shadow: 0 16px 28px rgba(0, 0, 0, .09);
  }
}

/* Whisper text: fade + slight “bleed” pulse */
.ik-whisper {
  opacity: 0;
  transform: translateY(10px);
  animation: ikWhisperIn .9s ease-out 1.2s forwards;
}

@keyframes ikWhisperIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ik-whisper span {
  animation: ikBleed 4.4s ease-in-out 2.2s infinite;
}

@keyframes ikBleed {

  0%,
  100% {
    letter-spacing: 0;
    opacity: .78;
  }

  50% {
    letter-spacing: .02em;
    opacity: .9;
  }
}




.ik-artwrap {
  --px: 0px;
  --py: 0px;
}

.ik-art {
  transform: translate(var(--px), var(--py));
}

.ik-artmask {
  transform: translate(calc(var(--px) * 0.6), calc(var(--py) * 0.6));
}




@media (max-width:1200px) {
  .ik-headerline {
    position: absolute;
    top: 86px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;

    font-size: .75rem;
    letter-spacing: 0em;
    text-transform: uppercase;
    color: rgba(10, 10, 14, .55);
    user-select: none;
  }
}