/* === BASE RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --teak-amber: #C4956A;
  --desert-clay: #A0522D;
  --burnt-umber: #3D2B1F;
  --parchment-cream: #F5E6D3;
  --obsidian-walnut: #1E1108;
  --espresso: #5C4033;
  --sandstone: #E8D5C4;
  --signal-cyan: #4ECDC4;
  --phosphor-coral: #E07A5F;
  --font-display: 'Anybody', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  background: var(--parchment-cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.65;
  overflow-x: hidden;
}

/* === GRID LINES BACKGROUND === */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(196,149,106,0.12) 0px, rgba(196,149,106,0.12) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(196,149,106,0.12) 0px, rgba(196,149,106,0.12) 1px, transparent 1px, transparent 64px);
  z-index: 0;
  pointer-events: none;
}

/* === SCANLINE OVERLAY === */
.scanline-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(30,17,8,0.08) 2px, rgba(30,17,8,0.08) 4px
  );
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* === SECTIONS === */
.section {
  position: relative;
  z-index: 1;
  padding: 80px 48px;
}

@media (max-width: 768px) {
  .section { padding: 48px 20px; }
}

/* === THE OVERTURE === */
.overture {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--obsidian-walnut);
  overflow: hidden;
}

.starburst {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  animation: starburst-rotate 720s linear infinite;
}

.starburst::before,
.starburst::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 100%;
  background: var(--teak-amber);
  opacity: 0.2;
  transform-origin: center center;
}

.starburst::before { transform: translate(-50%, -50%) rotate(0deg); }
.starburst::after { transform: translate(-50%, -50%) rotate(30deg); }

@keyframes starburst-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 9rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--sandstone);
  position: relative;
  z-index: 2;
  text-align: center;
}

/* === GLITCH EFFECT === */
.glitch-wrap {
  position: relative;
  display: inline-block;
}

.glitch-wrap::before,
.glitch-wrap::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glitch-wrap::before {
  color: var(--signal-cyan);
  mix-blend-mode: screen;
  animation: tracking-error-cyan 8s steps(1) infinite;
  z-index: -1;
}

.glitch-wrap::after {
  color: var(--phosphor-coral);
  mix-blend-mode: screen;
  animation: tracking-error-coral 8s steps(1) infinite;
  z-index: -1;
}

@keyframes tracking-error-cyan {
  0%, 95% { clip-path: inset(0); transform: translateX(0); }
  96% { clip-path: inset(12% 0 78% 0); transform: translateX(4px); }
  97% { clip-path: inset(45% 0 32% 0); transform: translateX(-3px); }
  98% { clip-path: inset(67% 0 18% 0); transform: translateX(6px); }
  99% { clip-path: inset(23% 0 55% 0); transform: translateX(-2px); }
  100% { clip-path: inset(0); transform: translateX(0); }
}

@keyframes tracking-error-coral {
  0%, 94% { clip-path: inset(0); transform: translateX(0); }
  95% { clip-path: inset(30% 0 50% 0); transform: translateX(-5px); }
  96% { clip-path: inset(60% 0 20% 0); transform: translateX(3px); }
  97% { clip-path: inset(10% 0 75% 0); transform: translateX(-4px); }
  98% { clip-path: inset(50% 0 30% 0); transform: translateX(7px); }
  99%, 100% { clip-path: inset(0); transform: translateX(0); }
}

/* === THE GRID ROOM === */
.grid-room {
  min-height: 120vh;
  background: var(--parchment-cream);
}

.grid-room-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.content-block {
  max-width: 640px;
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease-out;
  transition-delay: calc(var(--stagger-index) * 120ms);
  will-change: transform, opacity;
}

.slide-left {
  transform: translateX(-80px);
  align-self: flex-start;
}

.slide-right {
  transform: translateX(80px);
  align-self: flex-end;
}

.slide-up {
  transform: translateY(60px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease-out;
  transition-delay: calc(var(--stagger-index) * 120ms);
  will-change: transform, opacity;
}

.content-block.visible,
.slide-up.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: -0.02em;
  color: var(--burnt-umber);
  margin-bottom: 1rem;
}

.pull-quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--desert-clay);
  border-left: 4px solid var(--teak-amber);
  padding-left: 1.5rem;
  font-style: normal;
}

/* === THE SIGNAL BREAK === */
.signal-break {
  min-height: 80vh;
  background: var(--burnt-umber);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.signal-break::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(196,149,106,0.15) 2px, rgba(196,149,106,0.15) 4px
  );
  z-index: 2;
}

