/* 4D — Fourth Dimension (mind, astral, fluid time) */

body.fourth-dimension-page .site-header,
body.fourth-dimension-page .site-header__nav-backdrop {
  display: none !important;
}

body.fourth-dimension-page {
  margin: 0;
  color-scheme: dark;
  cursor: none;
}

body.fourth-dimension-page a,
body.fourth-dimension-page button {
  cursor: none;
}

body.fourth-dimension-page .site-main.dim-4 {
  max-width: none;
  margin: 0;
  padding: 0;
}

.fourth-dimension-page {
  --dim4-bg-fluid: #8ec8d4;
  --dim4-bg-ether: #a8b8e0;
  --dim4-bg-upper: #d8e8f8;
  --dim4-bg-lower: #2a1838;
  --dim4-bg-awaken: #6a88b8;
  --dim4-bg-mastery: #1a3848;
  --dim4-bg-deep: #0c1820;
  --dim4-text: #142028;
  --dim4-text-soft: rgba(20, 32, 40, 0.82);
  --dim4-muted: rgba(40, 56, 72, 0.58);
  --dim4-light: #eef6fa;
  --dim4-aqua: #5ec8d0;
  --dim4-lavender: #9b8ec8;
  --dim4-gold: #d8c890;
  --dim4-shadow: #1a1028;
  --dim4-font-display: "Cormorant Garamond", Georgia, serif;
  --dim4-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --dim4-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dim4-pad: clamp(1.25rem, 4vw, 3rem);
  --dim4-morph: 0;
  --dim4-astral: 50%;
  --dim4-time: 50%;
  --dim4-dream: 0;
  --dim4-thought: 0;
  --dim4-form-hero: 0;
  --dim4-form-manifestation: 0;
  --dim4-form-astral: 0;
  --dim4-form-awakening: 0;
  --dim4-form-mastery: 0;
  --dim4-cursor-x: 50%;
  --dim4-cursor-y: 50%;
}

.dim-4 {
  position: relative;
  overflow-x: hidden;
  color: var(--dim4-text);
  background: linear-gradient(
    180deg,
    var(--dim4-bg-fluid) 0%,
    #9ed0dc 8%,
    var(--dim4-bg-ether) 18%,
    #b8c0e8 28%,
    var(--dim4-bg-upper) 38%,
    #a8b8d8 46%,
    #6a5888 54%,
    var(--dim4-bg-lower) 62%,
    #3a2850 70%,
    var(--dim4-bg-awaken) 78%,
    #4a6890 86%,
    var(--dim4-bg-mastery) 92%,
    var(--dim4-bg-deep) 100%
  );
}

.dim-4__canvas,
.dim-4__ripple-canvas,
.dim-4__atmosphere,
.dim-4__grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.dim-4__canvas { z-index: 0; display: block; width: 100%; height: 100%; }
.dim-4__ripple-canvas { z-index: 4; display: block; width: 100%; height: 100%; mix-blend-mode: soft-light; }

.dim-4__atmosphere {
  z-index: 0;
  opacity: calc(0.45 + var(--dim4-morph) * 0.4);
  background:
    radial-gradient(ellipse 40% 35% at calc(var(--dim4-astral) * 1%) 35%, rgba(216, 232, 248, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at calc(100% - var(--dim4-astral) * 1%) 65%, rgba(42, 24, 56, 0.5) 0%, transparent 55%);
  mix-blend-mode: soft-light;
}

.dim-4__grain {
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dim-4__chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--dim4-pad);
  pointer-events: none;
}

.dim-4__exit, .dim-4__chapter-nav, .dim-4__progress { pointer-events: auto; }

.dim-4__exit {
  font-family: var(--dim4-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim4-text);
  opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
}

.dim-4__exit:hover { opacity: 1; color: var(--dim4-aqua); }

.dim-4__chapter-nav { display: none; gap: 1.5rem; }
@media (min-width: 900px) { .dim-4__chapter-nav { display: flex; } }

.dim-4__chapter-link {
  font-family: var(--dim4-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim4-text);
  opacity: 0.45;
  transition: opacity 0.3s, color 0.3s;
}

.dim-4__chapter-link.is-active,
.dim-4__chapter-link:hover { opacity: 1; color: var(--dim4-lavender); }

.dim-4__progress {
  width: 4rem;
  height: 2px;
  background: rgba(20, 32, 40, 0.15);
  overflow: hidden;
}

