/* 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: calc(1.35rem * var(--heading-scale));
  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: calc(clamp(2rem, 4.5vw, 3.25rem) * var(--heading-scale)); 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-section + .gm-section { margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.gm-section-title {
  max-width: 1400px; margin: 0 auto 1.25rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 30%, transparent);
  color: var(--ink); font-size: calc(clamp(1.25rem, 2.4vw, 1.75rem) * var(--heading-scale)); font-weight: 400; letter-spacing: 0.04em;
}

.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; }
/* The lightbox is stuck in the modal's stacking context (z 102), under the fixed nav pill
   (z 1003); lift the whole modal while a photo is open. */
.gallery-modal.is_main:has(.gm-lightbox) { z-index: 1004; }

@media screen and (max-width: 767px) {
  .gallery-modal.is_main .gallery-modal-wrapper { padding-top: 8rem; }
  .gm-grid { columns: 8rem 2; column-gap: 0.6rem; }
  .gm-tile { margin-bottom: 0.6rem; }
  /* Photo centred between the Close bar on top and the prev/next row at the bottom, so tall
     portraits never run under either. */
  .gm-lightbox img { max-width: 94vw; max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); }
  .gm-lb-btn.is_close { top: 0.5rem; right: 0.5rem; }
  .gm-lb-btn.is_prev, .gm-lb-btn.is_next { top: auto; bottom: 1rem; padding: 0.25rem 1.25rem 0.5rem; font-size: 2.5rem; 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); }

/* Top-left "Close gallery" in the full gallery overlay; clicks #unlock-scroll so IX3 runs the
   same close. Inside the overlay, so it only shows while the gallery is open. */
.gallery-home {
  font-family: inherit;
  cursor: pointer;
  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: calc(1.1rem * var(--heading-scale)); }
  .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; }
  /* Below the centred nav pill, which it ran into at phone widths. */
  .gallery-home { top: 4rem; 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; }
}

/* Sideways swipes are the story's own (initSideSwipe in public/js/experience-scroll.js);
   vertical scrolling and pinch-zoom stay the browser's. */
.hero-model_timeline { touch-action: pan-y pinch-zoom; }

/* Scroll lock while the loader is up (public/js/experience-scroll.js stops Lenis until
   "start experience"); Lenis only blocks wheel and touch, this blocks the keyboard. */
html.lenis-stopped { overflow: hidden; }

/* 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); }

/* Hero name over the cover photo: a soft dark halo behind it so white type reads on any image. */
.hero_image-wrapper .hero-name {
  position: relative;
  isolation: isolate;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.55), 0 0 4px rgb(0 0 0 / 0.35);
}
.hero_image-wrapper .hero-name::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.4) 55%, transparent);
  filter: blur(18px);
  pointer-events: none;
}