/* Story layer for the shared category experience (src/components/experience.jsx).
   The Webflow scenes (backdrops, bridge images) stay as they are; this file only
   styles the storyboard told over them, one system for every category:
   - one surface: a panel tinted with the category's own tone (--tone, set per page), so
     copy reads over dark and light backdrops alike without a generic black box;
   - one accent: the brand gold; one ink: warm off-white; sharp corners everywhere;
   - brand type only (Aurea Type, inherited from body). */

.hero-model_timeline {
  --ink: #f2ede4;
  --ink-soft: rgb(242 237 228 / 0.74);
  --accent: var(--gold, #c6a15b);
  --hairline: rgb(242 237 228 / 0.14);
  /* Near-opaque instead of a backdrop blur: the panels move every scroll frame, and a blur
     would be recomputed under each one every frame for an effect this opacity hides anyway. */
  --panel: color-mix(in srgb, var(--tone, #16110c) 90%, transparent);
  --shadow: 0 24px 40px -20px rgb(0 0 0 / 0.6);
  --frame-h: 58vh;
}

.story-panel {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--shadow);
  white-space: normal;
  text-align: left;
}

.story-panel h2 {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
}

.story-panel p {
  margin: 0;
  max-width: 38ch;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
}

/* ── Storyboard: the piece being made, frame by frame ─────────────────────── */

/* Fixed section widths (the original Webflow layout's proportions), so IX3's backdrop fades
   and bridge reveals, timed as % of the whole scroll, still land between chapters. */
.hero-model_timeline .model_section { width: 364vh; }
.hero-model_timeline .concept_section { width: 300vh; }
.hero-model_timeline .craft_section { width: 290vh; }

.story-board {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 7vh;
  padding: 0 12vh 0 18vh;
  white-space: normal;
}

/* The concept chapter shares its scene with the gallery: the storyboard takes the first 66%,
   the gallery gets its own stage centred at --gallery-x, clear of the frames on its left and
   of the next bridge image on its right. Everything below derives from these two numbers. */
.concept_section {
  --gallery-x: 80%;
  --gallery-w: 24%;
}
.concept_section .story-board { right: 34%; padding-right: 0; }
.hero-model_timeline .gallery-wrapper {
  width: var(--gallery-w);
  margin-right: calc(100% - var(--gallery-x) - var(--gallery-w) / 2);
  gap: 0;
}
.hero-model_timeline .gallery-button.is_open { right: calc(100% - var(--gallery-x)); }

/* Its own spotlight: a soft cone from overhead and a pool of light on the floor, so the
   gallery reads as lit on every category's backdrop (the backdrop itself drifts under IX3's
   parallax, so no fixed spot in it could be relied on). Gradients only, no blur, so it costs
   nothing while the frame slides. */
.hero-model_timeline .gallery-section_container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gallery-x);
  width: calc(var(--gallery-w) * 1.9);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 92% at 50% -4%, rgb(255 236 206 / 0.30), rgb(255 236 206 / 0.10) 48%, transparent 76%),
    radial-gradient(ellipse 42% 9% at 50% 84%, rgb(255 236 206 / 0.24), transparent 72%);
  mix-blend-mode: screen;
}

/* ── Gallery previews: framed like the storyboard, staggered, over a solid button ── */

