:root {
  --black: #020609;
  --night: #041018;
  --deep: #061722;

  --white: #edf7f8;
  --text: #d5e1e4;
  --muted: #899ba0;

  --cyan: #7fdcf0;
  --cyan-bright: #b7f3ff;
  --cyan-dark: #176177;

  --line: rgba(183, 243, 255, 0.14);
  --glass: rgba(5, 22, 31, 0.82);

  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(23, 97, 119, 0.16),
      transparent 26%
    ),
    var(--black);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

body.scene-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

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

.section {
  position: relative;
  padding: 90px 20px;
  border-top: 1px solid var(--line);
}

.section-marker {
  margin-bottom: 40px;
  color: #5e747b;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 920px;
}

.section-heading.centered {
  margin: 0 auto 60px;
  text-align: center;
}

.section-heading h2,
.awakening h2,
.author h2,
.books h2,
.coming h2,
.shop h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.section-intro {
  max-width: 690px;
  margin: 25px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* HEADER */

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 70px;
  padding: 12px 18px;

  background:
    linear-gradient(
      to bottom,
      rgba(2, 6, 9, 0.97),
      rgba(2, 6, 9, 0.65)
    );

  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}

.brand-main {
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.24em;
}

.brand-sub {
  margin-top: 4px;
  color: var(--cyan);
  font-size: 9px;
  letter-spacing: 0.28em;
}

.menu-toggle {
  position: relative;
  z-index: 102;

  display: flex;
  width: 42px;
  height: 42px;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 0;

  background: rgba(5, 23, 32, 0.86);
  border: 1px solid rgba(127, 220, 240, 0.32);
  border-radius: 8px;

  cursor: pointer;
}

.menu-toggle span {
  width: 20px;
  height: 1px;
  background: var(--white);
  transition: 0.25s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  position: fixed;
  z-index: 101;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;
  padding: 90px 24px 40px;

  background: rgba(2, 8, 12, 0.985);
  backdrop-filter: blur(20px);

  transform: translateY(-105%);
  transition: transform 0.36s ease;
}

.site-nav.open {
  transform: translateY(0);
}

.site-nav a {
  width: min(100%, 360px);
  padding: 16px 18px;

  background:
    linear-gradient(
      180deg,
      rgba(17, 59, 73, 0.34),
      rgba(5, 20, 28, 0.5)
    );

  border: 1px solid rgba(127, 220, 240, 0.2);
  border-radius: 8px;

  color: #dcebee;

  font-size: 12px;
  letter-spacing: 0.17em;
  text-align: center;
  text-transform: uppercase;
}

.site-nav a:hover {
  border-color: rgba(127, 220, 240, 0.7);
  background: rgba(20, 86, 105, 0.35);
}

.site-nav .nav-amazon {
  margin-top: 16px;
  border-color: rgba(183, 243, 255, 0.58);
  color: var(--cyan-bright);
}

/* BUTTONS */

