/* Nedstigningen — scroll-driven descent.
   The shader canvas is a fixed full-viewport backdrop; each stratum is a tall
   full-bleed section whose copy stays a real, editable Gutenberg block. */

/* Dark base so overscroll / any gap never flashes theme white. */
body { background-color: #060608; }

/* --- the shader backdrop ------------------------------------------------- */
/* The canvas is a top-level block, so WordPress's constrained layout tries to
   clamp it to content width (max-width + margin:auto). Override both so it
   truly fills the viewport. Percent sizing (not 100vw) avoids scrollbar overflow. */
.descent-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* --- the scrolling column of strata ------------------------------------- */
.descent {
  position: relative;
  z-index: 1;
  counter-reset: stratum;
}

.descent-scene {
  counter-increment: stratum;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(6rem, 14vh, 11rem) clamp(1.5rem, 7vw, 8rem);

  /* per-scene palette — overridden below */
  --ink: var(--color-cream-50, #f7f1e4);
  --kicker: var(--decorative-gold, #cf9d54);
  --scrim: rgba(6, 8, 14, 0.55);
}

/* the copy is a single reveal unit, a narrow reading column */
.scene-copy {
  max-width: 34rem;
  align-self: flex-start;
  text-align: left;
  color: var(--ink);
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.descent-scene.is-visible .scene-copy { opacity: 1; transform: none; }

/* let each scene's own colour win over the theme cascade */
.scene-copy :is(p, h1, h2, h3, a) { color: inherit; }

/* --- typography ---------------------------------------------------------- */
.kicker {
  margin: 0 0 1.1rem;
  font-family: "roca", sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kicker);
}
.kicker::before {
  content: "№ " counter(stratum, decimal-leading-zero) "  ·  ";
  opacity: 0.7;
}

.scene-title {
  margin: 0 0 1.2rem;
  font-family: "new-spirit-condensed", "roca", serif;
  font-weight: 500;
  line-height: 1.02;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.scene-title--hero { font-size: clamp(3.2rem, 11vw, 8rem); }

.lede {
  margin: 0;
  font-family: "new-spirit", serif;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  max-width: 30rem;
}

/* text needs to sit legibly over shifting shader colour */
.scene-copy > * { text-shadow: 0 1px 24px var(--scrim); }

/* gentle left/right rhythm down the descent; hero stays centred */
.descent-scene:nth-child(even) .scene-copy { align-self: flex-end; text-align: right; }
.descent-scene:nth-child(even) .lede { margin-left: auto; }
.scene--dusk .scene-copy { align-self: center; text-align: center; }
.scene--dusk .lede { margin-left: auto; margin-right: auto; }

/* --- per-scene palettes -------------------------------------------------- */
.scene--dusk      { --ink: #f4ede0; --kicker: #f0a866; --scrim: rgba(10,10,28,0.5); }
.scene--fjell     { --ink: #eef0f4; --kicker: #d7b98a; --scrim: rgba(10,10,26,0.55); }
.scene--tregrensa { --ink: #eaf0ea; --kicker: #cbd8b8; --scrim: rgba(8,12,10,0.6); }
.scene--skodde    { --ink: #e6ebf0; --kicker: #aebccb; --scrim: rgba(8,12,20,0.6); }
.scene--skog      { --ink: #eef3e6; --kicker: #b7d08a; --scrim: rgba(4,10,4,0.65); }
.scene--elv       { --ink: #e8f1f2; --kicker: #a8cdd2; --scrim: rgba(4,10,12,0.6); }
.scene--myr       { --ink: #f2e6d6; --kicker: #d69a52; --scrim: rgba(14,8,4,0.65); }
.scene--jord      { --ink: #eef4ee; --kicker: #83e6cf; --scrim: rgba(2,6,5,0.7); }
.scene--jord .scene-copy { align-self: center; text-align: center; }
.scene--jord .lede { margin-left: auto; margin-right: auto; }

/* the closing invitation */
.descent-cta { margin-top: 2.4rem; }
.descent-cta .wp-block-button__link {
  font-family: "roca", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.82rem;
  padding: 0.9em 2.2em;
  border-radius: var(--border-radius, 3px);
  background: transparent;
  color: #9ff0da;
  border: 1px solid rgba(131, 230, 207, 0.5);
  transition: background 0.4s ease, color 0.4s ease;
}
.descent-cta .wp-block-button__link:hover {
  background: rgba(131, 230, 207, 0.12);
  color: #d6fff3;
}

/* --- scroll cue in the hero --------------------------------------------- */
.scroll-cue {
  display: block;
  margin: 3.5rem auto 0;
  width: 22px;
  height: 34px;
  border: 1px solid rgba(244, 237, 224, 0.5);
  border-radius: 12px;
  position: relative;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(244, 237, 224, 0.85);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(0);    opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* --- graceful fallback when WebGL is unavailable ------------------------- */
.no-webgl body { background: #0a0c14; }
.no-webgl .descent-scene { background-size: cover; background-position: center; }
.no-webgl .scene--dusk      { background: linear-gradient(180deg, #0d0f28 0%, #4a2a48 55%, #d1743f 100%); }
.no-webgl .scene--fjell     { background: linear-gradient(180deg, #15142a 0%, #2c2a44 60%, #0f0f1c 100%); }
.no-webgl .scene--tregrensa { background: linear-gradient(180deg, #1a1930 0%, #22301f 70%, #0a1109 100%); }
.no-webgl .scene--skodde    { background: linear-gradient(180deg, #cfd5da 0%, #aab3ba 60%, #7c8890 100%); }
.no-webgl .scene--skog      { background: linear-gradient(180deg, #123018 0%, #0a1f0e 60%, #050d06 100%); }
.no-webgl .scene--elv       { background: linear-gradient(180deg, #12261f 0%, #16343a 55%, #0a1418 100%); }
.no-webgl .scene--myr       { background: linear-gradient(180deg, #2a1c12 0%, #14100b 55%, #070605 100%); }
.no-webgl .scene--jord      { background: radial-gradient(120% 90% at 50% 20%, #123a30 0%, #0a1712 45%, #030605 100%); }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .scene-copy { opacity: 1; transform: none; transition: none; }
  .scroll-cue::after { animation: none; opacity: 1; }
}