.hero-model_timeline .gallery-image_link {
  width: 31%;
  padding: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.hero-model_timeline .gallery-image_link:nth-child(2) { transform: translateY(-4vh); }
.hero-model_timeline .gallery-image_link:nth-child(3) { transform: translateY(3vh); }

.hero-model_timeline .gallery-button.is_open {
  flex-direction: column;
  gap: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-top-color: var(--accent);
  backdrop-filter: none;
}
.hero-model_timeline .gallery-button.is_open .label-style { color: var(--ink); }
.gallery-count {
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── Gallery modal: masonry grid + lightbox, in the category's own tone ── */

.gallery-modal.is_main {
  --ink: #f2ede4;
  --ink-soft: rgb(242 237 228 / 0.74);
  --accent: var(--gold, #c6a15b);
  background: var(--tone, #16110c);
  color: var(--ink);
}
.gallery-modal.is_main .swipe-cta-wrapper { display: none; }
.gallery-modal.is_main .gallery-button.is_close {
  background: color-mix(in srgb, var(--tone, #16110c) 92%, transparent);
  border-color: var(--accent);
  backdrop-filter: none;
}
.gallery-modal.is_main .gallery-button.is_close .label-style { color: var(--ink); }

.gallery-modal.is_main .gallery-modal-wrapper {
  display: block;
  overflow: hidden auto;
  padding: clamp(4rem, 12vh, 7rem) clamp(1rem, 5vw, 4rem) 8rem;
}

.gm-head { margin: 0 auto clamp(2rem, 6vh, 4rem); text-align: center; }
.gm-head h2 { margin: 0.6rem 0; color: var(--ink); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 400; line-height: 1.1; }
.gm-eyebrow, .gm-count { margin: 0; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; }
.gm-eyebrow { color: var(--accent); }
.gm-count { color: var(--ink-soft); font-weight: 300; }

.gm-grid { max-width: 1400px; margin: 0 auto; columns: 16rem 3; column-gap: 1rem; }

.gm-tile {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  break-inside: avoid;
  cursor: zoom-in;
}
.gm-tile .modal-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 12rem;
  background: rgb(255 255 255 / 0.04);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.gm-tile:hover .modal-gallery-image { transform: scale(1.04); }
.gm-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.gm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(8 6 4 / 0.95);
}
.gm-lightbox figure { margin: 0; text-align: center; }
.gm-lightbox img { display: block; max-width: min(88vw, 1200px); max-height: 82vh; object-fit: contain; }
.gm-lightbox figcaption { margin-top: 1rem; color: var(--ink-soft); font-size: 0.8rem; letter-spacing: 0.25em; }

.gm-lb-btn {
  position: absolute;
  padding: 1rem 1.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s;
}
.gm-lb-btn:hover, .gm-lb-btn:focus-visible { color: var(--accent); }
.gm-lb-btn.is_close { top: 1rem; right: 1rem; }
.gm-lb-btn.is_prev, .gm-lb-btn.is_next { top: 50%; font-size: 3rem; line-height: 1; transform: translateY(-50%); }
.gm-lb-btn.is_prev { left: 1rem; }
.gm-lb-btn.is_next { right: 1rem; }

@media screen and (max-width: 767px) {
  .gm-grid { columns: 8rem 2; column-gap: 0.6rem; }
  .gm-tile { margin-bottom: 0.6rem; }
  .gm-lightbox img { max-width: 94vw; }
  .gm-lb-btn.is_prev, .gm-lb-btn.is_next { top: auto; bottom: 1rem; transform: none; }
}

.board-intro {
  flex: none;
  width: 27rem;
  padding: 2.5rem 2.5rem 2.25rem;
  border-top: 1px solid var(--accent);
}

.board-track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 6vh;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The thread the frames hang on: it reads as one sequence, left to right. */
.board-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
  opacity: 0.55;
}

.board-frame {
  position: relative;
  flex: none;
}
.board-frame:nth-child(odd) { transform: translateY(-4.5vh); }
.board-frame:nth-child(even) { transform: translateY(5vh); }

.board-frame figure {
  margin: 0;
  padding: 0.7rem 0.7rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.board-frame img {
  display: block;
  width: auto;
  height: var(--frame-h);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.board-frame figcaption {
  width: calc(var(--frame-h) * 0.75);
  padding: 1rem 0.4rem 0;
  text-align: left;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
}

.board-frame figcaption strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 400;
}

.board-frame:first-child figcaption strong { color: var(--accent); }

/* Way out of the full gallery overlay to the home page. Inside the overlay, so it only shows
   while the gallery is open; styled like the overlay's own "Close gallery" button. */
.gallery-home {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  background: color-mix(in srgb, var(--tone, #16110c) 92%, transparent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  transition: color 0.3s, transform 0.2s ease;
}
.gallery-home span { font-size: 1.2rem; transition: transform 0.2s ease; }
.gallery-home:hover { color: var(--accent); }
.gallery-home:hover span { transform: translateX(-3px); }
.gallery-home:active { transform: translateY(1px); }
.gallery-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Phones and tablets (below 992px) ─────────────────────────────────────────
   Webflow hid the desktop backdrops here in favour of a separate fixed mobile layer, which
   src/components/experience.jsx no longer renders: every width gets the desktop scenes.
   IX3's desktop timeline (the one timed as % of the scroll) doesn't run below 992px, so the
   fixed chapter widths above aren't needed here: each chapter is as wide as its own story,
   which keeps frames from spilling into the gallery on short (landscape) screens. */
@media screen and (max-width: 991px) {
  .hero-model_timeline .desktop-background { display: block; }
  .hero-model_timeline :is(.model_section, .concept_section, .craft_section) { width: max-content; min-width: 100vw; }
  .story-board { position: relative; inset: auto; height: 100%; }
  /* Lead-in before the first panel, so IX3's hero veil (faded out over the first ~5% of the
     scroll) is gone before the panel reaches the middle of the screen. */
  .model_section .story-board { padding-left: 50vw; }
  /* The gallery's stage spans the whole chapter; let touches through to what is under it. */
  .hero-model_timeline .gallery-section_container { pointer-events: none; }
  .hero-model_timeline .gallery-section_container > * { pointer-events: auto; }

  /* The gallery gets a stage of its own after the storyboard, sized to the screen. Its preview
     row is ~0.41x as tall as it is wide, so the height cap keeps it inside a landscape phone. */
  .concept_section { --gallery-w: min(88vw, 100vh, 40rem); --gallery-x: calc(100% - 8vw - var(--gallery-w) / 2); }
  .concept_section .story-board { right: auto; padding-right: calc(var(--gallery-w) + 16vw); }
  .hero-model_timeline .gallery-button.is_open { width: min(300px, 80vw); }

  /* Closing "explore more" list: clear of the logo pill above and the footer bar below. */
  .crosslink-section { padding: 56px 0 10vh; background: #e8d7c5; }
}

/* Phones: Webflow overlapped the sections (negative margins) and squeezed each bridge image
   into a 10vw slot, both of which only worked over its fixed mobile layer. With the backdrops
   in the frame again, lay chapters end to end and give each bridge a full screen of its own,
   so no panel starts hidden under the hero or a bridge photo. */
@media screen and (max-width: 479px) {
  .hero-model_timeline :is(.model_section, .concept_section, .craft_section) { margin-left: 0; margin-right: 0; }
  .hero-model_timeline .image-bridge_wrapper { width: 100vw; position: relative; }
  .hero-model_timeline .image-bridge-cutter { width: 100%; min-width: 0; }

  .crosslink-title { font-size: 1.35rem; line-height: 1.7rem; }
  .footer-section { flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; padding: 1.5vh 4vw; }
  .footer-link { font-size: 0.78rem; }
}

/* Short screens (phones held sideways): the frames and panels are sized in vh, their copy in
   rem, so tighten the copy to keep each frame's caption on screen. */
@media screen and (max-height: 520px) and (orientation: landscape) {
  .hero-model_timeline { --frame-h: 52vh; }
  .story-board { gap: 5vh; }
  .board-intro { width: 20rem; padding: 1.25rem 1.5rem; }
  .story-panel h2 { margin-bottom: 0.5rem; font-size: 1.1rem; }
  .story-panel p { font-size: 0.85rem; line-height: 1.5; }
  .board-frame figure { padding: 0.5rem 0.5rem 0.7rem; }
  .board-frame figcaption { padding-top: 0.6rem; font-size: 0.75rem; line-height: 1.4; }
  .board-frame figcaption strong { font-size: 0.85rem; }
}
@media screen and (max-width: 991px) and (max-height: 520px) and (orientation: landscape) {
  /* Lift the previews clear of the gallery button, and keep the button on top regardless. */
  .hero-model_timeline .gallery-wrapper { margin-bottom: 8vh; }
  .hero-model_timeline .gallery-button.is_open { z-index: 2; bottom: 0.75rem; padding: 0.55rem 1rem; }
  .crosslink-section { display: grid; grid-template-columns: repeat(3, 1fr); }
  .crosslink-title { font-size: 1.1rem; line-height: 1.4rem; }
}

@media screen and (max-width: 767px) {
  .hero-model_timeline { --frame-h: 42vh; }
  .gallery-home { top: 1rem; left: 1rem; }
  .story-panel p { font-size: 0.92rem; }
  .story-board { gap: 5vh; padding: 0 8vw; }
  .board-intro { width: min(80vw, 22rem); padding: 1.75rem 1.5rem; }
}

/* Reveal: set by public/js/experience-scroll.js; without that script nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  .story-js [data-reveal] {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .story-js [data-reveal].is-revealed { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .board-frame:nth-child(odd),
  .board-frame:nth-child(even) { transform: none; }
}

/* Each start screen takes its page's backdrop tone (--tone, set by the Loader), whatever its loader variant. */
body.body-exp .loader { background-color: var(--tone, #5a0f1c); }