.ui-button {
  display: inline-flex;
  min-height: 52px;

  align-items: center;
  justify-content: center;

  padding: 0 25px;

  border-radius: 7px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-align: center;
  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.ui-button:hover {
  transform: translateY(-2px);
}

.primary-button {
  background:
    linear-gradient(
      180deg,
      #c7f6ff,
      #86ddec
    );

  border: 1px solid #d8faff;
  color: #031016;

  box-shadow:
    0 0 25px rgba(92, 211, 236, 0.16);
}

.secondary-button {
  background: rgba(11, 44, 57, 0.24);
  border: 1px solid rgba(127, 220, 240, 0.36);
  color: var(--white);
}

.secondary-button:hover {
  border-color: var(--cyan);
}

/* HERO */

.hero {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 50px;

  padding:
    105px
    20px
    80px;

  overflow: hidden;
  border-top: 0;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero-glow-one {
  width: 380px;
  height: 380px;

  top: 15%;
  left: -240px;

  background: rgba(28, 161, 191, 0.22);
}

.hero-glow-two {
  width: 320px;
  height: 320px;

  bottom: 5%;
  right: -220px;

  background: rgba(72, 150, 165, 0.12);
}

.hero-cover {
  position: relative;
  z-index: 2;

  width: min(78vw, 315px);
  margin: 0 auto;
}

.hero-cover img {
  position: relative;
  z-index: 2;

  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 4px;

  box-shadow:
    0 30px 70px rgba(0,0,0,0.72);
}

.cover-halo {
  position: absolute;
  inset: 16% 0 12%;

  background:
    radial-gradient(
      circle,
      rgba(89, 213, 238, 0.36),
      transparent 66%
    );

  filter: blur(35px);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 760px;
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      52px,
      15vw,
      104px
    );

  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.hero h1 span {
  display: block;
  color: var(--cyan-bright);
  font-style: italic;
}

.hero-lead {
  max-width: 650px;
  margin: 28px 0 0;

  color: var(--white);

  font-family: var(--serif);

  font-size:
    clamp(
      22px,
      6vw,
      31px
    );

  line-height: 1.25;
}

.hero-body {
  max-width: 580px;
  margin: 20px 0 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.8;
}

.hero-actions {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

/* STORY */

.story {
  background:
    linear-gradient(
      180deg,
      #040b10,
      #06151d
    );
}

.story-layout {
  display: grid;
  gap: 55px;
  margin-top: 55px;
}

.story-copy p {
  margin: 0 0 24px;

  color: #aebdc1;

  font-size: 16px;
  line-height: 1.9;
}

.story-opening::first-letter {
  float: left;

  margin:
    11px
    9px
    0
    0;

  color: var(--cyan);

  font-family: var(--serif);
  font-size: 72px;
  line-height: 0.65;
}

.story-quote {
  margin: 0;

  padding:
    15px
    0
    15px
    27px;

  border-left: 1px solid var(--cyan);
}

.quote-mark {
  color: var(--cyan);

  font-family: var(--serif);
  font-size: 72px;
  line-height: 0.5;
}

.story-quote p {
  margin: 14px 0 0;

  color: #edf6f7;

  font-family: var(--serif);

  font-size:
    clamp(
      24px,
      7vw,
      40px
    );

  font-style: italic;
  line-height: 1.3;
}

/* AWAKENING */

.awakening {
  min-height: 650px;

  display: grid;
  place-items: center;

  overflow: hidden;
  text-align: center;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(71, 196, 222, 0.18),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #031017,
      #050b0e
    );
}

.awakening-content {
  max-width: 860px;
}

.awakening-content p {
  max-width: 700px;
  margin: 25px auto 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.85;
}

.awakening-content strong {
  display: block;
  max-width: 650px;

  margin: 35px auto 0;

  color: var(--cyan-bright);

  font-family: var(--serif);

  font-size:
    clamp(
      23px,
      6vw,
      35px
    );

  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
}

.pulse-line {
  position: absolute;
  z-index: 0;

  top: 50%;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(127,220,240,0.85),
      rgba(183,243,255,0.95),
      rgba(127,220,240,0.85),
      transparent
    );

  box-shadow:
    0 0 20px rgba(127,220,240,0.38);

  opacity: 0.36;
}

/* VISUAL JOURNEY */

.journey {
  background: #02070a;
}

.journey-list {
  display: grid;
  gap: 75px;

  max-width: 1100px;
  margin: 0 auto;
}

.journey-card {
  margin: 0;
}

.journey-image {
  position: relative;

  display: block;
  width: 100%;

  padding: 0;

  overflow: hidden;

  background: #000;

  border: 1px solid rgba(127,220,240,0.18);
  border-radius: 8px;

  cursor: pointer;
  appearance: none;
}

.journey-image img {
  aspect-ratio: 2 / 3;
  object-fit: cover;

  transition:
    transform 0.55s ease,
    filter 0.35s ease;
}

.journey-image:hover img {
  transform: scale(1.02);
  filter: brightness(1.08);
}

.image-play {
  position: absolute;

  right: 13px;
  bottom: 13px;

  padding:
    9px
    11px;

  background: rgba(1, 9, 13, 0.78);

  border:
    1px solid
    rgba(183,243,255,0.34);

  border-radius: 5px;

  color: var(--white);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.journey-copy {
  padding:
    20px
    3px
    0;
}

.stage-number {
  color: var(--cyan);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.journey-copy h3 {
  margin:
    10px
    0
    10px;

  font-family: var(--serif);

  font-size:
    clamp(
      27px,
      7vw,
      39px
    );

  font-weight: 400;
  line-height: 1.15;
}

.journey-copy p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.8;
}

/* AUTHOR */

.author {
  display: grid;
  gap: 45px;

  background:
    linear-gradient(
      180deg,
      #041018,
      #07161d
    );
}

.author-photo {
  max-width: 430px;
  margin: 0 auto;
}

.author-photo img {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
}

.author-copy p {
  color: #aebdc1;

  font-size: 15px;
  line-height: 1.9;
}

.author-copy em {
  color: var(--white);
}

.author-copy .ui-button {
  margin-top: 18px;
}

/* BOOKS */

.books {
  background: #03090d;
}

.book-feature {
  display: grid;
  gap: 45px;

  max-width: 1050px;
  margin: 0 auto;
}

.book-feature-cover {
  width: min(80vw, 330px);
  margin: 0 auto;
}

.book-feature-cover img {
  border-radius: 5px;

  box-shadow:
    0 30px 65px rgba(0,0,0,0.62);
}

.book-feature-copy {
  align-self: center;
}

.book-feature-copy h2 {
  font-size:
    clamp(
      47px,
      11vw,
      76px
    );
}

.book-subtitle {
  color: var(--cyan);

  font-family: var(--serif);
  font-size: 21px;
}

.book-feature-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.85;
}

.book-feature-copy .ui-button {
  margin-top: 15px;
}

/* COMING SOON */

.coming {
  background:
    linear-gradient(
      180deg,
      #07151c,
      #02070a
    );
}

.coming-grid {
  display: grid;
  gap: 18px;

  max-width: 1100px;
  margin: 0 auto;
}

.coming-card {
  min-height: 300px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    34px
    28px;

  background:
    linear-gradient(
      150deg,
      rgba(16, 54, 68, 0.34),
      rgba(3, 12, 17, 0.54)
    );

  border:
    1px solid
    rgba(127,220,240,0.17);

  border-radius: 8px;
}

.status {
  align-self: flex-start;

  padding:
    8px
    10px;

  background:
    rgba(40, 145, 170, 0.15);

  border:
    1px solid
    rgba(127,220,240,0.25);

  border-radius: 4px;

  color: var(--cyan);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.coming-card h3 {
  margin:
    26px
    0
    15px;

  color: var(--white);

  font-family: var(--serif);

  font-size:
    clamp(
      31px,
      8vw,
      45px
    );

  font-weight: 400;
}

.coming-card p {
  margin: 0;

  color: var(--muted);
  line-height: 1.8;
}

.coming-label {
  margin-top: 30px;

  color: #6f858b;

  font-size: 8px;
  letter-spacing: 0.18em;
}

/* SHOP */

.shop {
  background: #020608;
}

.merch-grid {
  display: grid;
  gap: 25px;

  max-width: 1000px;
  margin: 0 auto;
}

.merch-card {
  margin: 0;

  overflow: hidden;

  background:
    rgba(7, 24, 32, 0.42);

  border:
    1px solid
    rgba(127,220,240,0.15);

  border-radius: 8px;
}

.merch-card img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.merch-card figcaption {
  display: flex;
  flex-direction: column;

  gap: 7px;

  padding:
    17px
    18px;
}

.merch-card figcaption span {
  color: var(--cyan);

  font-size: 8px;
  letter-spacing: 0.18em;
}

.merch-card figcaption strong {
  color: var(--white);

  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

.shop-coming {
  display: flex;

  max-width: 560px;

  align-items: center;

  gap: 16px;

  margin:
    45px
    auto
    0;

  padding:
    18px
    20px;

  background:
    rgba(14, 55, 69, 0.2);

  border:
    1px solid
    rgba(127,220,240,0.23);

  border-radius: 8px;
}

.shop-coming small {
  display: block;
  margin-bottom: 5px;

  color: #73868b;

  font-size: 8px;
  letter-spacing: 0.18em;
}

.shop-coming strong {
  color: var(--white);

  font-size: 11px;
  letter-spacing: 0.13em;
}

.shop-pulse {
  width: 11px;
  height: 11px;

  flex-shrink: 0;

  background: var(--cyan);

  border-radius: 50%;

  box-shadow:
    0 0 18px rgba(127,220,240,0.7);

  animation:
    pulseGlow
    1.7s
    infinite;
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
  }
}

/* FOOTER */

.site-footer {
  display: grid;
  gap: 30px;

  padding:
    55px
    20px;

  background: #010405;

  border-top:
    1px solid
    var(--line);

  color: #62757a;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-brand strong {
  color: var(--white);

  font-size: 13px;
  letter-spacing: 0.2em;
}

.footer-brand span {
  color: var(--cyan);

  font-size: 9px;
  letter-spacing: 0.2em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;

  gap:
    13px
    20px;
}

.footer-links a {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;

  font-size: 10px;
  line-height: 1.6;
}

/* FULLSCREEN VIEWER */

.scene-viewer {
  position: fixed;
  z-index: 1000;
  inset: 0;

  display: none;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.scene-viewer.open {
  display: block;
}

.scene-backdrop {
  position: fixed;
  inset: 0;

  background:
    rgba(0, 4, 7, 0.97);

  backdrop-filter: blur(14px);
}

.scene-shell {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      #02070a,
      #061119
    );
}

.scene-topbar {
  position: sticky;
  z-index: 5;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 62px;

  padding:
    10px
    15px;

  background:
    rgba(1, 6, 9, 0.93);

  border-bottom:
    1px solid
    var(--line);

  backdrop-filter: blur(12px);
}

.scene-brand {
  color: var(--cyan);

  font-size: 9px;
  letter-spacing: 0.17em;
}

.scene-close {
  width: 42px;
  height: 42px;

  padding: 0;

  background:
    rgba(12, 51, 64, 0.3);

  border:
    1px solid
    rgba(127,220,240,0.28);

  border-radius: 8px;

  color: var(--white);

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}

.scene-media {
  position: relative;

  display: flex;

  min-height:
    min(
      68vh,
      760px
    );

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #000;
}

.scene-media img {
  width: 100%;
  height: 100%;

  max-height:
    min(
      68vh,
      760px
    );

  object-fit: contain;
}

.scene-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;

  width: 44px;
  height: 60px;

  padding: 0;

  background:
    rgba(2, 9, 13, 0.55);

  border:
    1px solid
    rgba(127,220,240,0.22);

  color: var(--white);

  font-size: 42px;
  line-height: 1;

  cursor: pointer;

  transform: translateY(-50%);
}

.scene-prev {
  left: 7px;
}

.scene-next {
  right: 7px;
}

.scene-info {
  padding:
    25px
    20px;
}

.scene-stage {
  color: var(--cyan);

  font-size: 9px;
  letter-spacing: 0.2em;
}

.scene-info h2 {
  margin:
    10px
    0
    12px;

  color: var(--white);

  font-family: var(--serif);

  font-size:
    clamp(
      30px,
      8vw,
      48px
    );

  font-weight: 400;
  line-height: 1.1;
}

.scene-info p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.8;
}

