/* Creation pages (Tanq, Lab 23) and the moving art on the home page */

/* ---------- Shared art ---------- */
.art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art-lava { position: absolute; inset: 0; filter: url(#klu-goo); }
.art-lava i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.art-host { overflow: hidden; }
.art-host[data-art="constellation"] {
  background:
    radial-gradient(60% 70% at 50% 55%, rgba(139, 92, 246, 0.25), transparent 70%),
    radial-gradient(40% 50% at 30% 30%, rgba(31, 228, 255, 0.14), transparent 70%),
    #080808;
}
.art-host[data-art="lava"] {
  background:
    radial-gradient(70% 60% at 50% 110%, rgba(255, 90, 60, 0.35), transparent 70%),
    radial-gradient(50% 50% at 70% 20%, rgba(255, 61, 154, 0.12), transparent 70%),
    #0c0608;
}

/* ---------- Themes ---------- */
.theme-tanq { --c-a: #1fe4ff; --c-b: #8b5cf6; --glow: var(--c-a); }
.theme-lab  { --c-a: #ffb020; --c-b: #ff3d9a; --glow: var(--c-a); }

/* ---------- Page header: full-screen art with the title on it ---------- */
.cr-hero {
  position: relative; height: calc(100vh - 110px); min-height: 520px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cr-hero .art-host { position: absolute; inset: 0; }
.cr-hero-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--pad); pointer-events: none; text-align: center;
}
.cr-hero-inner .crumbs { pointer-events: auto; }
.cr-hero .hero-single-heading { text-shadow: 0 0 60px rgba(8, 8, 8, 0.85), 0 0 20px rgba(8, 8, 8, 0.6); }
.cr-hint {
  margin: 18px 0 0; color: var(--n-200); font-size: var(--b2); letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(8, 8, 8, 0.9);
  opacity: 0; animation: hint-in 1s ease 2.2s forwards;
}
@keyframes hint-in { to { opacity: 1; } }
.cr-cue {
  position: absolute; left: 50%; bottom: 28px; width: 1px; height: 46px; z-index: 1;
  background: linear-gradient(var(--c-a), transparent); animation: cr-cue 2s ease-in-out infinite;
}
@keyframes cr-cue {
  0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Body copy: one centered reading column ---------- */
.cr-section { padding-top: 90px; padding-bottom: 120px; }
.cr-col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.cr-label {
  display: flex; flex-wrap: wrap; gap: 20px 56px; margin: 0; padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cr-label .single-flex-2 { gap: 10px; }
.cr-label .single-text-2 { font-size: var(--b1); }
.theme-tanq .crumbs a:hover, .theme-lab .crumbs a:hover { color: var(--c-a); }
.theme-lab .soon { color: var(--c-a); }

/* ---------- Full-width color bands ---------- */
.cr-band { position: relative; overflow: hidden; min-height: 78vh; display: flex; align-items: center; padding: 100px 0; }
.cr-band-inner { position: relative; z-index: 1; padding: 0 var(--pad); width: 100%; }
.cr-word {
  margin: 0; color: var(--n-100); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(54px, 16vw, 260px); line-height: 0.9;
}
.cr-sub { margin: 28px 0 0; max-width: 560px; color: rgba(255, 255, 255, 0.88); font-size: var(--b1); line-height: 1.5em; }
.cr-try { display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.6); font-size: var(--b2); }

/* Tanq / Catch: thought fragments float by, hover or tap one to catch it */
.band-catch { background: linear-gradient(120deg, #2a1466 0%, #5b2bd6 45%, #0fb5d6 100%); }
.frags { position: absolute; inset: 0; }
.frag {
  position: absolute; left: var(--x); top: var(--y);
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  font-size: var(--b2); color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(8, 8, 8, 0.12);
  animation: float var(--d) ease-in-out var(--dl) infinite alternate;
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(.3,1.6,.5,1);
  cursor: default;
}
.frag:hover, .frag.caught {
  color: var(--n-500); background: var(--n-100); border-color: var(--n-100);
  animation-play-state: paused; transform: scale(1.12) rotate(-2deg);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.45);
}
@keyframes float { from { translate: 0 0; } to { translate: 40px -28px; } }

/* Tanq / Remember: a row of days, one lights up */
.band-remember {
  background:
    radial-gradient(70% 90% at 80% 50%, rgba(31, 228, 255, 0.25), transparent 70%),
    linear-gradient(120deg, #0a0a18 0%, #1b1140 60%, #0c3a4a 100%);
}
.days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; max-width: 760px; }
.days i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); transition: background 0.3s, box-shadow 0.3s, transform 0.3s; }
.days i.on { background: rgba(255, 255, 255, 0.5); }
.days i.that-day { background: var(--c-a); box-shadow: 0 0 18px var(--c-a); transform: scale(1.5); }
.count { color: var(--c-a); font-weight: 600; }

/* Lab 23 / Create: who belongs here bubbles up; hover or tap one to pop it */
.band-create { background: linear-gradient(120deg, #5a0f3a 0%, #c2185b 45%, #ff8a2b 100%); }
.risers { position: absolute; inset: 0; }
.riser {
  position: absolute; left: var(--x); bottom: -70px;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap; font-size: var(--b1);
  color: var(--n-100); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: bubble-up var(--d) linear var(--dl) infinite;
  cursor: default;
}
.riser span { display: inline-block; transition: transform 0.25s cubic-bezier(.3,1.6,.5,1), opacity 0.25s; }
.riser:hover span, .riser.popped span { transform: scale(1.35); opacity: 0; }
.riser:hover, .riser.popped { border-color: transparent; background: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); transition: box-shadow 0.3s, background 0.2s; }
@keyframes bubble-up { from { transform: translateY(0); } to { transform: translateY(calc(-78vh - 240px)); } }

/* Lab 23 / Experiment: the word itself will not sit still */
.band-experiment {
  background:
    radial-gradient(60% 80% at 20% 60%, rgba(255, 61, 154, 0.35), transparent 70%),
    radial-gradient(50% 70% at 85% 30%, rgba(255, 176, 32, 0.3), transparent 70%),
    linear-gradient(120deg, #140610 0%, #2a0a1e 60%, #3a1a06 100%);
}
.jitter span { display: inline-block; animation: jitter var(--jd) ease-in-out var(--jl) infinite; transition: color 0.2s; }
.jitter span:hover { color: var(--c-a); animation-duration: 0.18s; }
@keyframes jitter {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-0.02em, 0.03em) rotate(-2deg); }
  40% { transform: translate(0.02em, -0.04em) rotate(2deg); }
  60% { transform: translate(-0.01em, 0.02em) rotate(-1deg); }
  80% { transform: translate(0.03em, 0) rotate(1.5deg); }
}

@media (max-width: 767px) {
  .cr-hero { height: calc(100vh - 100px); }
  .cr-band { min-height: 70vh; padding: 80px 0; }
  .cr-band-inner { align-self: flex-start; }
  .cr-label { gap: 18px 36px; }
  .cr-section { padding-top: 60px; }
  .frag { font-size: 13px; padding: 6px 11px; left: var(--mx); top: var(--my); max-width: 90%; }
  .frag.desk-only, .riser.desk-only { display: none; }
  @keyframes float { from { translate: 0 0; } to { translate: 14px -10px; } }
  .riser { font-size: var(--b3); left: var(--mx); }
  .days i { width: 9px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .frag, .riser, .jitter span { animation: none; }
  .riser { bottom: auto; top: var(--y); }
  .cr-hint { opacity: 1; }
}