/* Copyright © 2026 BKRXY LLC. All rights reserved. */

:root {
  --story-cream: #fff2cc;
  --story-paper: #f7ead1;
  --story-plum: #47284f;
  --story-ink: #33242b;
  --story-gold: #f2b03d;
}

.story-route { background: var(--story-cream); }

.story-route .site-header,
.story-route .site-footer {
  background: var(--story-cream);
  color: var(--story-ink);
  border-color: rgb(71 40 79 / 10%);
}

.story-route .site-header nav a { color: rgb(51 36 43 / 68%); }

.story-route .site-header nav a:hover,
.story-route .site-header nav a[aria-current="page"] { color: var(--story-plum); }

.story-main {
  min-height: calc(100svh - 4.75rem);
  background: var(--story-cream);
}

.story-experience {
  position: relative;
  padding: 0 0 3rem;
}

.story-track { display: block; outline: none; }

.story-chapter { position: relative; overflow: hidden; }
.story-chapter + .story-chapter { margin-top: 1.375rem; }

.story-chapter__inner {
  width: 100%;
  padding: 1.375rem;
}

.story-chapter__copy {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.story-chapter__copy h2 {
  margin: 0;
  color: var(--story-plum);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.08;
}

.story-chapter__copy p {
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.48;
}

.story-artwork {
  position: relative;
  width: 100%;
  height: 17.5rem;
  min-width: 0;
  isolation: isolate;
}

.story-chapter:where(#story-bella-begins) .story-artwork { height: 24.375rem; }
.story-chapter:where(#story-drawings) .story-artwork { height: 20rem; }
.story-chapter:where(#story-world) .story-artwork { height: 37.5rem; }
.story-chapter:where(#story-why-we-made-it) .story-artwork { height: 26rem; }
.story-artwork--departure { height: 26rem; }

.story-art,
.story-floating-head,
.story-artwork--icons > img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--art-rotation, 0deg));
  transform-origin: center;
  z-index: var(--art-depth, 1);
  transition: opacity 480ms ease;
}

.story-artwork.is-visible .story-art,
.story-artwork.is-visible .story-floating-head,
.story-artwork--icons.is-visible > img { opacity: 1; }

.story-art:nth-child(2), .story-floating-head:nth-child(2), .story-artwork--icons > img:nth-child(2) { transition-delay: 55ms; }
.story-art:nth-child(3), .story-floating-head:nth-child(3), .story-artwork--icons > img:nth-child(3) { transition-delay: 110ms; }
.story-art:nth-child(4), .story-floating-head:nth-child(4), .story-artwork--icons > img:nth-child(4) { transition-delay: 165ms; }
.story-art:nth-child(5), .story-artwork--icons > img:nth-child(5) { transition-delay: 220ms; }
.story-art:nth-child(6), .story-artwork--icons > img:nth-child(6) { transition-delay: 275ms; }

.story-experience img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.story-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-art--paper {
  overflow: hidden;
  border: 1px solid rgb(107 64 38 / 20%);
  background: var(--story-paper);
  box-shadow: 0 0.3125rem 0.75rem rgb(0 0 0 / 24%);
}

.story-art--paper:nth-child(odd) { border-radius: 0.8125rem 0.3125rem 0.75rem 0.4375rem; }
.story-art--paper:nth-child(even) { border-radius: 0.5rem 0.5625rem 0.375rem 0.875rem; }

.story-art--character,
.story-floating-head,
.story-artwork--icons > img { filter: drop-shadow(0 0.4375rem 0.5rem rgb(0 0 0 / 20%)); }

.story-floating-head,
.story-artwork--icons > img { object-fit: contain; }
.story-floating-head { pointer-events: none; }
.story-artwork--ensemble { overflow: visible; }

.story-character {
  position: absolute;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0.5rem 0.55rem rgb(0 0 0 / 20%));
  transform: scale(0.97) translateY(0.35rem);
  transform-origin: center bottom;
  transition: opacity 420ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.story-artwork--ensemble.is-visible .story-character {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.story-artwork--ensemble .story-character:nth-child(2) { transition-delay: 45ms; }
.story-artwork--ensemble .story-character:nth-child(3) { transition-delay: 90ms; }
.story-artwork--ensemble .story-character:nth-child(4) { transition-delay: 135ms; }
.story-artwork--ensemble .story-character:nth-child(5) { transition-delay: 180ms; }
.story-artwork--ensemble .story-character:nth-child(6) { transition-delay: 225ms; }
.story-artwork--ensemble .story-character:nth-child(7) { transition-delay: 270ms; }
.story-artwork--ensemble .story-character:nth-child(8) { transition-delay: 315ms; }

.story-pagination { display: none; }

@media (min-width: 43.75rem), (orientation: landscape) and (min-width: 40rem) {
  .story-route .site-footer { display: none; }

  .story-experience {
    display: grid;
    grid-template-rows: minmax(16.25rem, 1fr) 5.5rem;
    width: min(74rem, calc(100% - 2.5rem));
    height: calc(100svh - 6rem);
    margin: 0 auto 1.25rem;
    padding: 0;
  }

  .story-track {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .story-track::-webkit-scrollbar { display: none; }

  .story-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
  }

  .story-chapter {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .story-chapter + .story-chapter { margin-top: 0; }

  .story-chapter__inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: var(--chapter-gap, 2.625rem);
    padding: 1.75rem var(--chapter-pad-x, 2.75rem);
  }

  .story-chapter__copy {
    flex: 0 0 var(--copy-width, min(40%, 29.375rem));
    gap: 0.75rem;
    margin: 0;
  }

  .story-chapter__copy h2 { font-size: 2rem; }
  .story-chapter__copy p { font-size: 1.0625rem; line-height: 1.5; }

  .story-artwork,
  .story-chapter:nth-child(n) .story-artwork {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
  }

  .story-pagination {
    display: flex;
    width: 100%;
    height: 5.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.25rem 0.875rem 0.875rem;
  }

  .story-pagination__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .story-pagination__arrow {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 2px solid #c29b57;
    border-radius: 1rem 0.75rem 1rem 0.8125rem;
    background: linear-gradient(135deg, #fff2cc, #ffecb9);
    cursor: pointer;
    transition: transform 150ms ease, filter 150ms ease;
  }

  .story-pagination__arrow:hover { filter: brightness(1.025); }
  .story-pagination__arrow:active { transform: translateY(2px) scale(0.98); }

  .story-pagination__arrow img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
  }

  .story-pagination__dots {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .story-pagination__dots button {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 2.75rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 100vmax;
    background: transparent;
    cursor: pointer;
    transition: width 260ms ease;
  }

  .story-pagination__dots button.is-active {
    width: 2rem;
  }

  .story-pagination__dots button::before {
    content: "";
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 100vmax;
    background: rgb(71 40 79 / 32%);
    transition: width 260ms ease, background-color 260ms ease;
  }

  .story-pagination__dots button.is-active::before {
    width: 1.625rem;
    background: var(--story-gold);
  }

  .story-pagination__dots button:focus-visible {
    outline: 2px solid var(--story-plum);
    outline-offset: 2px;
  }
}

@media (max-height: 37.4375rem) and (orientation: landscape) {
  .story-experience { grid-template-rows: minmax(14rem, 1fr) 4.5rem; }
  .story-chapter__inner { gap: 1.5rem; padding: 0.875rem 3.625rem; }
  .story-chapter__copy { gap: 0.5rem; }
  .story-chapter__copy h2 { font-size: 1.6875rem; }
  .story-chapter__copy p { font-size: 0.9375rem; line-height: 1.42; }
  .story-pagination { height: 4.5rem; gap: 0.1875rem; padding: 0 4.5rem 0.5rem; }
  #story-why-we-made-it .story-chapter__copy { gap: 0.375rem; }
  #story-why-we-made-it .story-chapter__copy h2 { font-size: 1.5rem; }
  #story-why-we-made-it .story-chapter__copy p { font-size: 0.875rem; line-height: 1.4; }
}

@media (max-width: 39rem) {
  .story-chapter__inner { padding-inline: var(--mobile-content-gutter); }
  .story-route .site-header ul { gap: clamp(0.7rem, 3.4vw, 1rem); }
  .story-route .site-header nav a { font-size: clamp(0.72rem, 3.1vw, 0.85rem); }
}

/* Give the closing cast its own full-width row instead of a narrow side column. */
#story-adventure-grows .story-chapter__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 3vh, 2rem);
}

#story-adventure-grows .story-chapter__copy {
  flex: 0 0 auto;
  width: 100%;
  max-width: 48rem;
  margin: 0;
  text-align: center;
}

#story-adventure-grows .story-artwork--ensemble {
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 1;
  margin-bottom: 1rem;
}

@media (max-height: 37.4375rem) and (orientation: landscape) {
  #story-adventure-grows .story-chapter__inner { gap: 0.75rem; }
  #story-adventure-grows .story-artwork--ensemble { margin-bottom: 0.5rem; }
}

.story-artwork--video { display: grid; place-items: center; }
.story-video-mount {
  width: min(100%, 28rem);
  aspect-ratio: 1;
  padding: 0.75rem;
  border: 1px solid rgb(107 64 38 / 20%);
  border-radius: 0.8125rem 0.3125rem 0.75rem 0.4375rem;
  background: var(--story-paper);
  box-shadow: 0 0.3125rem 0.75rem rgb(0 0 0 / 24%);
}
.story-video-mount video { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
.story-chapter:where(#story-introduction) .story-artwork { height: auto; aspect-ratio: 1; }

/* Mirror the game's portrait artwork-first reading order, without device sniffing. */
@media (orientation: portrait) {
  .story-chapter__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
  .story-artwork { order: -1; }
  .story-chapter__copy { margin: 0; text-align: center; }
  #story-adventure-grows .story-artwork--ensemble { margin: 0; }
}

@media (orientation: portrait) and (min-width: 43.75rem) {
  .story-experience { grid-template-rows: minmax(0, 1fr) 7.25rem; }
  .story-pagination { height: 7.25rem; padding-bottom: 2.625rem; }
  .story-chapter__inner { justify-content: center; gap: clamp(2rem, 4vh, 3.5rem); }
  .story-chapter__copy { flex: 0 1 auto; width: 100%; max-width: 47.5rem; min-height: 0; overflow-y: auto; }
  .story-chapter__copy h2 { font-size: 2.5rem; }
  .story-chapter__copy p { font-size: 1.375rem; line-height: 1.5; }
  .story-chapter:nth-child(n) .story-artwork {
    flex: 0 1 auto; width: 85%; height: min(45vh, 34rem); min-height: 10rem;
  }
  #story-introduction .story-artwork { height: min(35vh, 26rem); aspect-ratio: auto; }
  #story-introduction .story-video-mount { width: min(100%, 35vh, 26rem); height: auto; }
  #story-adventure-grows .story-artwork--ensemble { height: auto; min-height: 0; }
}

@media (orientation: landscape) and (min-width: 40rem) {
  .story-pagination__arrow { display: none; }
  .story-experience { grid-template-rows: minmax(0, 1fr) 7.25rem; }
  .story-pagination { height: 7.25rem; padding-bottom: 2.625rem; }
  .story-artwork { transform: scale(0.85); transform-origin: center; }
  .story-chapter:nth-child(n) .story-artwork--video { aspect-ratio: auto; }
}

@media (max-height: 37.4375rem) and (orientation: landscape) {
  .story-experience { grid-template-rows: minmax(0, 1fr) 3.5rem; }
  .story-pagination { height: 3.5rem; padding: 0 0.875rem 0.5rem; }
  .story-chapter__copy { max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .story-chapter__copy h2 { font-size: 1.4375rem; }
  .story-artwork { transform: scale(0.9); }
  .story-video-mount { width: min(100%, calc(100svh - 11rem)); height: auto; padding: 0.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .story-artwork.is-visible .story-art,
  .story-artwork.is-visible .story-floating-head,
  .story-artwork--icons.is-visible > img {
    animation: story-float var(--float-duration, 3.8s) ease-in-out var(--float-delay, 0s) infinite alternate;
  }

  .story-artwork.is-visible .story-art:nth-child(2), .story-artwork.is-visible .story-floating-head:nth-child(2), .story-artwork--icons.is-visible > img:nth-child(2) { --float-duration: 4.22s; --float-delay: -1.1s; }
  .story-artwork.is-visible .story-art:nth-child(3), .story-artwork.is-visible .story-floating-head:nth-child(3), .story-artwork--icons.is-visible > img:nth-child(3) { --float-duration: 4.64s; --float-delay: -2s; }
  .story-artwork.is-visible .story-art:nth-child(4), .story-artwork.is-visible .story-floating-head:nth-child(4), .story-artwork--icons.is-visible > img:nth-child(4) { --float-duration: 5.06s; --float-delay: -0.6s; }
  .story-artwork.is-visible .story-art:nth-child(5), .story-artwork--icons.is-visible > img:nth-child(5) { --float-duration: 5.48s; --float-delay: -1.7s; }

  @keyframes story-float {
    from { translate: var(--float-x-start, -0.625rem) var(--float-y-start, 0.75rem); scale: 0.992; }
    to { translate: var(--float-x-end, 0.6875rem) var(--float-y-end, -0.875rem); scale: 1.018; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-track { scroll-behavior: auto; }
  .story-art,
  .story-floating-head,
  .story-artwork--icons > img,
  .story-character { transition: none; }
}