.dim-4__progress span {
  display: block;
  height: 100%;
  width: var(--dim4-scroll, 0%);
  background: linear-gradient(90deg, var(--dim4-aqua), var(--dim4-lavender));
}

.dim-4__hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(5rem + var(--dim4-pad)) var(--dim4-pad) var(--dim4-pad);
}

.dim-4__hero-inner { max-width: 42rem; text-align: center; }

.dim-4__eyebrow {
  font-family: var(--dim4-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim4-muted);
  margin: 0 0 1.25rem;
}

.dim-4__tagline {
  margin: 0 0 1.5rem;
  font-family: var(--dim4-font-display);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  color: var(--dim4-text-soft);
  opacity: calc(0.5 + var(--dim4-form-hero) * 0.5);
  transform: translateY(calc((1 - var(--dim4-form-hero)) * 1rem));
  transition: opacity 1.2s var(--dim4-ease), transform 1.2s var(--dim4-ease);
}

.dim-4__lead {
  font-family: var(--dim4-font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--dim4-muted);
  margin: 0 auto;
  max-width: 32rem;
}

.dim-4__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dim4-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim4-muted);
  opacity: calc(1 - var(--dim4-form-hero) * 1.4);
}

.dim-4__scroll-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(180deg, var(--dim4-aqua), transparent);
  animation: dim4-scroll-pulse 2s var(--dim4-ease) infinite;
}

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

.dim-4__hero-orb {
  position: absolute;
  right: clamp(1rem, 8vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(8rem, 22vw, 14rem);
  height: clamp(8rem, 22vw, 14rem);
  opacity: calc(0.3 + var(--dim4-form-hero) * 0.7);
}

.dim-4__hero-orb-core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 230, 240, 0.8), rgba(94, 200, 208, 0.2) 70%, transparent);
  animation: dim4-orb-breathe 4s ease-in-out infinite;
}

.dim-4__hero-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(155, 142, 200, 0.35);
  animation: dim4-orb-spin 18s linear infinite;
}

.dim-4__hero-orb-ring--b {
  inset: 12%;
  animation-duration: 12s;
  animation-direction: reverse;
  border-color: rgba(94, 200, 208, 0.3);
}

@keyframes dim4-orb-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes dim4-orb-spin { to { transform: rotate(360deg); } }

[data-dim4-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s var(--dim4-ease), transform 0.9s var(--dim4-ease);
}

[data-dim4-reveal].is-visible { opacity: 1; transform: translateY(0); }

.dim-4__section { position: relative; z-index: 2; }

.dim-4__chapter {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(5rem + var(--dim4-pad)) var(--dim4-pad) var(--dim4-pad);
  display: flex;
  align-items: center;
}

.dim-4__chapter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  align-items: center;
}

@media (min-width: 900px) {
  .dim-4__chapter-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .dim-4__chapter--astral .dim-4__chapter-grid { direction: rtl; }
  .dim-4__chapter--astral .dim-4__chapter-grid > * { direction: ltr; }
}

.dim-4__chapter-num {
  font-family: var(--dim4-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--dim4-aqua);
  margin: 0 0 0.75rem;
}

.dim-4__chapter-title {
  font-family: var(--dim4-font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.dim-4__chapter-title--center { text-align: center; }

.dim-4__chapter-sub {
  font-family: var(--dim4-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim4-muted);
  margin: 0 0 1.5rem;
}

.dim-4__chapter-sub--center { text-align: center; }

.dim-4__prose {
  font-family: var(--dim4-font-display);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: var(--dim4-text-soft);
}

.dim-4__prose p { margin: 0 0 1rem; }
.dim-4__prose p:last-child { margin-bottom: 0; }

/* Dream matrix */
.dim-4__dream-label,
.dim-4__astral-label,
.dim-4__mind-label {
  font-family: var(--dim4-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim4-muted);
  margin: 0 0 1rem;
}

.dim-4__dream-stage,
.dim-4__thought-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(94, 200, 208, 0.25);
  background: rgba(238, 246, 250, 0.35);
  backdrop-filter: blur(8px);
  opacity: calc(0.5 + var(--dim4-form-manifestation) * 0.5);
  transform: translateY(calc((1 - var(--dim4-form-manifestation)) * 2rem));
  transition: opacity 1s var(--dim4-ease), transform 1s var(--dim4-ease);
}

.dim-4__dream-canvas,
.dim-4__thought-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.dim-4__dream-moods,
.dim-4__astral-layers,
.dim-4__thought-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.dim-4__mood,
.dim-4__layer,
.dim-4__thought {
  font-family: var(--dim4-font-display);
  text-align: left;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(20, 32, 40, 0.12);
  background: rgba(238, 246, 250, 0.45);
  color: var(--dim4-text);
  transition: border-color 0.35s, background 0.35s, transform 0.35s var(--dim4-ease);
}

.dim-4__mood:hover,
.dim-4__layer:hover,
.dim-4__thought:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 200, 208, 0.45);
}

