/* lunch.quest - Goblincore x Neon Diner */
/* Fonts: Poiret One, Literata, Special Elite */

:root {
  --bg-deep: #121017;
  --bg-surface: #1e1a24;
  --bg-elevated: #2a2433;
  --text-primary: #e8e0d4;
  --text-secondary: #b8b0a8;
  --text-muted: #6b5f73;
  --accent-mint: #00ff9d;
  --accent-coral: #ff3366;
  --accent-amber: #ffb830;
}

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

html {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Literata', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.01em;
  line-height: 1.72;
  overflow-x: hidden;
}

/* Noise Overlay */
#noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url('data:image/png;base64,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');
  background-repeat: repeat;
}

/* Typography */
.display-text {
  font-family: 'Poiret One', 'Didot', serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: 0.08em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--text-primary);
}

.body-text {
  font-family: 'Literata', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.01em;
  line-height: 1.72;
  color: var(--text-secondary);
  max-width: 42ch;
}

.annotation-text {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  color: var(--accent-mint);
  letter-spacing: 0.04em;
}

/* Neon Effects */
.neon-mint {
  color: var(--accent-mint);
  text-shadow: 0 0 7px #00ff9d, 0 0 20px #00ff9d, 0 0 42px rgba(0,255,157,0.4), 0 0 82px rgba(0,255,157,0.15);
}

.section-heading {
  text-shadow: 0 0 30px rgba(0,255,157,0.25);
}

.section-heading.accent-coral {
  color: var(--accent-coral);
  text-shadow: 0 0 7px rgba(255,51,102,0.5), 0 0 30px rgba(255,51,102,0.25);
}

.section-heading.accent-amber {
  color: var(--accent-amber);
  text-shadow: 0 0 7px rgba(255,184,48,0.5), 0 0 30px rgba(255,184,48,0.25);
}

/* Viewframe Sections */
.viewframe {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
}

/* Opening Section */
.opening-grid {
  display: grid;
  grid-template-columns: 1fr 0.6fr 1.4fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  width: 90vw;
  max-width: 1200px;
  height: 80vh;
  align-items: center;
}

.title-lunch {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transform: rotate(var(--tilt)) translate(var(--shift-x), var(--shift-y));
  align-self: end;
}

.opening-image-container {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
}

.title-quest {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  transform: rotate(var(--tilt)) translate(var(--shift-x), var(--shift-y));
  text-align: right;
  align-self: start;
}

.tech-annotation {
  transform: translate(var(--shift-x), var(--shift-y));
  position: relative;
}

.opening-grid .tech-annotation {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  align-self: end;
  justify-self: end;
}

.hero-illustration {
  width: 280px;
  height: auto;
  opacity: 0.8;
}

/* Duotone Wraps */
.duotone-mint-wrap {
  position: relative;
  background: #00ff9d;
  border-radius: 2px;
  overflow: hidden;
}

.duotone-mint-wrap svg,
.duotone-mint-wrap img {
  display: block;
  filter: grayscale(1) contrast(1.2) brightness(0.9);
  mix-blend-mode: multiply;
}

.duotone-coral-wrap {
  position: relative;
  background: #ff3366;
  border-radius: 2px;
  overflow: hidden;
}

.duotone-coral-wrap svg,
.duotone-coral-wrap img {
  display: block;
  filter: grayscale(1) contrast(1.2) brightness(0.9);
  mix-blend-mode: multiply;
}

.section-illustration {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* Section Grids */
.section-grid {
  display: grid;
  grid-template-columns: 1fr 0.6fr 1.4fr;
  gap: 2rem;
  width: 90vw;
  max-width: 1200px;
  align-items: center;
  padding: 4rem 0;
}

.section-grid-alt {
  grid-template-columns: 1.4fr 0.6fr 1fr;
}

/* Content Blocks */
.content-block {
  transform: rotate(var(--tilt)) translate(var(--shift-x), var(--shift-y));
  position: relative;
}

.block-left {
  grid-column: 1 / 2;
}

.block-right {
  grid-column: 3 / 4;
}

.block-wide {
  grid-column: 1 / 4;
  text-align: center;
}

.block-center {
  grid-column: 1 / 4;
  justify-self: center;
  text-align: center;
}

.block-accent {
  grid-column: 2 / 4;
  justify-self: end;
}

.content-block .tech-annotation {
  margin-top: 1.5rem;
}

/* Descent Sections */
.descent-section {
  background-color: var(--bg-surface);
  clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 100%);
  padding: 4rem 0;
}

