@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display:swap
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-medium-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display:swap
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display:swap
}

:root {
  color-scheme: dark;
  --ink: #090909;
  --paper: #fff;
  --accent: #d3ae7f;
  --gutter: clamp(1.5rem,6.25vw,8rem);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --display: "Cormorant Garamond",Georgia,serif;
  --body: "Manrope",Arial,sans-serif;
  --chapter-scroll: 220svh;
  --shade: .60;
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  background: var(--ink);
  scroll-behavior:auto
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing:antialiased
}

a {
  color: inherit;
  text-decoration:none
}

button {
  font:inherit
}

button[hidden] {
  display:none
}

::selection {
  background: var(--accent);
  color:var(--ink)
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset:6px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border:0
}

/* One camera, shared by every chapter. No color wash over the entire frame. */
.scene-media {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ink);
  overflow:hidden
}

.scene-poster,.scene-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:58% center
}

.scene-video {
  opacity: 0;
  transition: opacity 1s var(--ease-out)
}

body.video-ready .scene-video {
  opacity:1
}

.journey-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index:30
}

.journey-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin:left
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.65rem var(--gutter);
  isolation:isolate
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,rgb(0 0 0 / .5),rgb(0 0 0 / .12) 74%,transparent);
  -webkit-mask-image: linear-gradient(#000 68%,transparent);
  mask-image:linear-gradient(#000 68%,transparent)
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height:44px
}

.brand-logo {
  display: block;
  width: 155px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter:grayscale(1) brightness(4)
}




/* Without JavaScript, every section remains a readable document in normal flow. */
.journey {
  position: relative;
  z-index:2
}

.chapter {
  position:relative
}

.chapter-stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding:9rem var(--gutter) 6rem
}

.text-protection {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(94vw,1200px);
  z-index: 1;
  pointer-events: none;
  background:linear-gradient(90deg,rgb(0 0 0 / var(--shade)) 0%,rgb(0 0 0 / var(--shade)) 46%,rgb(0 0 0 / .32) 73%,transparent 100%)
}

.scene-copy {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-top: 1.8rem;
  isolation:isolate
}

.scene-copy::before {
  content: "";
  position: absolute;
  inset: -3rem -4rem -3rem -3rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 40% 50%, rgb(0 0 0 / .055), transparent 73%);
}

.scene-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem,5.6vw,5.3rem);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -.045em;
  transform-origin: left center;
  text-wrap:balance
}

.scene-title--opening {
  font-size: clamp(4.4rem,6.9vw,6.5rem);
  line-height:.98
}

.title-line {
  display: block;
  overflow: clip;
  padding: .055em .12em .1em 0;
  margin-bottom:-.155em
}

.title-line>span {
  display: block;
  transform-origin:left bottom
}

.title-line--italic {
  color: var(--accent);
  font-style: italic;
  letter-spacing: -.047em;
  padding-right:.15em
}

.scene-description {
  margin: 2rem 0 0;
  max-width: 460px;
  font-size: clamp(1rem,1.24vw,1.125rem);
  line-height: 1.75;
  text-wrap:pretty
}

#apertura .scene-description {
  max-width:350px
}

.scene-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  max-width: 100%;
  margin-top: 1.8rem;
  min-height: 48px;
  padding: .5rem 0;
  border-bottom: 1px solid var(--accent);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--paper);
  transition: opacity .25s var(--ease-out)
}

.scene-button:hover {
  color:var(--accent)
}

.scene-button span {
  color: var(--accent);
  font-size:1.2rem
}

/* ScrollTrigger drives the child timelines. Only one fixed stage is accessible. */
.story-enhanced .chapter {
  height:var(--chapter-scroll)
}

.story-enhanced .journey::after {
  content: "";
  display: block;
  height:100svh
}

.story-enhanced .chapter-stage {
  position: fixed;
  inset: 0;
  min-height: 100svh;
  opacity: 0;
  visibility: hidden;
  pointer-events:none
}

.story-enhanced .chapter.is-current .chapter-stage {
  opacity: 1;
  visibility: visible;
  pointer-events:auto
}

.story-enhanced .chapter.is-current .scene-copy {
  will-change: auto
}

.story-enhanced .chapter.is-current .copy-content {
  will-change: auto
}

