/* ============================================
   relativity.studio
   Surreal dashboard / watercolor / crystalline
   ============================================ */

:root {
  --teal: #2EC4B6;
  --indigo: #3D348B;
  --cerulean: #7678ED;
  --lavender: #A8A4CE;
  --crystal: #F0F2F4;
  --watercolor-blue: #64B5F6;
  --pink: #E8A0BF;
  --indigo-deep: #1f1a4e;
  --indigo-soft: #4d44a3;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.8;
  color: var(--lavender);
  background: var(--indigo-deep);
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  color: var(--crystal);
  line-height: 1.15;
}

code, .panel-eq, .experiment-equation {
  font-family: 'Fira Code', monospace;
  font-weight: 400;
  font-size: 14px;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--pink); }

/* ============================================
   STUDIO ENTRANCE
   ============================================ */
.studio-entrance {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.wash-layer {
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: washFadeIn 1.6s ease-out forwards, washDrift 22s ease-in-out infinite alternate;
}

.wash-1 {
  background:
    radial-gradient(circle at 20% 30%, var(--teal) 0%, transparent 38%),
    radial-gradient(circle at 80% 25%, var(--cerulean) 0%, transparent 42%),
    radial-gradient(circle at 50% 80%, var(--indigo) 0%, transparent 55%),
    var(--indigo-deep);
  filter: blur(40px) saturate(1.05);
  animation-delay: 0s, 0s;
}

.wash-2 {
  background:
    radial-gradient(ellipse at 70% 60%, var(--watercolor-blue) 0%, transparent 35%),
    radial-gradient(ellipse at 25% 75%, var(--pink) 0%, transparent 30%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(60px);
  animation: washFadeIn2 2.2s ease-out 0.4s forwards, washDrift 28s ease-in-out infinite alternate-reverse;
}

.wash-3 {
  background:
    radial-gradient(circle at 60% 40%, var(--teal) 0%, transparent 22%),
    radial-gradient(circle at 30% 50%, var(--cerulean) 0%, transparent 26%);
  mix-blend-mode: overlay;
  filter: blur(80px);
  opacity: 0;
  animation: washFadeIn3 2.6s ease-out 0.8s forwards, washDrift 36s ease-in-out infinite alternate;
}

@keyframes washFadeIn  { to { opacity: 0.92; } }
@keyframes washFadeIn2 { to { opacity: 0.55; } }
@keyframes washFadeIn3 { to { opacity: 0.45; } }

@keyframes washDrift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; transform: scale(1); }
  100% { background-position: 6% 4%, -5% 3%, 4% -3%; transform: scale(1.04); }
}

/* Crystalline prisms */
.prism {
  position: absolute;
  width: 280px;
  height: 280px;
  opacity: 0;
  z-index: 0;
  filter: drop-shadow(0 0 24px rgba(118,120,237,0.35));
  animation: prismIn 0.9s cubic-bezier(.2,.7,.2,1) forwards, prismFloat 14s ease-in-out infinite alternate;
}

.prism-a { top: 8%;   left: 6%;  animation-delay: 0.2s, 0.2s; }
.prism-b { top: 14%;  right: 8%; width: 220px; height: 220px; animation-delay: 0.45s, 0.45s; }
.prism-c { bottom: 12%; left: 14%; width: 200px; height: 200px; animation-delay: 0.7s, 0.7s; }
.prism-d { bottom: 18%; right: 12%; width: 240px; height: 240px; animation-delay: 0.95s, 0.95s; }

@keyframes prismIn {
  0%   { opacity: 0; transform: scale(0.8) rotate(-6deg); }
  100% { opacity: 0.9; transform: scale(1) rotate(0); }
}

@keyframes prismFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-18px) rotate(8deg); }
}

.entrance-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 24px;
}

.wordmark {
  font-size: clamp(40px, 8vw, 92px);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  background: linear-gradient(120deg, var(--crystal) 0%, var(--teal) 35%, var(--pink) 70%, var(--lavender) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 12s ease-in-out infinite alternate;
  min-height: 1.2em;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.tagline {
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--lavender);
  font-weight: 500;
  margin-bottom: 36px;
  min-height: 2em;
}

.equation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Fira Code', monospace;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--teal);
  padding: 12px 22px;
  border: 1px solid rgba(46,196,182,0.4);
  border-radius: 10px;
  background: rgba(15,12,52,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.eq-text { display: inline-block; min-width: 1ch; }

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--teal);
  animation: blink 0.8s step-end infinite;
  vertical-align: -0.1em;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--lavender);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  animation: hintBob 2s ease-in-out infinite;
}

.scroll-dot {
  animation: dotMove 1.8s ease-in-out infinite;
}

@keyframes dotMove {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.4; }
}

@keyframes hintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* ============================================
   CONCEPT DASHBOARD
   ============================================ */
.dashboard {
  padding: 120px 24px 96px;
  background: linear-gradient(180deg, var(--indigo-deep) 0%, var(--indigo) 100%);
  position: relative;
}

.dashboard-head {
  max-width: 1200px;
  margin: 0 auto 56px;
  text-align: center;
}

.dashboard-title {
  font-size: clamp(28px, 4vw, 56px);
  margin-bottom: 16px;
  min-height: 1.2em;
}

.dashboard-sub {
  color: var(--lavender);
  font-size: clamp(15px, 1.4vw, 17px);
  max-width: 620px;
  margin: 0 auto;
  opacity: 0.85;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1400px;
}