.scene-audio {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 23px;

  padding:
    12px
    13px;

  background:
    rgba(11, 42, 54, 0.34);

  border:
    1px solid
    rgba(127,220,240,0.17);

  border-radius: 7px;

  color: #b9cbcf;

  font-size: 9px;
  letter-spacing: 0.12em;
}

.audio-dot {
  width: 8px;
  height: 8px;

  flex-shrink: 0;

  background: var(--cyan);

  border-radius: 50%;

  box-shadow:
    0
    0
    12px
    rgba(127,220,240,0.8);
}

.scene-audio button {
  margin-left: auto;

  padding:
    7px
    9px;

  background: transparent;

  border:
    1px solid
    rgba(127,220,240,0.28);

  border-radius: 5px;

  color: var(--cyan);

  font-size: 8px;
  letter-spacing: 0.12em;

  cursor: pointer;
}

.scene-footer {
  display: grid;

  grid-template-columns:
    0.7fr
    1.3fr;

  gap: 9px;

  margin-top: auto;

  padding:
    14px
    15px
    calc(
      14px
      + env(safe-area-inset-bottom)
    );

  background:
    #02070a;

  border-top:
    1px solid
    var(--line);
}

.scene-footer-button {
  min-height: 49px;

  padding:
    0
    13px;

  background:
    linear-gradient(
      180deg,
      rgba(18, 65, 80, 0.34),
      rgba(6, 24, 32, 0.42)
    );

  border:
    1px solid
    rgba(127,220,240,0.25);

  border-radius: 7px;

  color: var(--white);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;

  cursor: pointer;
}