.load-status {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  height: 100dvh;
  background: #090909;
  transition: opacity 1s var(--ease-out);
}
.loader-logo {
  display: block;
  width: 170px;
  height: auto;
  margin-bottom: 2.5rem;
  filter: grayscale(1) brightness(4);
}
.load-status-label {
  width: min(260px, 100%);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .75rem;
  line-height:1.6
}

.load-track {
  width: min(260px, 100%);
  margin-top: .6rem;
  height: 1px;
  background: rgb(255 255 255 / .24);
  overflow:hidden
}

.load-track>span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .25s var(--ease-out)
}

.load-status.is-complete {
  opacity: 0;
  pointer-events:none
}

.retry-button {
  margin-top: .65rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: .25rem 0;
  color: var(--paper);
  cursor: pointer;
  font-size:.875rem
}

.scroll-cue {
  position: fixed;
  bottom: 2.9rem;
  left: var(--gutter);
  width: 16px;
  height: 42px;
  z-index: 10;
  opacity: 0;
  transition: opacity .65s var(--ease-out);
  pointer-events:none
}

.scroll-cue span {
  position: absolute;
  left: 6px;
  top: 0;
  height: 35px;
  width: 1px;
  background: rgb(255 255 255 / .8);
  transform-origin:top
}

.scroll-cue span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  transform:rotate(45deg)
}

body.video-ready:not(.has-scrolled) .scroll-cue {
  opacity:1
}

@media(min-width:1800px) {
  .scene-title--opening {
    font-size:6.5rem
  }
}

@media(max-width:1024px) {
  :root {
    --gutter: 5vw;
    --chapter-scroll:230svh
  }
  .scene-title {
    font-size:clamp(3.2rem,7vw,4.8rem)
  }
  .scene-title--opening {
    font-size:clamp(4.2rem,8vw,5.7rem)
  }
  .text-protection {
    width:97vw
  }
}

@media(max-width:600px) {
  :root {
    --gutter: 1.5rem;
    --chapter-scroll:240svh
  }
  .site-header {
    padding-top: 1.2rem;
    padding-bottom:1.2rem
  }
  .brand-logo {
    width:116px
  }
  .scene-poster,.scene-video {
    object-position:59% center
  }
  .chapter-stage {
    padding-top: 7rem;
    padding-bottom:5rem
  }
  .scene-copy {
    max-width: 100%;
    margin-top:0
  }
  .scene-title {
    font-size: clamp(2.6rem,10.4vw,3.9rem);
    line-height:1.04
  }
  .scene-title--opening {
    font-size: clamp(3.25rem,12.5vw,4.8rem);
    line-height:1.02
  }
  .scene-description {
    max-width: 100%;
    margin-top: 1.6rem;
    font-size: 1rem;
    line-height:1.65
  }
  #apertura .scene-description {
    max-width:290px
  }
  .scene-button {
    margin-top:1.3rem
  }
  .text-protection {
    width: 100%;
    background:linear-gradient(90deg,rgb(0 0 0 / var(--shade)),rgb(0 0 0 / var(--shade)) 58%,rgb(0 0 0 / .38) 87%,transparent)
  }
  .scene-copy::before {
    inset:-3rem -.5rem -3rem -1.5rem
  }
  .scroll-cue {
    bottom:2rem
  }
}

@media(max-height:650px) {
  .site-header {
    padding-top: .65rem;
    padding-bottom:.65rem
  }
  .chapter-stage {
    padding-top: 5.8rem;
    padding-bottom:3.5rem
  }
  .scene-copy {
    margin-top:0
  }
  .scene-title {
    font-size:2.7rem
  }
  .scene-title--opening {
    font-size:3.6rem
  }
  .scene-description {
    margin-top: 1rem;
    line-height:1.5
  }
  .scene-button {
    margin-top:1rem
  }
  .scroll-cue {
    bottom:1rem
  }
}

/* If a zoomed or short viewport cannot fit the text, retain natural page flow. */
.reading-flow .chapter-stage {
  padding-top: 8rem;
  padding-bottom: 5rem;
  min-height:110svh
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation: none!important;
    transition:none!important
  }
  .scroll-cue {
    display:none
  }
}

/* Only composited transforms and opacity change while scrolling. */
.scene-video, .scene-copy, .copy-content { transform: translateZ(0); }
body.is-loading { overflow: hidden; touch-action: none; }
body.is-animating .chapter.is-current .scene-copy,
body.is-animating .chapter.is-current .copy-content { will-change: transform, opacity; }
.scene-video.is-seeking { will-change: transform, opacity; }
.load-status[hidden] { display: none; }