/* Theme. To restyle, set any --fx-* variable on :root (every feature on the site)
   or on .fx-story (this feature only). The values here are the defaults. */
.fx-story {
  --_accent: var(--fx-accent, #d4af37);
  --_accent-hover: var(--fx-accent-hover, #e2c158);
  --_accent-text: var(--fx-accent-text, #000);
  --_text: var(--fx-text, #f5f5f5);
  --_muted: var(--fx-muted, #b8b8b8);
  --_panel: var(--fx-panel, #181818);
  --_demo: var(--fx-demo, #9ad1ff);
  --_header-offset: var(--fx-header-offset, 0px);
  --_font-display: var(--fx-font-display, inherit);
  --_font-body: var(--fx-font-body, inherit);
  --_space: var(--fx-space, 16px);
  --_space-sm: calc(var(--_space) * .5);
  --_space-lg: calc(var(--_space) * 1.5);
  --_radius: var(--fx-radius, 6px);
  --_radius-sm: calc(var(--_radius) * .6);
  --_slant: 14%;
  color: var(--_text);
  font-family: var(--_font-body);
}

/* The section is one screen tall plus some scrolling room for each step */
.fx-story { position: relative; height: calc(100vh + var(--fx-story-step, 80vh) * var(--fx-story-count, 4)); }
.fx-story-sticky {
  position: sticky;
  top: var(--_header-offset);
  height: calc(100vh - var(--_header-offset));
  height: calc(100svh - var(--_header-offset));
  overflow: hidden;
  background: #000;
}
.fx-story-media { position: absolute; inset: 0; }
.fx-story-shot { position: absolute; inset: 0; margin: 0; }
.fx-story-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The After photo is cut along a slanted line that moves with the scroll */
.fx-story-shot-after {
  clip-path: polygon(0 0, var(--fx-story-x, 0%) 0, calc(var(--fx-story-x, 0%) - var(--_slant)) 100%, 0 100%);
}
.fx-story-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fx-story-x, 0%) - var(--_slant));
  width: var(--_slant);
  background: linear-gradient(to top left, transparent calc(50% - 3px), var(--_accent) calc(50% - 1.5px), #fff 50%, var(--_accent) calc(50% + 1.5px), transparent calc(50% + 3px));
  filter: drop-shadow(0 0 12px var(--_accent));
  pointer-events: none;
}
.fx-story-tag {
  position: absolute;
  top: var(--_space);
  padding: 2px 9px;
  background: rgba(0,0,0,.62);
  border-radius: var(--_radius-sm);
  font-family: var(--_font-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: var(--fx-heading-case, uppercase);
}
.fx-story-shot-before .fx-story-tag { right: var(--_space); color: #fff; }
.fx-story-shot-after .fx-story-tag { left: var(--_space); color: var(--_accent); }

.fx-story-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc(var(--_space) * 4) var(--_space) var(--_space-lg);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72) 38%, rgba(0,0,0,.9));
  /* This text sits on a darkened photo, so it stays light whatever the site's text color is */
  color: #fff;
}
.fx-story-progress { display: flex; gap: 6px; max-width: 260px; margin-bottom: var(--_space); }
.fx-story-seg { flex: 1; height: 4px; background: rgba(255,255,255,.28); border-radius: 2px; transition: background-color .3s ease; }
.fx-story-seg.is-done { background: var(--_accent); }
/* Steps share one spot; only the current one shows */
.fx-story-steps { display: grid; margin: 0 0 var(--_space); padding: 0; list-style: none; }
.fx-story-step { grid-area: 1 / 1; max-width: 34em; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.fx-story-step.is-active { opacity: 1; transform: none; }
.fx-story-kicker { margin: 0 0 4px; color: var(--_accent); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fx-story-title { margin: 0 0 .2em; font-family: var(--_font-display); font-size: clamp(2rem, 8.5vw, 4.2rem); font-weight: var(--fx-heading-weight, 800); line-height: .95; text-transform: var(--fx-heading-case, uppercase); }
.fx-story-text { margin: 0; color: #e6e6e6; font-size: 1rem; }
.fx-story .fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--_space-lg);
  background: var(--_accent);
  color: var(--_accent-text);
  border-radius: var(--_radius-sm);
  font-family: var(--_font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: var(--fx-heading-case, uppercase);
}
.fx-story .fx-btn:hover { background: var(--_accent-hover); }
.fx-story :focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
.fx-story-missing { margin: 0; padding: var(--_space-lg); background: var(--_panel); color: var(--_muted); border-radius: var(--_radius); text-align: center; }
.fx-story .fx-demo {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,.5);
  border: 1px dashed var(--_demo);
  border-radius: var(--_radius-sm);
  color: var(--_demo);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Static mode (reduced motion, very short screens, missing photos): nothing is pinned, everything is shown */
.fx-story.is-static { height: auto; padding: var(--_space-lg) var(--_space); }
.fx-story.is-static .fx-story-sticky { position: static; max-width: 1100px; height: auto; margin: 0 auto; overflow: visible; background: none; }
.fx-story.is-static .fx-story-media { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--_space-sm); }
.fx-story.is-static .fx-story-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; clip-path: none; border-radius: var(--_radius); }
.fx-story.is-static .fx-story-shot .fx-story-tag { top: var(--_space-sm); right: auto; left: var(--_space-sm); }
.fx-story.is-static .fx-story-edge, .fx-story.is-static .fx-story-progress { display: none; }
.fx-story.is-static .fx-story-panel { position: static; padding: var(--_space) 0 0; background: none; color: var(--_text); }
.fx-story.is-static .fx-story-steps { display: grid; gap: var(--_space); }
.fx-story.is-static .fx-story-step { grid-area: auto; opacity: 1; transform: none; transition: none; }
.fx-story.is-static .fx-story-title { font-size: clamp(1.5rem, 5vw, 2rem); }
.fx-story.is-static .fx-story-text { color: var(--_muted); }
.fx-story.is-static .fx-demo { background: none; }
.fx-story.is-broken .fx-story-media { display: block; }

@media (prefers-reduced-motion: reduce) {
  .fx-story-step, .fx-story-seg { transition: none; }
}
@media (min-width: 900px) {
  .fx-story-panel { padding: calc(var(--_space) * 6) calc(var(--_space) * 3) calc(var(--_space) * 2.5); }
  .fx-story-tag { top: var(--_space-lg); }
  .fx-story-shot-before .fx-story-tag { right: calc(var(--_space) * 3); }
  .fx-story-shot-after .fx-story-tag { left: calc(var(--_space) * 3); }
  .fx-story.is-static .fx-story-steps { grid-template-columns: 1fr 1fr; }
}