/* Video field — the black window inside the product theater ("Your Creator").
   On scroll it expands toward the viewer until it fills the whole screen, stays pinned while you
   interact, then the page moves on. Sizes are driven per frame by field.js (--expand 0..1). */

/* Not a box inside a box: the theater frame disappears and the field is the section itself. */
#product-theater.widget:has(.wpanel--fan[data-on="1"]) {
  background: transparent;
  padding: 0 10px;                 /* same horizontal inset as the original box */
  box-shadow: none;
}
/* Keep the tab strip's space so the box sits exactly where the original one did; the menu lives inside. */
#product-theater:has(.wpanel--fan[data-on="1"]) .tabs { visibility: hidden; }
#product-theater .wpanel--fan {
  display: block;
  min-height: 0;
  padding: 0;
}
/* The active fan panel becomes a tall scroll region so the field can pin and expand inside it. */
#product-theater .wpanel--fan[data-on="1"] {
  position: relative !important;
  min-height: 230vh;
  /* The site's panel styles clip and transform the panel; both would pin the sticky field to the
     panel instead of the viewport. The field clips itself. */
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}
#product-theater .wpanels:has(.wpanel--fan[data-on="1"]) { min-height: 230vh; }

.field {
  position: relative;
  overflow: hidden;
  background: #0b0b0c;
  color: #f4f4f2;
  isolation: isolate;
}
.field--panel {
  position: sticky;
  top: 0;
  width: 100%;                       /* field.js overrides width/height/radius/margin per frame */
  height: clamp(560px, 75vh, 760px);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  z-index: 5;
}
.field__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1;
}
/* Hidden layout track: the WebGL planes copy these boxes. Percent-based so the cards grow with the box.
   The pattern repeats every track width; it must always be wider than the viewport plus one card so a
   card never has to be in two places at once (the canvas is viewport-sized). */
.field__track {
  position: absolute; top: 0; left: 0; height: 100%;
  width: max(280%, calc(105vw + 320px));
  visibility: hidden; pointer-events: none;
}
.field__figure { position: absolute; margin: 0; aspect-ratio: 9 / 16; }
/* Ten cards, one every tenth of the loop, even gaps, heights 40-50% of the box, and a wave of
   vertical positions (high, low, high, low, middle, twice) so the loop has no visible seam. */
