:root {
  --page: #f1efe8;
  --surface: #e7e5dd;
  --ink: #162923;
  --text: #35483f;
  --muted: #59675f;
  --accent: #ea5b32;
  --line: #cdd1c7;
  --line-strong: #8c9b90;
  --night: 0;
  --sun-y: 0px;
  --moon-y: 160px;
  --px: 0px;
  --py: 0px;
  color-scheme: light;
}
:root[data-night="true"] {
  --page: #111e1c;
  --surface: #182825;
  --ink: #f2f0e7;
  --text: #d0d7cf;
  --muted: #a1b1a7;
  --line: #33473f;
  --line-strong: #6c8375;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  transition: background 1.5s, color 1.5s;
}
body > div {
  font-family: "DM Sans", sans-serif !important;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}
::selection {
  background: #eb6036;
  color: white;
}
h1,
h2,
h3 {
  font-family: "Barlow Condensed", Impact, sans-serif !important;
}
h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
h3 {
  font-weight: 600 !important;
}
.site-header {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.2%;
  gap: 28px;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
  transition: background 1.5s;
}
.wordmark {
  font-weight: 700;
  letter-spacing: -1.5px;
  font-size: 27px;
  white-space: nowrap;
}
.wordmark > span:first-child {
  color: var(--accent);
}
.logo-dot {
  font-size: 11px;
  vertical-align: top;
  letter-spacing: 0;
  margin-left: 3px;
}
.desktop-nav {
  display: flex;
  gap: 29px;
  font-size: 13px;
  font-weight: 500;
}
.desktop-nav a {
  position: relative;
}
.desktop-nav a:after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s;
}
.desktop-nav a:hover:after {
  width: 100%;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
}
.language {
  display: flex;
  gap: 10px;
}
.nav-ticket {
  background: var(--ink);
  color: var(--page);
  padding: 14px 20px;
  display: flex;
  gap: 26px;
  border-radius: 3px;
  font-weight: 600;
}
.hero {
  position: relative;
  min-height: 830px;
  height: calc(100svh - 94px);
  max-height: 1100px;
  isolation: isolate;
  overflow: hidden;
  color: #faf7ed;
  background: #78988e;
}
.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.sky-day,
.sky-night {
  position: absolute;
  inset: 0;
}
.sky-day {
  background: linear-gradient(
    180deg,
    #5f8988 0%,
    #9fb8a5 35%,
    #edc89e 66%,
    #566c67 100%
  );
}
.sky-night {
  background: linear-gradient(
    180deg,
    #07151f 0%,
    #152f3e 45%,
    #4d5861 75%,
    #152c33 100%
  );
  opacity: var(--night);
}
.horizon-glow {
  position: absolute;
  width: 85%;
  height: 65%;
  top: 5%;
  right: -20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffe4ac66, transparent 66%);
  opacity: calc(1 - var(--night));
}
.sun,
.moon {
  position: absolute;
  right: 22%;
  top: 15%;
  width: 105px;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
.sun {
  background: #fff2c8;
  box-shadow: 0 0 60px 20px #ffe8b84d, 0 0 160px 60px #ffc77d26;
  transform: translateY(var(--sun-y));
  opacity: calc(1 - var(--night));
}
.moon {
  width: 78px;
  background: radial-gradient(
    circle at 38% 35%,
    #d9e2dc 0%,
    #b2c7c7 65%,
    #869f9f
  );
  box-shadow: 0 0 45px #d5edf633;
  opacity: var(--night);
  transform: translateY(var(--moon-y));
}
.moon:after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(
      circle at 22% 30%,
      #60777833 0 8%,
      transparent 10%
    ),
    radial-gradient(circle at 68% 64%, #60777844 0 12%, transparent 14%);
}
.stars {
  position: absolute;
  inset: 0;
  opacity: var(--night);
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 5s infinite alternate;
}
.mountain-camera {
  position: absolute;
  inset: -5% -12% -7%;
  animation: mountain-drift 28s ease-in-out infinite alternate;
  transform-origin: 60% 80%;
}
.mountains {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  filter: brightness(calc(1 - var(--night) * 0.55))
    saturate(calc(0.85 - var(--night) * 0.2));
  transform: translate(var(--px), var(--py)) scale(1.025);
  transition: filter 0.1s;
  will-change: transform;
}
.mist {
  position: absolute;
  width: 150%;
  height: 30%;
  left: -25%;
  bottom: 4%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #e6eee029, transparent 67%);
  filter: blur(22px);
  animation: mist-drift 26s ease-in-out infinite alternate;
}
.mist-two {
  bottom: 28%;
  height: 18%;
  opacity: 0.6;
  animation-duration: 39s;
  animation-direction: alternate-reverse;
}
.snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
}
.scene-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      #09241e80 0%,
      #112a2026 50%,
      transparent 80%
    ),
    linear-gradient(0deg, #10231fef 0%, transparent 35%);
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-content {
  position: relative;
  padding: 76px 6.1% 130px;
  max-width: 1100px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  margin: 0 0 28px;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe5a9;
  box-shadow: 0 0 0 5px #ffe5a915;
  animation: live-pulse 3s infinite;
}
.hero h1 {
  font-size: clamp(80px, 8.8vw, 145px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.018em;
  margin: 0;
  text-shadow: 0 3px 30px #142c2220;
}
.hero h1 em {
  color: #ff8252;
  font-style: normal;
}
.hero-description {
  font-size: 18px;
  line-height: 1.6;
  margin: 26px 0 25px;
  color: #f1f2e7;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding: 18px 24px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.25s, background 0.25s;
}
.button-primary {
  background: #f77749;
  color: #14271e;
  box-shadow: 0 6px 30px #0c1d1820;
}
.button-primary:hover {
  background: #ff986f;
  transform: translateY(-3px);
}
.button span {
  font-size: 22px;
  line-height: 1;
}
.story-link {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.play-icon {
  display: grid;
  place-items: center;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  font-size: 10px;
  padding-left: 2px;
}
.hero-fine {
  font-size: 11px;
  margin: 19px 0 0;
  color: #d5e0d5;
}
.scene-coordinate {
  position: absolute;
  right: 5%;
  top: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #f6f4e4;
}
.crosshair {
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}
.scene-coordinate b {
  font-size: 10px;
  letter-spacing: 1.8px;
}
.scene-caption {
  position: absolute;
  right: 6%;
  bottom: 160px;
  border-left: 1px solid #e3e8dd6b;
  padding-left: 20px;
}
.scene-caption > span {
  font-size: 9px;
  letter-spacing: 2px;
}
.scene-caption p {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  margin: 14px 0;
}
.scene-caption .altitude {
  font-size: 9px;
  letter-spacing: 1px;
  color: #c5d6ce;
}
.hero-bottom {
  position: absolute;
  bottom: 27px;
  left: 6.1%;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.scroll-link {
  font-size: 9px;
  letter-spacing: 1.8px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.scroll-link > span {
  font-size: 20px;
  animation: scroll-hint 2s ease-in-out infinite;
}
.scene-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #10261c70;
  backdrop-filter: blur(16px);
  padding: 5px;
  border: 1px solid #eef3dc38;
  border-radius: 30px;
  color: #f0f3e7;
}
.scene-controls button {
  border: 0;
  background: none;
  color: inherit;
  min-height: 36px;
  min-width: 36px;
  font-size: 10px;
  border-radius: 25px;
  padding: 0 13px;
}
.scene-controls .auto-button {
  font-size: 9px;
  letter-spacing: 1px;
}
.auto-button[aria-pressed="true"] {
  background: #e9efdf;
  color: #21382d;
}
.theme-button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-icon {
  font-size: 23px;
  line-height: 1;
}
.control-divider {
  height: 16px;
  width: 1px;
  background: #ffffff30;
}
.scene-controls .motion-button {
  padding: 0 8px;
  font-size: 14px;
}
.film-strip {
  padding: 23px 4%;
  background: #dfe5d5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #c2cebc;
  color: #253b2e;
  overflow: hidden;
}
.film-strip span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  white-space: nowrap;
}
.film-strip i {
  font-size: 20px;
  font-style: normal;
  color: #658169;
}
/* The original editorial content, with shared theme colors and responsive layouts. */
main > section:not(.hero) {
  scroll-margin-top: 30px;
}
main > section:not(.hero) > p:first-child,
main > section:not(.hero) > div > p:first-child {
  font-size: 11px !important;
  letter-spacing: 2.3px !important;
}
main > section:not(.hero) h2 {
  font-size: clamp(40px, 4.7vw, 66px) !important;
  max-width: 800px;
}
.how-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
.how-section > div > div {
  border-top: 1px solid var(--line-strong) !important;
}
.how-section > div > div > div {
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 60px !important;
  color: var(--muted) !important;
  font-weight: 500;
}
.how-section h3 {
  font-size: 26px !important;
}
.how-section p {
  font-size: 15px;
}
.villain-section {
  overflow: hidden;
}
.villain-section > div > div:first-child > div {
  background: #d9d8bb !important;
  color: #26352a !important;
  transform: rotate(-3deg);
  padding: 22px !important;
  box-shadow: 12px 16px 0 #152b2310;
  transition: transform 0.5s;
}
.villain-section > div > div:first-child > div:hover {
  transform: rotate(0deg);
}
.villain-section > div > div:first-child > div > div:first-child {
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 65px !important;
  font-weight: 700;
  letter-spacing: 8px !important;
}
.villain-art {
  position: relative;
  margin: 14px 0;
  aspect-ratio: 4/4.4;
  overflow: hidden;
}
.villain-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s;
}
.villain-art:hover img {
  transform: scale(1.04);
}
.villain-art span {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #fff;
  background: #142b2470;
  padding: 4px 8px;
}
.villain-section dl dd {
  font-size: 14px;
}
.stories-section article {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  border: 0 !important;
  border-radius: 2px !important;
  justify-content: flex-end;
  padding: 24px !important;
  background: linear-gradient(180deg, #132d2730, #10251ff5),
    url(alpine-panorama.webp) center/auto 130%, #718a7c;
  transition: transform 0.4s, box-shadow 0.4s;
}
.stories-section article:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px #122c2420;
}
.stories-section article:nth-child(2) {
  background-position: 30% 50% !important;
}
.stories-section article:nth-child(3) {
  background-position: 70% 40% !important;
}
.stories-section article:nth-child(4) {
  background-position: 90% 50% !important;
}
.stories-section article:nth-child(5) {
  background-position: 10% 50% !important;
}
.stories-section article h3 {
  font-size: 32px !important;
  color: #f5f3e8;
}
.stories-section article p {
  color: #d0dbd0 !important;
  font-size: 14px !important;
}
.stories-section article > div {
  font-size: 9px !important;
  color: #ffa47e !important;
  letter-spacing: 1.5px !important;
}
.stories-section article:before {
  content: "↗";
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 23px;
  color: #e7eddf99;
}
.pricing-section > div > div > div {
  border-radius: 2px !important;
}
.pricing-section a {
  border-radius: 2px !important;
  transition: transform 0.2s;
}
.pricing-section a:hover {
  transform: translateY(-3px);
}
details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
summary::-webkit-details-marker {
  display: none;
}
details summary:after {
  content: "+";
  font-size: 25px;
  font-weight: 400;
  color: var(--accent);
}
details[open] summary:after {
  content: "−";
}
details p {
  font-size: 16px;
}
footer a:hover {
  color: var(--accent) !important;
}
body > div > section h2 {
  font-size: clamp(48px, 7vw, 94px) !important;
}
body > div > section a {
  border-radius: 2px !important;
}
.reveal-ready {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.7s, transform 0.7s;
}
.reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}
@keyframes mountain-drift {
  from {
    transform: translate3d(-0.4%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0.5%, 0.5%, 0) scale(1.045);
  }
}
@keyframes mist-drift {
  from {
    transform: translateX(-8%);
  }
  to {
    transform: translateX(9%);
  }
}
@keyframes twinkle {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
@keyframes live-pulse {
  50% {
    box-shadow: 0 0 0 8px #ffe5a906;
  }
}
@keyframes scroll-hint {
  50% {
    transform: translateY(5px);
  }
}
:root[data-paused="true"] *,
:root[data-paused="true"] *:before,
:root[data-paused="true"] *:after {
  animation-play-state: paused !important;
}
:root[data-reduced="true"] .mountain-camera,
:root[data-reduced="true"] .mist,
:root[data-reduced="true"] .star,
:root[data-reduced="true"] .live-dot,
:root[data-reduced="true"] .scroll-link > span {
  animation: none !important;
}
@media (min-width: 1700px) {
  .hero-content {
    padding-top: 100px;
  }
  .hero h1 {
    font-size: 160px;
  }
  .hero-description {
    font-size: 21px;
  }
  .scene-caption {
    bottom: 200px;
  }
}
@media (max-width: 1100px) {
  .desktop-nav {
    gap: 18px;
    font-size: 12px;
  }
  .nav-actions {
    gap: 18px;
  }
  .wordmark {
    font-size: 23px;
  }
  .site-header {
    padding: 0 4%;
    gap: 20px;
  }
  .hero {
    min-height: 800px;
  }
  .hero h1 {
    font-size: 110px;
  }
  .hero-content {
    padding-top: 85px;
  }
  .scene-caption {
    right: 5%;
    bottom: 160px;
  }
  .scene-caption p {
    font-size: 29px;
  }
  .scene-coordinate {
    top: 30px;
  }
  .film-strip {
    gap: 30px;
    justify-content: flex-start;
  }
  .film-strip span {
    font-size: 9px;
  }
  .hero-actions {
    gap: 20px;
  }
}
@media (max-width: 800px) {
  .desktop-nav {
    display: none;
  }
  .site-header {
    height: 78px;
  }
  .hero {
    height: calc(100svh - 78px);
    min-height: 820px;
  }
  .hero-content {
    padding: 76px 6% 150px;
  }
  .hero h1 {
    font-size: clamp(78px, 13vw, 112px);
  }
  .scene-caption {
    bottom: 132px;
  }
  .scene-caption p {
    font-size: 24px;
  }
  .scene-coordinate {
    top: 25px;
    right: 6%;
    font-size: 8px;
  }
  .hero-description {
    font-size: 17px;
  }
  .sun,
  .moon {
    right: 15%;
    top: 23%;
    width: 80px;
  }
  .mountain-camera {
    inset: 5% -45% -5%;
  }
  .hero-fine {
    font-size: 10px;
  }
  .film-strip {
    padding: 20px 6%;
    gap: 25px;
  }
  .film-strip span:nth-last-child(-n + 3),
  .film-strip i:last-of-type {
    display: none;
  }
  main > section:not(.hero),
  main > section:not(.hero) > div:first-child {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .villain-section > div {
    gap: 50px !important;
  }
  .villain-section > div > div:first-child {
    flex-basis: 100% !important;
  }
  .villain-section > div > div:first-child > div {
    max-width: 340px !important;
  }
  .how-section > div > div {
    flex-basis: calc(50% - 24px) !important;
  }
  .stories-section > div:last-child {
    gap: 30px !important;
  }
  .scene-controls {
    gap: 0;
  }
  .scene-controls button {
    padding: 0 10px;
  }
  .scroll-link {
    font-size: 8px;
    letter-spacing: 1px;
  }
}
@media (max-width: 520px) {
  .wordmark {
    font-size: 22px;
  }
  .nav-actions {
    gap: 15px;
  }
  .nav-ticket {
    padding: 11px 12px;
    font-size: 11px;
    gap: 12px;
  }
  .language {
    font-size: 11px;
    gap: 4px;
  }
  .site-header {
    height: 72px;
    gap: 12px;
  }
  .hero {
    min-height: 810px;
    height: calc(100svh - 72px);
  }
  .hero-content {
    padding-top: 70px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.7px;
    margin-bottom: 25px;
  }
  .hero h1 {
    font-size: clamp(64px, 17.8vw, 88px);
  }
  .hero-description {
    margin-top: 24px;
    font-size: 15px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .button {
    padding: 16px 20px;
    gap: 40px;
    font-size: 13px;
  }
  .hero-fine {
    font-size: 9px;
    margin-top: 16px;
  }
  .scene-coordinate {
    top: 18px;
    font-size: 7px;
    gap: 8px;
  }
  .scene-coordinate b {
    font-size: 7px;
  }
  .crosshair {
    font-size: 22px;
  }
  .scene-caption {
    bottom: 117px;
    right: 6%;
    padding-left: 12px;
  }
  .scene-caption p {
    font-size: 22px;
    margin: 8px 0;
  }
  .scene-caption > span {
    font-size: 7px;
  }
  .scene-caption .altitude {
    font-size: 7px;
  }
  .hero-bottom {
    bottom: 22px;
    left: 6%;
    right: 6%;
    align-items: flex-end;
  }
  .scroll-link {
    font-size: 0;
    gap: 0;
  }
  .scroll-link > span {
    font-size: 24px;
  }
  .sun,
  .moon {
    top: 20%;
    right: 12%;
    width: 60px;
  }
  .mountain-camera {
    inset: 18% -85% -4%;
  }
  .scene-shade {
    background: linear-gradient(90deg, #102b2488, transparent),
      linear-gradient(0deg, #10231ff2, transparent 45%);
  }
  .film-strip {
    justify-content: space-between;
    gap: 12px;
  }
  .film-strip span {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .film-strip i {
    font-size: 15px;
  }
  .film-strip span:nth-last-child(-n + 5),
  .film-strip i:nth-last-child(-n + 4) {
    display: none;
  }
  .how-section > div {
    gap: 30px 18px !important;
  }
  .how-section > div > div {
    flex-basis: 100% !important;
  }
  .how-section h3 {
    font-size: 24px !important;
  }
  main > section:not(.hero) {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
  main > section.villain-section,
  main > section.pricing-section,
  main > section#faq {
    padding: 0 !important;
  }
  main > section.villain-section > div,
  main > section.pricing-section > div,
  main > section#faq > div {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
  .stories-section article {
    min-height: 320px;
    flex-basis: 100% !important;
  }
  footer > div {
    padding: 30px 24px !important;
  }
  footer nav {
    gap: 16px !important;
  }
  body > div > section {
    padding: 80px 24px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-ready {
    opacity: 1;
    transform: none;
  }
  .snow {
    display: none;
  }
}

.hero[data-visible="false"] * {
  animation-play-state: paused !important;
}
@media (max-width: 360px) {
  .wordmark {
    font-size: 20px;
  }
  .nav-actions {
    gap: 10px;
  }
  .nav-ticket {
    font-size: 10px;
    gap: 8px;
    padding: 10px;
  }
  .language span {
    display: none;
  }
  .site-header {
    gap: 10px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .hero-description {
    font-size: 14px;
  }
}

.stories-section article h3 a:after {
  content: "";
  position: absolute;
  inset: 0;
}
.stories-section article:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

/* Three.js owns the scene once its first frame succeeds. */
.webgl-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.scene.is-webgl .webgl-scene {
  display: block;
}
.scene.is-webgl > .sky-day,
.scene.is-webgl > .sky-night,
.scene.is-webgl > .stars,
.scene.is-webgl > .sun,
.scene.is-webgl > .moon,
.scene.is-webgl > .horizon-glow,
.scene.is-webgl > .mountain-camera,
.scene.is-webgl > .mist {
  visibility: hidden;
  animation: none;
}
.scene.is-webgl .scene-shade,
.scene.is-webgl .grain {
  z-index: 1;
}

/* A second cinematic pass: a living scene, with restrained editorial motion. */
.hero-content {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -38px), 0);
}
.hero-content > * {
  animation: hero-arrive 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-content > h1 {
  animation-delay: 0.08s;
}
.hero-description {
  animation-delay: 0.16s;
}
.hero-actions {
  animation-delay: 0.24s;
}
.hero-fine {
  animation-delay: 0.3s;
}
.hero h1 em {
  display: inline-block;
  animation: title-breathe 7s ease-in-out infinite;
}
.scene-controls .weather-button {
  display: flex;
  align-items: center;
  gap: 7px;
}
.weather-button > span:first-child {
  font-size: 18px;
  transition: transform 0.5s;
}
.weather-button[aria-pressed="true"] > span:first-child {
  transform: rotate(90deg);
}
.weather-button[aria-pressed="true"] {
  background: #e9efdf22;
}
.scene-controls button:hover {
  background: #e9efdf25;
}
.scene-controls .auto-button[aria-pressed="true"]:hover {
  background: #fff;
}
.hero[data-storm="true"] .scene:not(.is-webgl) .mist {
  opacity: 1;
  background: radial-gradient(ellipse, #c7d8d955, transparent 67%);
}
.film-strip {
  padding: 22px 0;
  display: block;
}
.film-track {
  display: flex;
  width: max-content;
  animation: film-marquee 42s linear infinite;
}
.film-group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
}
.film-strip .film-group span,
.film-strip .film-group i {
  display: block !important;
}
.film-strip:hover .film-track {
  animation-play-state: paused;
}
.film-group i {
  animation: asterisk-spin 16s linear infinite;
}
.villain-section {
  position: relative;
  background-image: radial-gradient(
    ellipse at 15% 45%,
    #e78c4514,
    transparent 58%
  ) !important;
}
.villain-section .wanted-poster {
  position: relative;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg)) rotate(-3deg) !important;
  animation: poster-float 8s ease-in-out infinite;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.wanted-poster:before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--line-strong);
  clip-path: polygon(
    0 0,
    15% 0,
    15% 1%,
    1% 1%,
    1% 15%,
    0 15%,
    0 0,
    100% 0,
    100% 15%,
    99% 15%,
    99% 1%,
    85% 1%,
    85% 0,
    100% 0,
    100% 100%,
    85% 100%,
    85% 99%,
    99% 99%,
    99% 85%,
    100% 85%,
    100% 100%,
    0 100%,
    0 85%,
    1% 85%,
    1% 99%,
    15% 99%,
    15% 100%,
    0 100%
  );
  pointer-events: none;
}
.villain-art img {
  animation: portrait-drift 16s ease-in-out infinite alternate;
  transform-origin: 50% 45%;
}
.villain-art:after {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    #f7e4b522 49%,
    transparent 58%
  );
  animation: portrait-light 10s ease-in-out infinite;
  pointer-events: none;
}
.stories-section article.is-visible {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg)) translateY(var(--card-lift, 0px));
  transition: transform 0.25s ease-out, box-shadow 0.4s, opacity 0.7s;
  animation: story-landscape 24s ease-in-out infinite alternate;
  animation-delay: calc(var(--card-index, 0) * -3s);
}
.stories-section article:hover {
  --card-lift: -9px;
  box-shadow: 0 24px 36px #122c2428;
}
.stories-section article:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--light-x, 50%) var(--light-y, 20%),
    #f5efda20,
    transparent 65%
  );
  pointer-events: none;
}
.stories-section article:before {
  transition: transform 0.3s;
}
.stories-section article:hover:before {
  transform: translate(3px, -3px);
}
.how-section > div > div {
  position: relative;
}
.how-section > div > div:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 1.1s ease 0.2s;
}
.how-section > div > div.is-visible:before {
  width: 100%;
}
.global-motion {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: var(--page);
  color: var(--ink);
  font-size: 11px;
  box-shadow: 0 8px 28px #10231f1c;
}
.global-motion[hidden] {
  display: none;
}
.global-motion:hover {
  border-color: var(--accent);
}
[data-in-view="false"] *,
[data-in-view="false"]:before,
[data-in-view="false"]:after {
  animation-play-state: paused !important;
}
:root[data-paused="true"] .stories-section article,
:root[data-paused="true"] .wanted-poster {
  transition: none;
}
@keyframes hero-arrive {
  from {
    translate: 0 24px;
  }
  to {
    translate: 0 0;
  }
}
@keyframes title-breathe {
  50% {
    transform: translateX(3px);
    text-shadow: 0 0 35px #ff82521a;
  }
}
@keyframes film-marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes asterisk-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes poster-float {
  50% {
    translate: 0 -10px;
  }
}
@keyframes portrait-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07) translateY(-1%);
  }
}
@keyframes portrait-light {
  0%,
  20% {
    transform: translateX(-70%);
  }
  70%,
  100% {
    transform: translateX(70%);
  }
}
@keyframes story-landscape {
  from {
    background-size: auto 130%;
  }
  to {
    background-size: auto 148%;
  }
}
@media (max-width: 700px) {
  .scene-controls .weather-label {
    display: none;
  }
  .scene-controls .weather-button {
    padding: 0 9px;
  }
  .scene-controls {
    gap: 0;
  }
  .global-motion {
    bottom: 16px;
    right: 16px;
  }
  .film-group {
    gap: 28px;
    padding-right: 28px;
  }
  .hero-content {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content {
    transform: none;
  }
  .villain-section .wanted-poster {
    transform: rotate(-3deg) !important;
  }
  .stories-section article.is-visible {
    transform: none;
  }
  .film-track {
    animation: none;
  }
  .global-motion {
    display: none;
  }
}
.stories-section > div:first-of-type {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px !important;
}
.stories-section article {
  min-height: 370px;
}
@media (max-width: 1100px) {
  .stories-section > div:first-of-type {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .stories-section > div:first-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .stories-section > div:first-of-type {
    grid-template-columns: minmax(0, 1fr);
  }
  .stories-section article {
    min-height: 340px;
  }
}
/* Real source material gives the fictional world a human anchor. */
.hans-origin {
  max-width: 1240px;
  margin: auto;
  padding: 110px 32px !important;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 90px;
  border-bottom: 1px solid var(--line);
}
.origin-film {
  position: relative;
  max-width: 390px;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 3px;
  background: #583e29;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition: transform 0.3s ease-out;
  box-shadow: 14px 18px 0 var(--surface);
}
.origin-film > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  animation: portrait-drift 20s ease-in-out infinite alternate;
}
.origin-film:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #171f19b5, transparent 50%);
  pointer-events: none;
}
.origin-play {
  position: absolute;
  left: 24px;
  bottom: 54px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff7e7;
  font-size: 13px;
  font-weight: 600;
}
.origin-play > span:first-child {
  width: 48px;
  height: 48px;
  border: 1px solid #fff9e499;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff3d411;
  backdrop-filter: blur(8px);
  transition: background 0.25s, transform 0.25s;
}
.origin-play:hover > span:first-child {
  background: #ee784bdd;
  transform: scale(1.08);
}
.origin-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  color: #f6e9d7;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.origin-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 24px;
}
.origin-copy h2 {
  font-size: clamp(38px, 4.5vw, 64px) !important;
  line-height: 0.98;
  margin: 0 0 28px;
}
.origin-copy h2 em {
  color: var(--accent);
  font-style: normal;
}
.origin-copy > p:not(.origin-kicker):not(.origin-credit) {
  max-width: 510px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}
.origin-story {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--accent);
  padding: 10px 0;
  margin: 8px 0 14px;
}
.origin-story span {
  transition: transform 0.25s;
}
.origin-story:hover span {
  transform: translate(3px, -3px);
}
.origin-credit {
  max-width: 470px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.origin-credit a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.concept-note {
  max-width: 650px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 24px 0 0;
}
@media (max-width: 800px) {
  .hans-origin {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 75px 24px !important;
  }
  .origin-film {
    width: 100%;
    max-width: 390px;
    margin: auto;
  }
  .origin-copy h2 {
    font-size: clamp(38px, 7vw, 60px) !important;
  }
  .origin-copy > p:not(.origin-kicker):not(.origin-credit) {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .origin-film {
    transform: none;
  }
}

.hans-origin > .origin-film {
  padding: 0 !important;
}