*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #000;
  --fg: #e8e2d9;
  --dim: #5a5650;
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Raleway', sans-serif;
  min-height: 100vh;
  overflow-y: auto;
  cursor: none;
}

/* grain overlay */
.noise {
  position: fixed;
  inset: -200%;
  width: 400%;
  height: 400%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  z-index: 10;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%       { transform: translate(-2%, -3%); }
  20%       { transform: translate(3%, 1%); }
  30%       { transform: translate(-1%, 4%); }
  40%       { transform: translate(2%, -2%); }
  50%       { transform: translate(-3%, 3%); }
  60%       { transform: translate(1%, -4%); }
  70%       { transform: translate(-2%, 2%); }
  80%       { transform: translate(3%, -1%); }
  90%       { transform: translate(-1%, -3%); }
}

/* custom cursor dot */
body::after {
  content: '';
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--fg);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 100;
  top: var(--cy, 50%);
  left: var(--cx, 50%);
}

/* vignette */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, #000 100%);
  pointer-events: none;
  z-index: 0;
}

/* ─── layout ─────────────────────────────────────────── */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 100vh;
  padding: 4rem 1rem;
  z-index: 1;
  animation: reveal 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── scene: image + letters ─────────────────────────── */

.scene {
  position: relative;
  /* square, sized to fit the viewport */
  width: min(72vh, 88vw);
  aspect-ratio: 1 / 1;
}

.hands {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* desaturate so letters pop */
  filter: grayscale(1) brightness(0.75) contrast(1.1);
}

/* ─── letters ────────────────────────────────────────── */

.key {
  position: absolute;
  /* each letter defines its own --x, --y, --rot */
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -100%) rotate(var(--rot));

  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1rem, 3.5vmin, 1.6rem);
  letter-spacing: 0.05em;
  color: var(--fg);
  line-height: 1;
  user-select: none;

  transition: text-shadow 0.3s, opacity 0.3s;
}

.key:hover {
  text-shadow: 0 0 24px rgba(232, 226, 217, 0.7);
}

/* ─────────────────────────────────────────────────────
   Per-letter layout constants.
   --x, --y : fingertip position as % of .scene box
   --rot    : tilt matching the finger angle

   Left hand  (pinky → index) : G  O  D  B
   Right hand (index → pinky) : O  A  R  D
──────────────────────────────────────────────────────── */

.key-g  { --x:  9%; --y: 26%; --rot: -22deg; }  /* left pinky */
.key-o1 { --x: 22%; --y: 16%; --rot: -10deg; }  /* left ring  */
.key-d  { --x: 31%; --y: 14%; --rot:  -4deg; }  /* left middle*/
.key-b  { --x: 41%; --y: 17%; --rot:   6deg; }  /* left index */

.key-o2 { --x: 65%; --y: 18%; --rot:  -6deg; }  /* right index */
.key-a  { --x: 79%; --y: 14%; --rot:   2deg; }  /* right middle*/
.key-r  { --x: 89%; --y: 17%; --rot:  10deg; }  /* right ring  */
.key-d2 { --x: 99%; --y: 25%; --rot:  22deg; }  /* right pinky */

/* ─── tagline / sub ──────────────────────────────────── */

.tagline {
  font-weight: 200;
  font-size: clamp(0.6rem, 1.8vw, 0.78rem);
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--dim);
  animation: reveal 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--dim), transparent);
  animation: reveal 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sub {
  font-weight: 200;
  font-size: clamp(0.55rem, 1.4vw, 0.68rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.6;
  animation: reveal 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── manifesto ──────────────────────────────────────── */

.manifesto {
  position: relative;
  z-index: 1;
  padding: 8rem 1rem 12rem;
  display: flex;
  justify-content: center;
}

.manifesto-inner {
  max-width: 38ch;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.m-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.9;
  color: var(--dim);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.m-line em {
  font-style: italic;
  color: var(--fg);
}

.m-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.m-closing {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 2;
  color: var(--fg);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.m-closing.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── footer ─────────────────────────────────────────── */

footer {
  position: relative;
  text-align: center;
  padding-bottom: 3rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.4;
  z-index: 1;
}