.field__figure:nth-child(1)  { left: 0.5%;  top: 10%; height: 46%; }
.field__figure:nth-child(2)  { left: 10.5%; top: 46%; height: 40%; }
.field__figure:nth-child(3)  { left: 20%;   top: 9%;  height: 50%; }
.field__figure:nth-child(4)  { left: 30.5%; top: 44%; height: 42%; }
.field__figure:nth-child(5)  { left: 40.5%; top: 26%; height: 42%; }
.field__figure:nth-child(6)  { left: 50.5%; top: 12%; height: 44%; }
.field__figure:nth-child(7)  { left: 60.5%; top: 45%; height: 41%; }
.field__figure:nth-child(8)  { left: 70%;   top: 8%;  height: 48%; }
.field__figure:nth-child(9)  { left: 80.5%; top: 46%; height: 40%; }
.field__figure:nth-child(10) { left: 90.5%; top: 24%; height: 44%; }
.field__figure video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The one action inside the field: a white pill at the bottom, centred. */
.field__cta {
  position: absolute; left: 50%; bottom: 28px; z-index: 4;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  background: #fff; color: #111; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.012em; line-height: 1;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.field__cta:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.field__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.field__cta-arrow { transition: transform .2s ease; }
.field__cta:hover .field__cta-arrow { transform: translateX(2px); }
.field__hint {
  position: absolute; right: 18px; top: 16px; z-index: 3;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; letter-spacing: .02em;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.field__hint.is-visible { opacity: 1; }

/* Style menu inside the field: letters only, centred at the top. */
.field__menu {
  position: absolute; left: 50%; top: 22px; z-index: 4;
  transform: translateX(-50%);
  display: inline-flex; gap: 32px; padding: 0; background: none;
  white-space: nowrap;               /* one line, always */
}
.field__style {
  border: 0; cursor: pointer; padding: 6px 2px; background: transparent; white-space: nowrap;
  font: inherit; font-size: 15px; font-weight: 450; letter-spacing: -.012em;   /* exactly the nav links */
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.field__style[aria-pressed="true"] { color: #fff; border-bottom-color: #fff; }
.field__style:hover { color: #fff; }
.field__style:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.field__style-note {
  position: absolute; left: 50%; top: 64px; z-index: 4; margin: 0;
  transform: translateX(-50%);
  max-width: 40ch; text-align: center; font-size: .85rem; line-height: 1.4; color: rgba(255,255,255,.8);
  pointer-events: none;
}
.field__style-note:empty { display: none; }

/* Creator names + arrows live inside the field, along the bottom, on black. */
#product-theater .field__choices {
  position: absolute; left: 50%; bottom: 18px; z-index: 4;
  transform: translateX(-50%);
  width: min(100% - 32px, 560px);
  color: #f4f4f2;
}
#product-theater .field__choices .creator-choice,
#product-theater .field__choices .creator-step { color: #f4f4f2; }
#product-theater .field__choices .creator-choice[aria-pressed="true"] { color: #fff; }
#product-theater .field__choices .creator-progress { color: rgba(255,255,255,.7); }
#product-theater .field__choices .creator-progress i { background: rgba(255,255,255,.18); }

/* Fallback when WebGL is unavailable: plain horizontal snap rail of the same videos. */
.field.is-fallback .field__track {
  visibility: visible; pointer-events: auto; position: relative; width: auto; height: 100%;
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4% 3%;
}
.field.is-fallback .field__figure { position: static; height: 92%; flex: 0 0 auto; scroll-snap-align: center; }
.field.is-fallback .field__canvas { display: none; }

@media (max-width: 720px) {
  #product-theater .wpanel--fan { padding: 6px 6px 10px; }
  .field--panel { height: clamp(420px, 60vh, 560px); border-radius: 18px; }
  .field__track { width: max(600%, calc(105vw + 320px)); }
  .field__figure:nth-child(1)  { left: 0.5%;   top: 8%;  height: 42%; }
  .field__figure:nth-child(2)  { left: 10.25%; top: 52%; height: 38%; }
  .field__figure:nth-child(3)  { left: 19.75%; top: 8%;  height: 46%; }
  .field__figure:nth-child(4)  { left: 30.5%;  top: 50%; height: 40%; }
  .field__figure:nth-child(5)  { left: 40.75%; top: 27%; height: 40%; }
  .field__figure:nth-child(6)  { left: 50.5%;  top: 10%; height: 44%; }
  .field__figure:nth-child(7)  { left: 60.75%; top: 52%; height: 38%; }
  .field__figure:nth-child(8)  { left: 69.75%; top: 8%;  height: 44%; }
  .field__figure:nth-child(9)  { left: 80.5%;  top: 50%; height: 40%; }
  .field__figure:nth-child(10) { left: 90.75%; top: 28%; height: 42%; }
  .field__menu { gap: 22px; top: 18px; }
  .field__style { font-size: 14px; }
  .field__cta { bottom: 22px; padding: 11px 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #product-theater .wpanel--fan[data-on="1"], #product-theater .wpanels:has(.wpanel--fan[data-on="1"]) { min-height: 0; }
  .field--panel { position: relative; }
  .field__canvas { display: none; }
  .field .field__track { visibility: visible; pointer-events: auto; position: relative; width: auto; height: 100%; display: flex; gap: 12px; overflow-x: auto; padding: 4% 3%; }
  .field .field__figure { position: static; height: 92%; flex: 0 0 auto; }
}