.panel {
  position: relative;
  border-radius: 12px;
  padding: 32px 28px 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)),
    linear-gradient(135deg, var(--pink), var(--cerulean), var(--teal), var(--watercolor-blue));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(28px) rotateX(6deg);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.panel.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.panel:hover {
  transform: translateY(-6px) rotateY(2deg);
  transition: transform 0.4s ease;
}

.panel-1 { transition-delay: 0s; }
.panel-2 { transition-delay: 0.1s; }
.panel-3 { transition-delay: 0.2s; }
.panel-4 { transition-delay: 0.3s; }
.panel-5 { transition-delay: 0.4s; }
.panel-6 { transition-delay: 0.5s; }

.panel-wash {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, var(--teal) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--cerulean) 0%, transparent 45%);
  opacity: 0.18;
  filter: blur(30px);
  animation: panelDrift 18s ease-in-out infinite alternate;
}

.panel-1 .panel-wash { background: radial-gradient(circle at 30% 40%, var(--teal) 0%, transparent 45%), radial-gradient(circle at 70% 60%, var(--watercolor-blue) 0%, transparent 50%); }
.panel-2 .panel-wash { background: radial-gradient(circle at 70% 30%, var(--cerulean) 0%, transparent 45%), radial-gradient(circle at 30% 70%, var(--pink) 0%, transparent 40%); }
.panel-3 .panel-wash { background: radial-gradient(circle at 50% 50%, var(--pink) 0%, transparent 40%), radial-gradient(circle at 20% 30%, var(--teal) 0%, transparent 50%); }
.panel-4 .panel-wash { background: radial-gradient(circle at 60% 50%, var(--watercolor-blue) 0%, transparent 50%), radial-gradient(circle at 30% 30%, var(--indigo-soft) 0%, transparent 50%); }
.panel-5 .panel-wash { background: radial-gradient(circle at 50% 30%, var(--cerulean) 0%, transparent 45%), radial-gradient(circle at 50% 80%, var(--teal) 0%, transparent 45%); }
.panel-6 .panel-wash { background: radial-gradient(circle at 80% 50%, var(--pink) 0%, transparent 45%), radial-gradient(circle at 20% 50%, var(--watercolor-blue) 0%, transparent 50%); }

@keyframes panelDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(6%,-4%) rotate(8deg); }
}

.panel-crystal {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  opacity: 0.75;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.panel:hover .panel-crystal {
  transform: rotate(28deg) scale(1.08);
  opacity: 1;
}

.panel-title {
  font-size: clamp(20px, 1.7vw, 24px);
  margin-bottom: 14px;
  padding-right: 64px;
}

.panel-body {
  color: var(--lavender);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.panel-eq {
  display: inline-block;
  color: var(--teal);
  background: rgba(46,196,182,0.08);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(46,196,182,0.22);
  font-size: 13px;
}

/* ============================================
   EXPERIMENT CANVAS
   ============================================ */
.experiment {
  position: relative;
  padding: 140px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
  overflow: hidden;
}

.experiment-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(46,196,182,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 40%, rgba(232,160,191,0.14) 0%, transparent 50%),
    linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  filter: blur(2px);
}

.experiment-illustration {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  transform: perspective(1200px) rotateY(-4deg);
  transition: transform 0.8s ease;
}

.experiment-illustration:hover {
  transform: perspective(1200px) rotateY(0deg) scale(1.02);
}

.experiment-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.experiment-title {
  font-size: clamp(28px, 3.5vw, 48px);
  margin-bottom: 8px;
  min-height: 1.2em;
}

.experiment-body {
  color: var(--lavender);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85;
  min-height: 4em;
}

.experiment-equation {
  margin-top: 18px;
  color: var(--teal);
  font-size: 13px;
  padding: 14px 18px;
  background: rgba(46,196,182,0.08);
  border-left: 2px solid var(--teal);
  border-radius: 0 8px 8px 0;
  word-break: break-word;
  line-height: 1.6;
  min-height: 3em;
}

/* ============================================
   ARCHIVE FOOTER
   ============================================ */
.archive-footer {
  position: relative;
  padding: 96px 24px 64px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.footer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 20%, var(--indigo-soft) 0%, transparent 60%),
    linear-gradient(180deg, var(--indigo-deep) 0%, #100c33 100%);
}

.archive-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
  animation: starsTwinkle 6s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
  0%   { opacity: 0.55; }
  100% { opacity: 0.95; }
}

.archive-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.archive-mark {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--crystal);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.archive-text { vertical-align: middle; }

.cursor-archive {
  background: var(--teal);
  height: 0.95em;
}

.archive-tag {
  color: var(--lavender);
  opacity: 0.7;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.archive-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.archive-nav a {
  font-size: 14px;
  color: var(--lavender);
  letter-spacing: 0.04em;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.archive-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.archive-nav a:hover { color: var(--crystal); }
.archive-nav a:hover::after { transform: scaleX(1); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
  .panel-grid { grid-template-columns: repeat(2, 1fr); }
  .experiment {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 96px 24px;
  }
  .experiment-illustration { transform: none; }
  .prism { width: 180px; height: 180px; }
  .prism-b, .prism-d { width: 150px; height: 150px; }
}

@media (max-width: 640px) {
  .panel-grid { grid-template-columns: 1fr; }
  .dashboard { padding: 80px 18px 64px; }
  .archive-footer { padding: 64px 18px 48px; }
  .archive-nav { gap: 18px; }
  .prism { width: 140px; height: 140px; opacity: 0.7; }
  .wordmark { font-size: clamp(36px, 12vw, 60px); }
}