:root {
  /* Design tokens: Fira Code (400, (Google Fonts, IntersectionObserver triggers at `threshold: 0.15`. IntersectionObserver` */
  --midnight-wash: #1a2744;
  --parchment-white: #f4f1eb;
  --ethereal-cerulean: #5b8fb9;
  --morning-frost: #a3c4dc;
  --gilded-ink: #c8a96e;
  --charcoal-script: #2d3142;
  --muted-slate: #6b7b8d;
  --blush-vellum: #e8d5c4;
  --blue-shadow: #3d5270;
}

* { box-sizing: border-box; }

html { background: var(--midnight-wash); }

body {
  margin: 0;
  color: var(--charcoal-script);
  background: var(--midnight-wash);
  font-family: "Nunito", sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

.watermark-plane {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(163,196,220,0.35), transparent 70%),
    radial-gradient(ellipse at 70% 80%, rgba(200,169,110,0.15), transparent 60%),
    linear-gradient(135deg, #1a2744 0%, #223052 48%, #1a2744 100%);
}

.wash {
  position: absolute;
  width: 58vw;
  height: 58vw;
  min-width: 34rem;
  min-height: 34rem;
  border-radius: 47% 53% 61% 39%;
  filter: blur(60px);
  opacity: 0.32;
  will-change: opacity;
  animation: breatheWash 13s ease-in-out infinite alternate;
}

.wash-a { left: -15vw; top: 12vh; background: conic-gradient(from 35deg, rgba(163,196,220,0.28), rgba(91,143,185,0.18), transparent, rgba(232,213,196,0.14)); }
.wash-b { right: -18vw; top: 42vh; background: radial-gradient(ellipse at 40% 45%, rgba(91,143,185,0.34), transparent 62%), radial-gradient(ellipse at 70% 62%, rgba(200,169,110,0.18), transparent 58%); animation-delay: -4s; }
.wash-c { left: 22vw; bottom: -22vw; background: conic-gradient(from 120deg, rgba(232,213,196,0.18), rgba(163,196,220,0.22), rgba(200,169,110,0.16), transparent); animation-delay: -8s; }

.fixed-wordmark {
  position: fixed;
  top: 1.25rem;
  left: 1.4rem;
  z-index: 20;
  color: rgba(244,241,235,0.78);
  font-family: "Fira Code", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  mix-blend-mode: difference;
}

.opening {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #1a2744;
}

.opening-wash {
  position: absolute;
  width: min(76vw, 52rem);
  height: min(76vw, 52rem);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(163,196,220,0.3), rgba(91,143,185,0.11) 44%, transparent 72%);
  filter: blur(34px);
  opacity: 0;
  animation: openingWash 2s ease-out forwards;
}

.opening-rule {
  position: absolute;
  inset: 8vh 8vw;
  width: 84vw;
  height: 84vh;
  pointer-events: none;
}

.opening-rule line {
  stroke: #5b8fb9;
  stroke-width: 0.12;
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  animation: drawRule 1.2s ease-out 1.2s forwards;
}

.opening-content { position: relative; text-align: center; z-index: 2; }

.letter-title {
  margin: 0;
  color: #f4f1eb;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.letter-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) rotate(1.5deg);
  animation: letterIn 700ms ease-out forwards;
}

.letter-title span:nth-child(1) { animation-delay: 800ms; }
.letter-title span:nth-child(2) { animation-delay: 920ms; }
.letter-title span:nth-child(3) { animation-delay: 1040ms; }
.letter-title span:nth-child(4) { animation-delay: 1160ms; }
.letter-title span:nth-child(5) { animation-delay: 1280ms; }
.letter-title span:nth-child(6) { animation-delay: 1400ms; }
.letter-title span:nth-child(7) { animation-delay: 1520ms; }
.letter-title span:nth-child(8) { animation-delay: 1640ms; }

.opening-content p {
  margin: 1.4rem 0 0;
  color: #a3c4dc;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.5vw, 1.3rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeRise 900ms ease-out 1.5s forwards;
}