/* REVEAL */

.reveal {
  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* TABLET / DESKTOP */

@media (min-width: 760px) {

  .section {
    padding:
      120px
      7vw;
  }

  .hero {
    display: grid;

    grid-template-columns:
      0.75fr
      1.25fr;

    align-items: center;

    gap: 7vw;

    padding:
      120px
      8vw
      80px;
  }

  .hero-cover {
    width: min(31vw, 390px);
    margin: 0;

    grid-column: 2;
    grid-row: 1;
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .story-layout {
    grid-template-columns:
      1.1fr
      0.9fr;

    gap: 8vw;
  }

  .journey-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      75px
      38px;
  }

  .journey-card:last-child {
    grid-column:
      1
      / -1;

    width: min(520px, 100%);
    justify-self: center;
  }

  .author {
    grid-template-columns:
      0.75fr
      1.25fr;

    align-items: center;

    gap: 7vw;
  }

  .author .section-marker {
    grid-column:
      1
      / -1;
  }

  .book-feature {
    grid-template-columns:
      0.7fr
      1.3fr;

    align-items: center;

    gap: 7vw;
  }

  .coming-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .merch-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .site-footer {
    grid-template-columns:
      1fr
      auto;

    align-items: end;

    padding:
      55px
      7vw;
  }

  .site-footer p {
    grid-column:
      1
      / -1;
  }

  .scene-shell {
    width: min(860px, 92vw);
    min-height: 100vh;
    margin: 0 auto;

    border-left:
      1px solid
      var(--line);

    border-right:
      1px solid
      var(--line);
  }
}

@media (min-width: 1000px) {

  .menu-toggle {
    display: none;
  }

  .site-header {
    padding:
      14px
      5vw;
  }

  .site-nav {
    position: static;
    inset: auto;

    width: auto;

    flex-direction: row;
    gap: 5px;

    padding: 0;

    background: transparent;
    backdrop-filter: none;

    transform: none;
  }

  .site-nav a {
    width: auto;

    padding:
      11px
      10px;

    background: transparent;
    border: 0;

    font-size: 9px;
  }

  .site-nav .nav-amazon {
    margin:
      0
      0
      0
      10px;

    border:
      1px solid
      rgba(127,220,240,0.36);
  }
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.01ms
      !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================
   MOBILE MENU SAFE-AREA + SOLID BUTTON FIX
========================================================== */

@media (max-width: 999px) {

  .site-header {
    padding-top: calc(12px + env(safe-area-inset-top));
    min-height: calc(70px + env(safe-area-inset-top));

    background: #020609;
  }

  .site-nav {
    padding-top: calc(100px + env(safe-area-inset-top));

    background: #02080c;
    backdrop-filter: none;

    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav a {
    background: #0a1b23;

    border: 1px solid rgba(127, 220, 240, 0.28);

    color: #edf7f8;

    opacity: 1;

    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.35);
  }

  .site-nav a:hover,
  .site-nav a:focus {
    background: #0d2630;
  }

  .site-nav .nav-amazon {
    background: #10303b;
  }

  .menu-toggle {
    background: #07151c;

    border: 1px solid rgba(127, 220, 240, 0.45);

    opacity: 1;
  }
}
/* ==========================================================
   MOBILE NAV POSITION CORRECTION
========================================================== */

@media (max-width: 999px) {

  .site-nav {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    height: 100dvh;
    max-height: 100dvh;

    justify-content: flex-start;

    padding-top: calc(130px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-left: 14px;
    padding-right: 14px;

    overflow-y: auto;
    overflow-x: hidden;

    background: #02080c;
  }

  .site-nav a {
    flex: 0 0 auto;

    width: 100%;
    min-height: 52px;

    padding: 14px 12px;

    background: #091a22;

    border: 1px solid rgba(127, 220, 240, 0.30);

    color: #edf7f8;

    opacity: 1;
  }

  .site-nav a:first-child {
    margin-top: 8px;
  }

  .site-nav .nav-amazon {
    margin-top: 8px;
    margin-bottom: 20px;

    background: #0d2833;
  }

  .menu-toggle {
    z-index: 110;
  }
}
/* ==========================================================
   THEATER
========================================================== */

.theater {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(35, 119, 145, 0.14),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #02070a,
      #061219
    );
}

.theater-grid {
  width: 100%;
  max-width: 1120px;

  display: grid;
  grid-template-columns: 1fr;

  gap: 28px;

  margin: 0 auto;
}

.theater-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(12, 44, 56, 0.38),
      rgba(3, 13, 18, 0.82)
    );

  border:
    1px solid
    rgba(127, 220, 240, 0.18);

  border-radius: 10px;

  box-shadow:
    0 20px 45px
    rgba(0, 0, 0, 0.28);
}

