/* =============================================================
   zone-layers.css — Cascade Layers zone styles
   Zone 8 · Accent: #e879f9
   A Love Letter to the Web
   ============================================================= */

/* ── Zone tokens ────────────────────────────────────────────── */
:root {
  --zone-color:       #e879f9;
  --zone-color-ok:   oklch(72% 0.25 310);
  --font-display:    'DM Serif Display', Georgia, serif;
  --font-ui:         'Syne', var(--font-sans);
}

/* ── Override base font for this zone's headings ────────────── */
.layers-hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--zone-color);
  text-shadow: 0 0 80px oklch(72% 0.25 310 / 0.4);
}

.zone-story h2,
.zone-playground h2 {
  font-family: var(--font-ui);
  color: var(--zone-color);
}

.zone-story h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  margin-top: var(--space-xl);
}

.zone-story code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--zone-color);
  background: oklch(72% 0.25 310 / 0.1);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* ═══════════════════════════════════════════════════════════════
   ACT 1 — HERO
   Glass pane stacking art
═══════════════════════════════════════════════════════════════ */

.layers-hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: 6rem var(--content-padding) var(--space-2xl);
  max-width: var(--content-width);
  margin-inline: auto;
  position: relative;
}

@media (max-width: 900px) {
  .layers-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    justify-items: center;
    padding-top: 5rem;
  }

  .layers-hero__art {
    order: -1;
  }
}

/* ── Hero art area ── */
.layers-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* ── Glass stack container ── */
.glass-stack {
  position: relative;
  width: 300px;
  height: 360px;
}

/* ── Individual glass pane ── */
.glass-pane {
  position: absolute;
  width: 220px;
  height: 260px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  cursor: default;

  /* Stacking offset: each pane shifts right & down */
  top:  calc(var(--pane-index) * 24px);
  left: calc(var(--pane-index) * 22px);

  /* Glass morphism */
  background: oklch(var(--pane-l, 50%) 0.18 var(--pane-hue) / 0.13);
  border: 1px solid oklch(var(--pane-l, 60%) 0.18 var(--pane-hue) / 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Brightness increases with index (higher = brighter, more opaque) */
  --pane-l: calc(38% + var(--pane-index) * 10%);
  --pane-opacity: calc(0.1 + var(--pane-index) * 0.07);
  background: oklch(var(--pane-l) 0.15 var(--pane-hue) / var(--pane-opacity));

  box-shadow:
    0 8px 32px oklch(var(--pane-l) 0.2 var(--pane-hue) / 0.2),
    inset 0 1px 0 oklch(90% 0.05 var(--pane-hue) / 0.15);

  /* Stacking context: last (highest index) renders on top */
  z-index: calc(var(--pane-index) + 1);

  transition:
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);

  /* Entry animation — staggered */
  animation: pane-enter var(--duration-xslow) var(--ease-out) both;
  animation-delay: calc(var(--pane-index) * 120ms + 200ms);
}

@keyframes pane-enter {
  from {
    opacity: 0;
    transform: translateY(2rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.glass-pane:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 60px oklch(var(--pane-l) 0.25 var(--pane-hue) / 0.35),
    inset 0 1px 0 oklch(90% 0.05 var(--pane-hue) / 0.2);
}

/* The topmost (last) pane — most prominent */
.glass-pane[data-layer="utilities"] {
  border-color: oklch(72% 0.25 310 / 0.7);
  box-shadow:
    0 12px 48px oklch(72% 0.25 310 / 0.35),
    0 0 0 1px oklch(72% 0.25 310 / 0.3),
    inset 0 1px 0 oklch(90% 0.1 310 / 0.25);
}

/* Pane text labels */
.pane-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: oklch(88% 0.15 var(--pane-hue));
  text-shadow: 0 1px 4px oklch(10% 0 0 / 0.5);
}

.pane-priority {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(65% 0.1 var(--pane-hue) / 0.8);
  align-self: flex-end;
}

.glass-pane[data-layer="utilities"] .pane-priority {
  color: oklch(72% 0.25 310);
  font-weight: 700;
}

/* Axis labels */
.hero-axis-label {
  position: absolute;
  bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.hero-axis-label--low  { left: 0; }
.hero-axis-label--high { right: 0; }

/* ── Hero content ── */
.layers-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.layers-hero__content .zone-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--zone-color);
}

.layers-hero__content .subtitle {
  max-width: 40ch;
  color: var(--color-muted);
}

/* ── Scroll cue ── */
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-top: var(--space-md);
  transition: color var(--duration-base) var(--ease-out);
}

.hero-scroll-cue:hover {
  color: var(--zone-color);
}

.scroll-cue-line {
  display: block;
  width: 2px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--zone-color), transparent);
  border-radius: 2px;
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%       { opacity: 0.4; transform: scaleY(0.6); }
}

/* ═══════════════════════════════════════════════════════════════
   ACT 2 — STORY
═══════════════════════════════════════════════════════════════ */

.story-lead {
  max-width: 68ch;
  margin-bottom: var(--space-xl);
}

.story-section {
  margin-bottom: var(--space-xl);
}

.story-section p {
  max-width: 65ch;
  margin-bottom: var(--space-md);
  color: var(--color-muted);
  line-height: 1.8;
}

/* ── Code wrapper ── */
.code-wrapper {
  position: relative;
  margin-top: var(--space-md);
}

.code-wrapper .copy-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
}

.code-wrapper--live {
  margin-top: 0;
}