.folio-stack {
  position: relative;
  z-index: 2;
  padding: 12vh 0 0;
}

.folio {
  position: relative;
  width: calc(96vw - (var(--folio-depth) * 1.9vw));
  min-height: 88vh;
  margin: -2vh auto 14vh;
  padding: clamp(3rem, 8vw, 7rem) clamp(1.6rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 2.5vw, 3rem);
  background: #f4f1eb;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  box-shadow: 0 calc(6px + var(--folio-depth) * 4px) calc(20px + var(--folio-depth) * 12px) rgba(61, 82, 112, calc(0.07 + var(--folio-depth) * 0.012));
  transform: translateY(120px) translateX(var(--shift)) rotate(var(--rotation));
  opacity: 0;
  transition: box-shadow 0.6s ease-out, transform 0.8s ease-out, opacity 0.8s ease-out;
  overflow: hidden;
}

.folio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 3px;
  background: linear-gradient(to right, transparent, #e8d5c4 15%, #f4f1eb 30%, #e8d5c4 50%, #f4f1eb 70%, #e8d5c4 85%, transparent);
  z-index: 4;
}

.folio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0.46), transparent 36%, rgba(232,213,196,0.2));
  pointer-events: none;
}

.folio.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(var(--shift)) rotate(var(--rotation));
}

.folio.is-visible:hover {
  box-shadow: 0 calc(12px + var(--folio-depth) * 5px) calc(28px + var(--folio-depth) * 13px) rgba(61, 82, 112, calc(0.08 + var(--folio-depth) * 0.012));
}

.folio-wash {
  position: absolute;
  inset: 5% 2% auto auto;
  width: 72%;
  height: 65%;
  background:
    radial-gradient(ellipse at 32% 24%, rgba(163,196,220,0.28), transparent 70%),
    conic-gradient(from 42deg at 58% 48%, rgba(91,143,185,0.16), transparent, rgba(232,213,196,0.18), transparent);
  filter: blur(60px);
  opacity: 0.85;
  z-index: 0;
}

.folio-wash.gilded { background: radial-gradient(ellipse at 42% 36%, rgba(200,169,110,0.2), transparent 62%), radial-gradient(ellipse at 72% 55%, rgba(163,196,220,0.24), transparent 68%); }
.folio-wash.blended { background: conic-gradient(from 210deg, rgba(91,143,185,0.18), rgba(200,169,110,0.17), rgba(163,196,220,0.23), transparent); }