.dim-4__mood.is-active,
.dim-4__layer.is-active,
.dim-4__thought.is-active {
  border-color: var(--dim4-lavender);
  background: rgba(216, 232, 248, 0.65);
}

.dim-4__mood--fear.is-active {
  border-color: rgba(80, 40, 90, 0.6);
  background: rgba(60, 40, 80, 0.25);
}

.dim-4__mood-label,
.dim-4__layer-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.dim-4__mood-desc,
.dim-4__layer-desc {
  display: block;
  font-size: 0.95rem;
  color: var(--dim4-muted);
  line-height: 1.45;
}

.dim-4.is-dream-fear { --dim4-dream: 1; }
.dim-4.is-dream-joy { --dim4-dream: 0; }

/* Astral pool */
.dim-4__astral-pool {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(155, 142, 200, 0.3);
  opacity: calc(0.45 + var(--dim4-form-astral) * 0.55);
  transform: scale(calc(0.92 + var(--dim4-form-astral) * 0.08));
  transition: opacity 1s var(--dim4-ease), transform 1.2s var(--dim4-ease);
}

.dim-4__astral-upper,
.dim-4__astral-lower {
  position: absolute;
  left: 0;
  right: 0;
  transition: height 0.8s var(--dim4-ease);
}

.dim-4__astral-upper {
  top: 0;
  height: calc(var(--dim4-astral) * 1%);
  background: linear-gradient(180deg, #e8f4ff 0%, #b8d0f0 100%);
}

.dim-4__astral-lower {
  bottom: 0;
  height: calc((100 - var(--dim4-astral)) * 1%);
  background: linear-gradient(0deg, #1a1028 0%, #3a2850 100%);
}

.dim-4__astral-surface {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--dim4-astral) * 1% - 12px);
  height: 24px;
  background: linear-gradient(90deg, transparent, rgba(180, 230, 240, 0.7), transparent);
  filter: blur(2px);
  animation: dim4-surface-wave 3s ease-in-out infinite;
}

@keyframes dim4-surface-wave {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(4px) scaleX(1.02); }
}

.dim-4__layer--upper.is-active ~ .dim-4__astral-pool,
.dim-4__astral-viz:has(.dim-4__layer--upper.is-active) { --dim4-astral: 78; }

.dim-4__layer--lower.is-active ~ .dim-4__astral-pool,
.dim-4__astral-viz:has(.dim-4__layer--lower.is-active) { --dim4-astral: 28; }

/* Awakening */
.dim-4__chapter-inner {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.dim-4__sync-ring {
  position: relative;
  width: min(20rem, 70vw);
  height: min(20rem, 70vw);
  margin: 2rem auto 2.5rem;
  opacity: calc(0.35 + var(--dim4-form-awakening) * 0.65);
  transform: rotate(calc((var(--dim4-form-awakening) - 0.5) * 20deg));
  transition: opacity 1s, transform 1.2s var(--dim4-ease);
}

.dim-4__sync-code {
  position: absolute;
  font-family: var(--dim4-font-mono);
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--dim4-gold);
  text-shadow: 0 0 20px rgba(216, 200, 144, 0.5);
  animation: dim4-sync-pulse 3s ease-in-out infinite;
}

.dim-4__sync-code:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.dim-4__sync-code:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); animation-delay: 0.5s; }
.dim-4__sync-code:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.dim-4__sync-code:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); animation-delay: 1.5s; }

@keyframes dim4-sync-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.dim-4__symptoms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 700px) {
  .dim-4__symptoms { grid-template-columns: repeat(3, 1fr); }
}

.dim-4__symptom {
  padding: 1.25rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(238, 246, 250, 0.15);
  background: rgba(20, 32, 40, 0.25);
  color: var(--dim4-light);
  text-align: left;
  transition: border-color 0.35s, background 0.35s;
}