.theater-media {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #000;
}

.theater-media img {
  display: block;

  width: 100%;
  height: auto;

  max-height: 720px;

  object-fit: contain;

  background: #000;
}

.theater-video {
  display: flex;

  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at center,
      #071821,
      #000
    );
}

.theater-video video {
  display: block;

  width: 100%;
  height: auto;

  max-height: 720px;

  background: #000;

  object-fit: contain;
}

.theater-info {
  padding:
    22px
    22px
    26px;
}

.theater-info span {
  display: block;

  margin-bottom: 10px;

  color: var(--cyan);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.theater-info h3 {
  margin:
    0
    0
    12px;

  color: var(--white);

  font-family: var(--serif);

  font-size:
    clamp(
      28px,
      5vw,
      42px
    );

  font-weight: 400;
  line-height: 1.1;
}

.theater-info p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.8;
}

.theater-note {
  width: min(100%, 620px);

  display: flex;

  align-items: center;

  gap: 15px;

  margin:
    42px
    auto
    0;

  padding:
    18px
    20px;

  background:
    rgba(10, 38, 49, 0.4);

  border:
    1px solid
    rgba(127, 220, 240, 0.18);

  border-radius: 8px;
}

.theater-note .audio-dot {
  width: 10px;
  height: 10px;

  flex: 0 0 10px;

  background: var(--cyan);

  border-radius: 50%;

  box-shadow:
    0 0 16px
    rgba(127, 220, 240, 0.75);
}