.ordinal-mark {
  position: absolute;
  right: 5vw;
  bottom: 2vh;
  z-index: 1;
  color: rgba(91,143,185,0.06);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(8rem, 18vw, 14rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.06em;
  pointer-events: none;
}

.folio-content {
  position: relative;
  z-index: 3;
  max-width: 54rem;
}

.left-flow { grid-column: 1 / span 5; }
.right-flow { grid-column: 4 / span 5; }
.narrow { grid-column-end: span 4; }

h2 {
  margin: 0 0 1.6rem;
  color: #2d3142;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

p { margin: 0 0 1.25rem; }

.annotation {
  margin-bottom: 1rem;
  color: #6b7b8d;
  font-family: "Fira Code", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

blockquote {
  position: relative;
  margin: 2rem 0 0;
  padding: 1.4rem 2.2rem;
  background: rgba(232,213,196,0.46);
  color: #2d3142;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.45rem, 2.5vw, 2.25rem);
  font-style: italic;
  line-height: 1.22;
}

blockquote::before,
blockquote::after {
  position: absolute;
  color: #c8a96e;
  font-family: "Cormorant Garamond", serif;
  font-size: 6rem;
  font-style: normal;
  line-height: 1;
  opacity: 0.55;
}

blockquote::before { content: "<"; left: -0.8rem; top: -1.1rem; transform: rotate(15deg); }
blockquote::after { content: ">"; right: -0.8rem; bottom: -1.7rem; transform: rotate(15deg); }

.folio-content > *,
.final-content > * {
  opacity: 0;
  transform: translateY(12px);
}

.is-visible .folio-content > *,
.is-visible .final-content > * {
  animation: lineIn 760ms ease-out forwards;
  animation-delay: calc(260ms + var(--stagger-index, 0) * var(--stagger-interval, 120ms));
}

.diagonal-rule {
  position: absolute;
  width: 38vw;
  height: 1px;
  top: 18%;
  right: -10vw;
  background: #5b8fb9;
  opacity: 0;
  transform-origin: center;
  z-index: 3;
}

.is-visible .diagonal-rule { animation: ruleAppear 900ms ease-out 380ms forwards; }
.rule-225 { transform: rotate(22.5deg) scaleX(0); }
.rule-45 { transform: rotate(45deg) scaleX(0); left: -12vw; right: auto; top: 22%; }
.rule-675 { transform: rotate(67.5deg) scaleX(0); }
.rule-90 { transform: rotate(90deg) scaleX(0); left: 8vw; right: auto; top: 50%; }
.rule-112 { transform: rotate(112.5deg) scaleX(0); top: 28%; }

.final-folio {
  position: relative;
  min-height: 100vh;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 10vh 8vw;
  color: #f4f1eb;
  overflow: hidden;
}

.final-content {
  position: relative;
  z-index: 3;
  max-width: 48rem;
  text-align: center;
}

.final-content h2 { color: #f4f1eb; }
.final-content p:not(.annotation) { color: rgba(244,241,235,0.82); }
.final-content .annotation { color: #c8a96e; }

.final-mark {
  position: absolute;
  inset: auto auto 13vh 50%;
  transform: translateX(-50%);
  color: rgba(163,196,220,0.06);
  animation: ordinalPulse 6s ease-in-out infinite;
}

.code-word {
  margin-top: 3rem;
  color: #a3c4dc;
  font-family: "Fira Code", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

.code-word span {
  display: inline-block;
  opacity: 0;
}

.is-visible .code-word span { animation: codeFade 800ms ease-out forwards; }
.is-visible .code-word span:nth-child(1) { animation-delay: 300ms; }
.is-visible .code-word span:nth-child(2) { animation-delay: 500ms; }
.is-visible .code-word span:nth-child(3) { animation-delay: 700ms; }
.is-visible .code-word span:nth-child(4) { animation-delay: 900ms; }
.is-visible .code-word span:nth-child(5) { animation-delay: 1100ms; }
.is-visible .code-word span:nth-child(6) { animation-delay: 1300ms; }
.is-visible .code-word span:nth-child(7) { animation-delay: 1500ms; }
.is-visible .code-word span:nth-child(8) { animation-delay: 1700ms; }

@keyframes openingWash { to { opacity: 0.3; } }
@keyframes drawRule { to { stroke-dashoffset: 0; } }
@keyframes letterIn { to { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes fadeRise { to { opacity: 1; transform: translateY(0); } }
@keyframes lineIn { to { opacity: 1; transform: translateY(0); } }
@keyframes breatheWash { from { opacity: 0.22; transform: rotate(-4deg) scale(0.96); } to { opacity: 0.4; transform: rotate(5deg) scale(1.04); } }
@keyframes ordinalPulse { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.08; } }
@keyframes codeFade { to { opacity: 1; } }
@keyframes ruleAppear { to { opacity: 0.72; transform: rotate(var(--angle, 22.5deg)) scaleX(1); } }

.rule-225 { --angle: 22.5deg; }
.rule-45 { --angle: 45deg; }
.rule-675 { --angle: 67.5deg; }
.rule-90 { --angle: 90deg; }
.rule-112 { --angle: 112.5deg; }

@media (max-width: 760px) {
  .folio {
    width: 92vw;
    min-height: 82vh;
    grid-template-columns: 1fr;
    padding: 4.5rem 1.35rem 5.5rem;
    transform: translateY(90px) rotate(var(--rotation));
  }
  .left-flow,
  .right-flow,
  .narrow { grid-column: 1; }
  .ordinal-mark { right: 1rem; font-size: clamp(7rem, 32vw, 10rem); }
  .diagonal-rule { width: 72vw; }
}