.dim-4__symptom.is-active {
  border-color: rgba(94, 200, 208, 0.55);
  background: rgba(94, 200, 208, 0.12);
}

.dim-4__symptom-label {
  display: block;
  font-family: var(--dim4-font-display);
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.dim-4__symptom-desc {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.75;
}

.dim-4__time-fluid {
  text-align: center;
  opacity: calc(0.5 + var(--dim4-form-awakening) * 0.5);
}

.dim-4__time-fluid-label {
  display: block;
  font-family: var(--dim4-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 246, 250, 0.65);
  margin-bottom: 0.75rem;
}

.dim-4__time-range {
  width: min(20rem, 80%);
  accent-color: var(--dim4-aqua);
}

.dim-4.is-time-stretch { animation: dim4-time-warp 2s ease-in-out infinite; }
.dim-4.is-time-compress .dim-4__sync-ring { animation: dim4-time-compress 1.5s ease-in-out infinite; }

@keyframes dim4-time-warp {
  0%, 100% { filter: none; }
  50% { filter: blur(0.4px); }
}

@keyframes dim4-time-compress {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.94); }
}

/* Mastery pool */
.dim-4__mind-pool .dim-4__thought-stage {
  opacity: calc(0.45 + var(--dim4-form-mastery) * 0.55);
  border-color: rgba(94, 200, 208, 0.2);
}

.dim-4__thought--love.is-active {
  border-color: rgba(94, 200, 208, 0.6);
  background: rgba(94, 200, 208, 0.15);
}

.dim-4__thought--fear.is-active {
  border-color: rgba(120, 60, 100, 0.5);
  background: rgba(80, 40, 70, 0.2);
}

.dim-4__mind-hint {
  font-family: var(--dim4-font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--dim4-muted);
  margin: 1rem 0 0;
}

.dim-4.is-thought-calm .dim-4__thought-stage { border-color: rgba(94, 200, 208, 0.5); }
.dim-4.is-thought-churn .dim-4__thought-stage { border-color: rgba(100, 50, 90, 0.45); }

/* Footer */
.dim-4__footer {
  min-height: 50vh;
  padding: 4rem var(--dim4-pad) 6rem;
  text-align: center;
  color: var(--dim4-light);
}

.dim-4__footer-eyebrow {
  font-family: var(--dim4-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 1rem;
}

.dim-4__footer-line {
  font-family: var(--dim4-font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-style: italic;
  margin: 0 0 2rem;
}

.dim-4__footer-link {
  display: inline-block;
  font-family: var(--dim4-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim4-aqua);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(94, 200, 208, 0.35);
  border-radius: 999px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.dim-4__footer-link:hover {
  border-color: var(--dim4-aqua);
  box-shadow: 0 0 24px rgba(94, 200, 208, 0.25);
}

/* Light text on dark scroll zones */
.dim-4__chapter--awakening,
.dim-4__chapter--mastery {
  color: var(--dim4-light);
}

.dim-4__chapter--awakening .dim-4__chapter-num,
.dim-4__chapter--mastery .dim-4__chapter-num { color: var(--dim4-aqua); }

.dim-4__chapter--awakening .dim-4__chapter-sub,
.dim-4__chapter--mastery .dim-4__chapter-sub { color: rgba(238, 246, 250, 0.55); }

.dim-4__chapter--mastery .dim-4__prose { color: rgba(238, 246, 250, 0.82); }
.dim-4__chapter--mastery .dim-4__mind-label,
.dim-4__chapter--mastery .dim-4__mind-hint { color: rgba(238, 246, 250, 0.65); }

.dim-4__chapter--mastery .dim-4__thought {
  color: var(--dim4-light);
  background: rgba(12, 24, 32, 0.45);
  border-color: rgba(238, 246, 250, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  body.fourth-dimension-page { cursor: auto; }
  body.fourth-dimension-page a,
  body.fourth-dimension-page button { cursor: pointer; }
  .dim-4__ripple-canvas { display: none; }
  [data-dim4-reveal] { opacity: 1; transform: none; }
  .dim-4__hero-orb-core,
  .dim-4__hero-orb-ring,
  .dim-4__scroll-line,
  .dim-4__sync-code,
  .dim-4__astral-surface { animation: none; }
}