.theater-note small {
  display: block;

  margin-bottom: 5px;

  color: #748a90;

  font-size: 8px;
  letter-spacing: 0.15em;
}

.theater-note strong {
  display: block;

  color: var(--white);

  font-family: var(--serif);

  font-size: 18px;
  font-weight: 400;
}


/* ==========================================================
   THEATER DESKTOP
========================================================== */

@media (min-width: 760px) {

  .theater-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 34px;
  }

  .theater-card:first-child {
    grid-column:
      1
      / -1;

    width: min(620px, 100%);

    justify-self: center;
  }

  .theater-media img,
  .theater-video video {
    max-height: 680px;
  }

}


/* ==========================================================
   THEATER LARGE DESKTOP
========================================================== */

@media (min-width: 1100px) {

  .theater-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 38px;
  }

  .theater-card {
    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }

  .theater-card:hover {
    transform: translateY(-4px);

    border-color:
      rgba(127, 220, 240, 0.38);

    box-shadow:
      0 26px 55px
      rgba(0, 0, 0, 0.38);
  }

}


/* ==========================================================
   THEATER MOBILE
========================================================== */

@media (max-width: 759px) {

  .theater {
    padding-left: 14px;
    padding-right: 14px;
  }

  .theater-grid {
    width: 100%;

    grid-template-columns: 1fr;

    gap: 22px;
  }

  .theater-card {
    width: 100%;
    max-width: 100%;

    border-radius: 8px;
  }

  .theater-media {
    width: 100%;
    max-width: 100%;
  }

  .theater-media img,
  .theater-video video {
    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: 70dvh;

    object-fit: contain;
  }

  .theater-info {
    width: 100%;

    padding:
      18px
      16px
      22px;
  }

  .theater-info h3 {
    font-size:
      clamp(
        26px,
        8vw,
        36px
      );
  }

  .theater-info p {
    font-size: 14px;
    line-height: 1.7;
  }

  .theater-note {
    width: 100%;

    margin-top: 30px;

    padding:
      16px
      14px;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

  .theater {
    padding-left: 12px;
    padding-right: 12px;
  }

  .theater-grid {
    gap: 18px;
  }

  .theater-info {
    padding:
      16px
      14px
      20px;
  }

  .theater-info h3 {
    font-size: 27px;
  }

}