.glitch-strip {
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.glitch-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.strip-1 {
  background: linear-gradient(90deg, var(--teak-amber), var(--desert-clay));
  animation: strip-drift-1 3s ease-in-out infinite alternate;
}
.strip-1::before { background: var(--signal-cyan); mix-blend-mode: screen; opacity: 0.3; transform: translateX(4px); }

.strip-2 {
  background: linear-gradient(90deg, var(--desert-clay), var(--burnt-umber));
  animation: strip-drift-2 4s ease-in-out infinite alternate;
}
.strip-2::before { background: var(--phosphor-coral); mix-blend-mode: screen; opacity: 0.25; transform: translateX(-3px); }

.strip-3 {
  background: var(--obsidian-walnut);
  animation: strip-drift-3 2.5s ease-in-out infinite alternate;
}

.strip-4 {
  background: linear-gradient(90deg, var(--teak-amber), var(--parchment-cream));
  animation: strip-drift-4 3.5s ease-in-out infinite alternate;
}
.strip-4::before { background: var(--signal-cyan); mix-blend-mode: screen; opacity: 0.2; transform: translateX(6px); }

.strip-5 {
  background: var(--desert-clay);
  animation: strip-drift-1 4.2s ease-in-out infinite alternate;
}

.strip-6 {
  background: linear-gradient(90deg, var(--burnt-umber), var(--teak-amber));
  animation: strip-drift-2 2.8s ease-in-out infinite alternate;
}
.strip-6::before { background: var(--phosphor-coral); mix-blend-mode: screen; opacity: 0.3; transform: translateX(-5px); }

.strip-7 {
  background: var(--obsidian-walnut);
  animation: strip-drift-3 3.7s ease-in-out infinite alternate;
}

.strip-8 {
  background: linear-gradient(90deg, var(--parchment-cream), var(--teak-amber));
  animation: strip-drift-4 3.1s ease-in-out infinite alternate;
}
.strip-8::before { background: var(--signal-cyan); mix-blend-mode: screen; opacity: 0.15; transform: translateX(3px); }

@keyframes strip-drift-1 { from { transform: translateX(-8px) translateY(0); } to { transform: translateX(8px) translateY(4px); } }
@keyframes strip-drift-2 { from { transform: translateX(6px) translateY(0); } to { transform: translateX(-6px) translateY(-4px); } }
@keyframes strip-drift-3 { from { transform: translateX(-4px) translateY(2px); } to { transform: translateX(4px) translateY(-2px); } }
@keyframes strip-drift-4 { from { transform: translateX(3px) translateY(-3px); } to { transform: translateX(-3px) translateY(3px); } }

/* === THE CREDENZA === */
.credenza {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--parchment-cream);
}

.credenza-shelf {
  display: flex;
  gap: 24px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.credenza-module {
  height: 280px;
  background: var(--sandstone);
  border: 1px solid rgba(196,149,106,0.3);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex: 1 1 200px;
  max-width: 300px;
}

.credenza-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--espresso);
  text-align: center;
  line-height: 1.7;
}

.boomerang {
  width: 80px; height: 80px;
  border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
  border: 2px solid var(--desert-clay);
  opacity: 0.15;
  transform: rotate(35deg);
  position: absolute;
  top: 20px; right: 20px;
}

.terrazzo-field {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
  background:
    radial-gradient(ellipse 8px 6px at 20% 30%, rgba(196,149,106,0.12) 100%, transparent 100%),
    radial-gradient(ellipse 5px 10px at 60% 50%, rgba(160,82,45,0.1) 100%, transparent 100%),
    radial-gradient(ellipse 7px 5px at 40% 70%, rgba(196,149,106,0.08) 100%, transparent 100%),
    radial-gradient(ellipse 10px 6px at 80% 20%, rgba(160,82,45,0.12) 100%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 15% 80%, rgba(196,149,106,0.1) 100%, transparent 100%),
    radial-gradient(ellipse 9px 5px at 70% 85%, rgba(160,82,45,0.08) 100%, transparent 100%);
}

.diamond-lattice {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
  background:
    linear-gradient(45deg, transparent 48%, rgba(196,149,106,0.15) 48%, rgba(196,149,106,0.15) 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(196,149,106,0.15) 48%, rgba(196,149,106,0.15) 52%, transparent 52%);
  background-size: 32px 32px;
}

/* === THE BLUEPRINT === */
.blueprint {
  min-height: 100vh;
  background: var(--burnt-umber);
  position: relative;
  overflow: hidden;
}

/* Higher-opacity grid for blueprint */
.blueprint::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(196,149,106,0.4) 0px, rgba(196,149,106,0.4) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(196,149,106,0.4) 0px, rgba(196,149,106,0.4) 1px, transparent 1px, transparent 64px);
  z-index: 0;
}

.blueprint-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  z-index: 1;
}

.blueprint-annotation {
  position: absolute;
  top: var(--bp-top);
  left: var(--bp-left);
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.blueprint-annotation.visible {
  opacity: 1;
}

.bp-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196,149,106,0.7);
  margin-bottom: 0.25rem;
}

.bp-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--sandstone);
  letter-spacing: -0.01em;
}

.blueprint-title {
  position: absolute;
  bottom: 10%;
  right: 5%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--sandstone);
  opacity: 0.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* === THE SUNSET CLOSE === */
.sunset-close {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--desert-clay);
  animation: sunset-gradient 20s ease infinite;
}

@keyframes sunset-gradient {
  0% { background-color: var(--teak-amber); }
  25% { background-color: var(--desert-clay); }
  50% { background-color: var(--burnt-umber); }
  75% { background-color: var(--obsidian-walnut); }
  100% { background-color: var(--teak-amber); }
}

.sunset-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  color: var(--sandstone);
  text-align: center;
  max-width: 800px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .credenza-shelf {
    flex-direction: column;
  }
  .credenza-module {
    max-width: 100%;
    height: 200px;
  }
  .blueprint-annotation {
    position: relative;
    top: auto; left: auto;
    margin-bottom: 2rem;
  }
  .blueprint-inner {
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
    min-height: auto;
  }
  .blueprint-title {
    position: relative;
    bottom: auto; right: auto;
    text-align: center;
    margin-top: 2rem;
  }
}