/* Variant "Fusão": the scroll-driven hero of Luz, the gold thread of Corpo,
   and photographs that stay fixed behind the page while the words pass.
   Loaded after corpo.css, which supplies the thread, the index and the callouts. */

/* ---------- Where the thread runs ----------
   Outside the content column, in the page margin, so it passes clear of the
   logo. The words keep a small indent from it. */
.theme-fusao {
  --gutter: 1.5rem;
  --thread-x: -0.5rem;
}
@media (min-width: 1024px) {
  .theme-fusao {
    --gutter: 2rem;
    --thread-x: -1.25rem;
  }
}

/* ---------- The stage ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--marble);
  pointer-events: none;
}
#page,
.theme-fusao footer {
  position: relative;
  z-index: 1;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}
.scene:first-child {
  opacity: 1;
  visibility: visible;
}
.scene img,
.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The soft copy is a small pre-blurred photograph: "blur" is a cross-fade */
.scene-soft {
  opacity: 1;
  will-change: opacity;
}
.scene:first-child .scene-soft {
  opacity: 0;
}
.scene canvas {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.scene canvas.is-ready {
  opacity: 1;
}

/* The arrival picture is lifted so the sign sits clear of the hero's words,
   and melts into the marble below it. */
.scene-box {
  position: absolute;
  top: -12%;
  right: 0;
  bottom: 12%;
  left: 0;
}
.scene-arrival::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--marble) 0%, var(--marble) 12%, rgb(245 243 240 / 0) 34%);
}
@media (min-width: 1024px) and (max-height: 820px) {
  .scene-box {
    top: -20%;
    bottom: 20%;
  }
  .scene-arrival::after {
    background: linear-gradient(to top, var(--marble) 0%, var(--marble) 20%, rgb(245 243 240 / 0) 40%);
  }
}
@media (max-width: 1023px) {
  .scene-box {
    top: 0;
    bottom: auto;
    height: min(75vw, 58svh);
  }
  .scene-box img {
    object-position: 56% 50%;
  }
  .scene-arrival::after {
    background: linear-gradient(to bottom, rgb(245 243 240 / 0) calc(min(75vw, 58svh) * 0.6), var(--marble) min(75vw, 58svh));
  }
}

.stage-veil,
.stage-shade,
.stage-light {
  position: absolute;
  inset: 0;
  z-index: 5; /* above the photographs, which take z-index 1 and 2 while they cross */
}
.stage-veil {
  background-color: rgb(245 243 240 / 0);
}
/* Shadow gathers at the edges in the lamp-lit scenes */
.stage-shade {
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgb(20 10 11 / 0) 35%, rgb(20 10 11 / 0.6) 100%);
  will-change: opacity;
}
/* A soft pool of warm light that drifts across when a scene changes */
.stage-light {
  inset: -30% -30%;
  opacity: 0;
  background: radial-gradient(closest-side, rgb(255 241 214 / 0.5), rgb(255 241 214 / 0) 70%);
  will-change: transform, opacity;
}

/* ---------- Tones: what colour the words take over each scene ---------- */
.tone-light {
  color: var(--ink);
}
.tone-dark {
  color: #f1ebe1;
}
.tone-dark .node:not(.is-lit),
.thread-live .tone-dark .node:not(.is-lit) {
  background: var(--ink);
}
.thread-live .hero .node:not(.is-lit) {
  background: var(--marble);
}

/* ---------- Hero ---------- */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to top, var(--marble) 0%, var(--marble) 12%, rgb(245 243 240 / 0.92) 30%, rgb(245 243 240 / 0.5) 44%, rgb(245 243 240 / 0) 56%),
    linear-gradient(to bottom, rgb(245 243 240 / 0.6) 0%, rgb(245 243 240 / 0) 16%);
}
.hero-copy {
  padding-top: 10rem;
}
.theme-fusao .hero-index ol {
  border-left-color: rgb(122 92 30 / 0.5);
}
.theme-fusao .hero-index a::before {
  background: var(--gold);
}
.theme-fusao .hero-index em {
  color: var(--ink);
}
.theme-fusao .hero-index span {
  color: rgb(20 10 11 / 0.72);
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-copy h1 {
    font-size: clamp(2.1rem, 3.4vw, 3rem);
  }
  .hero-copy {
    padding-bottom: 2.25rem;
  }
  .hero-index a {
    min-height: 2.4rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}
@media (max-width: 1023px) {
  .hero-veil {
    background: linear-gradient(to bottom, rgb(245 243 240 / 0.7) 0%, rgb(245 243 240 / 0) 5.5rem);
  }
  .hero-copy {
    padding-top: calc(min(75vw, 58svh) - 3.5rem);
  }
}

/* ---------- The difference: a photograph for each line (desktop) ---------- */
.diff-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.06);
  transition:
    opacity 1s var(--ease-calm),
    filter 1.1s var(--ease-calm),
    transform 1.6s var(--ease-calm);
}
.diff-photo.is-on {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
/* the line being read is the clearest one */
@media (min-width: 1024px) {
  .diff-live .tick-item {
    transition: opacity 0.7s var(--ease-calm);
  }
  .diff-live .tick-item:not(.is-current) {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diff-photo {
    filter: none;
    transform: none;
    transition: opacity 0.3s ease;
  }
}

/* ---------- The index over the lamp-lit room ---------- */
.tone-dark .index,
.tone-dark .index-row {
  border-color: rgb(241 235 225 / 0.2);
}
.tone-dark .index-part {
  color: var(--gold-soft);
}
.tone-dark .index-line {
  color: rgb(241 235 225 / 0.85);
}
.tone-dark .index-line strong {
  color: #fff;
}

/* ---------- The environment: words pass, photographs stay ---------- */
.word-scene {
  display: flex;
  min-height: 92svh;
  align-items: center;
  padding: 5rem 0;
}
.word-lead {
  min-height: 100svh;
}
.word-close {
  min-height: 80svh;
}
.word {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9.5vw, 8.5rem);
  line-height: 0.98;
  color: #fff;
  text-shadow:
    0 2px 40px rgb(20 10 11 / 0.5),
    0 1px 6px rgb(20 10 11 / 0.25);
}
#space h2 {
  color: #fff;
  text-shadow: 0 2px 40px rgb(20 10 11 / 0.4);
}

/* ---------- Closing ---------- */
.theme-fusao .closing h2 {
  text-shadow: 0 2px 40px rgb(20 10 11 / 0.5);
}

/* The steps read over a photograph now, so they get a little more room */
.theme-fusao #experience .step h3 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}