/* ============================================================
   RAINBOW — by //futureprism
   minimal centered landing, full-bleed shader canvas behind
   ============================================================ */

:root {
  --ink:   #0b0b10;
  --paper: #f6efe4;
  --red:   #ff2e2e;
  --pink:  #ff6ab0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  color: var(--paper);
  background: var(--ink);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-touch-callout: none;
  /* let our JS handle all gestures (drag-rotate, pinch-zoom) */
  touch-action: none;
  overscroll-behavior: none;
}

/* full-bleed shader canvas */
#sp-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
  touch-action: none;
}

/* grain overlay */
.grain {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 1;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   centered stage
   ============================================================ */
.stage {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* title pinned high, sculpture sits below */
  gap: 10px;
  text-align: center;
  padding: 6vh 24px 24px;
}

/* the 3D shader-park sculpture sits full-window above the backdrop;
   shader-park's minimal renderer uses window-size for resolution, so the
   canvas must match the window. Transparent clear lets the rainbow show through. */
#sculpt-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;            /* under title, above bg canvas */
  pointer-events: none;  /* let the body absorb mouse events */
  mix-blend-mode: screen;
  opacity: .95;
  animation: sculptIn 1.6s .2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sculptIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: .95; transform: scale(1); }
}

.title, .byline, .pattern-bar, .pattern-label {
  position: relative;
  z-index: 3;            /* stay above the sculpture canvas */
}

.title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 10vw, 160px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--paper);
  text-transform: lowercase;
  text-shadow:
    4px 4px 0 var(--ink),
    -2px 0 0 rgba(255, 35, 132, .85),
    2px 0 0 rgba(30, 107, 255, .75);
  animation: drop 1.2s cubic-bezier(.2, .8, .2, 1) both;
}

.title .word { display: inline-block; }

@keyframes drop {
  0%   { opacity: 0; transform: translateY(40px) scale(.96); letter-spacing: .15em; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0)    scale(1);   letter-spacing: -.015em; }
}

.byline {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: .26em;
  text-transform: lowercase;
  color: var(--paper);
  background: rgba(11, 11, 16, .55);
  padding: 8px 16px;
  border: 1px solid rgba(246, 239, 228, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeUp 1.2s .35s cubic-bezier(.2, .8, .2, 1) both;
}
.byline .brand {
  font-weight: 700;
  color: var(--paper);
  background: linear-gradient(90deg, var(--red), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

/* pattern indicator: 6 small bars under the title */
.pattern-bar {
  margin-top: auto;                /* push pattern indicator to the bottom of the stage */
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  animation: fadeUp 1.2s .6s cubic-bezier(.2, .8, .2, 1) both;
}
.pattern-bar .pip {
  width: 22px;
  height: 3px;
  background: rgba(246, 239, 228, .25);
  transition: background .4s, transform .4s;
}
.pattern-bar .pip.active {
  background: var(--paper);
  transform: scaleY(2);
}

.pattern-label {
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: lowercase;
  opacity: .7;
  margin-top: 6px;
  margin-bottom: 18px;
  min-height: 14px;
  animation: fadeUp 1.2s .8s cubic-bezier(.2, .8, .2, 1) both;
}

/* responsive */
@media (max-width: 600px) {
  .title { font-size: 22vw; }
  .byline { font-size: 11px; }
  .pattern-bar .pip { width: 16px; }
}