/* ── Syntax highlights (reuse base .code-block tokens) ── */
.code-block .keyword  { color: var(--zone-color); }

/* ═══════════════════════════════════════════════════════════════
   ACT 3 — PLAYGROUND / SANDBOX
═══════════════════════════════════════════════════════════════ */

.sandbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-lg);
}

.sandbox__deck-area {
  grid-column: 1 / -1;
}

.sandbox__winner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  align-self: start;
  transition: border-color var(--duration-base) var(--ease-out);
}

.sandbox__preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.sandbox__code-output {
  grid-column: 1 / -1;
}

/* ── Deck label / stack label ── */
.sandbox__deck-label,
.sandbox__preview-label,
.sandbox__code-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.sandbox__preview-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
}

/* ── Winner badge ── */
.winner-label {
  flex-shrink: 0;
}

.winner-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: oklch(72% 0.22 var(--badge-hue, 310));
  flex: 1;
  transition: color var(--duration-base) var(--ease-out);
}

.winner-badge {
  font-size: var(--text-xl);
  color: oklch(72% 0.25 var(--badge-hue, 310));
  filter: drop-shadow(0 0 8px oklch(72% 0.25 var(--badge-hue, 310) / 0.6));
  transition:
    color var(--duration-base) var(--ease-out),
    filter var(--duration-base) var(--ease-out);
  animation: winner-pulse 2.5s ease-in-out infinite;
}

@keyframes winner-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.9); }
}

/* ── Layer deck (draggable cards row) ── */
.layer-deck {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: oklch(6% 0.01 265);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 140px;
  align-items: stretch;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}

/* ── Individual layer card ── */
.layer-card {
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  user-select: none;
  position: relative;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.layer-card:hover {
  border-color: oklch(60% 0.12 var(--card-hue, 265));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.3);
}

.layer-card:focus-visible {
  outline: 2px solid var(--zone-color);
  outline-offset: 2px;
}

/* Dragging state */
.layer-card--dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: scale(0.97);
  border-color: var(--zone-color) !important;
  box-shadow: 0 0 0 2px var(--zone-color);
}

/* The current winning (rightmost) card */
.layer-card--winner {
  border-color: oklch(72% 0.22 var(--card-hue, 310));
  background: oklch(72% 0.22 var(--card-hue, 310) / 0.08);
}

.layer-card--winner::after {
  content: 'wins';
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(72% 0.22 var(--card-hue, 310));
  background: oklch(72% 0.22 var(--card-hue, 310) / 0.15);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* Drop zone indicator (ghost insertion marker) */
.layer-deck__drop-indicator {
  width: 3px;
  align-self: stretch;
  background: var(--zone-color);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  pointer-events: none;
}

.layer-deck__drop-indicator--active {
  opacity: 1;
}

/* ── Card inner elements ── */
.layer-card__symbol {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.layer-card--winner .layer-card__symbol {
  color: oklch(72% 0.22 var(--card-hue, 310));
}

.layer-card__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.layer-card__desc {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-muted);
  line-height: 1.4;
  flex: 1;
}

.layer-card__swatch {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: oklch(68% 0.2 var(--swatch-hue));
  opacity: 0.7;
  margin-top: auto;
}

/* ── Priority arrow bar ── */
.priority-arrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-inline: var(--space-md);
}

.priority-arrow__track {
  flex: 1;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-border),
    var(--zone-color)
  );
  border-radius: 2px;
  position: relative;
}

.priority-arrow__track::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--zone-color);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.priority-arrow__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── Preview stage ── */
.preview-stage {
  background: oklch(6% 0.01 265);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-block: var(--space-sm);
}

/* ── The demo target element ── */
/* Base non-layer styles */
.layer-target {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 500;
  background: oklch(10% 0.01 265);
  letter-spacing: 0.02em;
  transition:
    color 0.4s var(--ease-out),
    font-size 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    font-weight 0.3s var(--ease-out);
}

/* ── Live code output ── */
.code-block--live {
  min-height: 200px;
  font-size: var(--text-xs);
  line-height: 1.8;
}

.code-block--live code {
  display: block;
  white-space: pre;
}

/* ── Responsive sandbox ── */
@media (max-width: 900px) {
  .sandbox {
    grid-template-columns: 1fr;
  }

  .sandbox__winner,
  .sandbox__preview {
    grid-column: 1;
  }

  .sandbox__code-output {
    grid-column: 1;
  }

  .layers-hero {
    padding-top: 5rem;
  }

  .glass-stack {
    width: 240px;
    height: 300px;
  }

  .glass-pane {
    width: 180px;
    height: 220px;
    top:  calc(var(--pane-index) * 18px);
    left: calc(var(--pane-index) * 16px);
  }
}

@media (max-width: 600px) {
  .layer-deck {
    flex-wrap: wrap;
  }

  .layer-card {
    min-width: 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
  }

  .layer-card__swatch {
    width: 4px;
    height: 100%;
    margin-left: auto;
    margin-top: 0;
  }

  .glass-stack {
    width: min(200px, 70vw);
    height: 260px;
  }

  .glass-pane {
    width: min(150px, 55vw);
    height: 190px;
    top:  calc(var(--pane-index) * 14px);
    left: calc(var(--pane-index) * 12px);
  }
}

/* ── Ambient Aurora (Layer 1 / Task 5) ─────────────────── */
.ambient-bg--aurora::before {
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, var(--zone-color, oklch(0.65 0.18 290)) 30%, transparent 60%);
  animation: ambient-aurora 60s linear infinite;
  opacity: 0.12;
}