.descent-section:nth-child(4n+1) {
  clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 98%);
}

/* Root Dividers */
.root-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

.root-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 2s ease-out;
}

.root-path.animated {
  stroke-dashoffset: 0;
}

/* Interstitials */
.interstitial {
  min-height: 30vh;
  display: grid;
  place-items: center;
  background-color: var(--bg-deep);
  padding: 4rem 2rem;
  scroll-snap-align: start;
}

.interstitial-content {
  max-width: 600px;
  text-align: center;
}

.typewriter-text {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--accent-mint);
  letter-spacing: 0.02em;
  line-height: 1.6;
  min-height: 3em;
}

.typewriter-text .cursor {
  animation: blink 530ms infinite;
  color: var(--accent-mint);
}

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

.typewriter-text .typed-char {
  opacity: 0;
  transition: opacity 80ms ease;
}

.typewriter-text .typed-char.visible {
  opacity: 1;
}

/* Terminal Section */
#terminal {
  background-color: var(--bg-deep);
}

.terminal-content {
  text-align: center;
}

.terminal-word {
  font-family: 'Poiret One', 'Didot', serif;
  font-size: clamp(5rem, 12vw, 12rem);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.neon-pulse {
  animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 7px #00ff9d, 0 0 20px #00ff9d, 0 0 42px rgba(0,255,157,0.4), 0 0 82px rgba(0,255,157,0.15);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 4px #00ff9d, 0 0 12px #00ff9d, 0 0 28px rgba(0,255,157,0.3), 0 0 60px rgba(0,255,157,0.1);
    opacity: 0.85;
  }
}

/* Reveal Animation */
.reveal-element {
  opacity: 0;
  transform: rotate(var(--tilt, 0deg)) translate(var(--shift-x, 0px), calc(var(--shift-y, 0px) + 30px));
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.revealed {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg)) translate(var(--shift-x, 0px), var(--shift-y, 0px));
}

/* Mushroom Chevron Background */
.descent-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 Q20 5 15 15 L15 30 M30 5 Q40 5 45 15 L45 30' fill='none' stroke='%236b5f73' stroke-width='0.8' opacity='0.6'/%3E%3Cpath d='M0 35 L30 50 L60 35' fill='none' stroke='%236b5f73' stroke-width='0.6' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.descent-section > * {
  position: relative;
  z-index: 1;
}

/* Cracked Tile Grid */
.descent-section:nth-of-type(even)::before {
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(42,36,51,0.5) 79px, rgba(42,36,51,0.5) 80px),
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(42,36,51,0.5) 79px, rgba(42,36,51,0.5) 80px),
    linear-gradient(135deg, transparent 48%, rgba(255,51,102,0.15) 48%, rgba(255,51,102,0.15) 52%, transparent 52%);
  background-size: 80px 80px, 80px 80px, 200px 200px;
  opacity: 0.08;
}

/* Responsive */
@media (max-width: 768px) {
  .opening-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    height: auto;
    padding: 4rem 0;
    gap: 1rem;
  }
  
  .title-lunch,
  .opening-image-container,
  .title-quest,
  .opening-grid .tech-annotation {
    grid-column: 1 / -1;
    grid-row: auto;
    text-align: center;
    justify-self: center;
  }
  
  .title-quest {
    text-align: center;
  }
  
  .section-grid,
  .section-grid-alt {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .block-left,
  .block-right,
  .block-wide,
  .block-center,
  .block-accent {
    grid-column: 1 / -1;
  }
  
  .display-text {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }
  
  .terminal-word {
    font-size: clamp(3rem, 15vw, 6rem);
  }
}