/* ==========================================================================
   Chapter template — fluted-glass hero, shared section widgets
   ========================================================================== */

/* bar docks inside the hero panel until the page scrolls (Figma: icons inside the glass) */
body.has-hero .bar { transition: transform .7s var(--ease), padding .7s var(--ease), color .4s; }
body.has-hero .bar:not(.is-docked) { transform: translateY(calc(var(--dock-y, 172) * var(--fx) - var(--bar-h) / 2)); padding-inline: calc(var(--dock-x, 160) * var(--fx)); }
@media (max-width: 760px) { body.has-hero .bar:not(.is-docked) { transform: translateY(16px); padding-inline: 30px; } }

/* ---------- hero: purple field, rounded panel of fluted glass strips over a 3D object ---------- */
.fh { position: relative; height: 100svh; min-height: 600px; background: var(--hero-bg, var(--m-purple)); color: #fff; overflow: clip; }
.fh__panel {
  position: absolute; top: calc(110 * var(--fx)); bottom: calc(75 * var(--fx)); left: calc(120 * var(--fx)); right: calc(120 * var(--fx));
  border-radius: var(--r-panel); overflow: hidden; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 50px 120px -50px rgba(14,19,60,.55);
  background: rgba(255,255,255,.035);
}
.fh__obj { position: absolute; left: 50%; top: 50%; width: var(--obj-w, 49%); translate: -50% -50%; pointer-events: none; user-select: none; }
.fh__strips { position: absolute; inset: 0; display: flex; }
.fh__s { position: relative; flex: 1 1 0; overflow: hidden; }
.fh__s::after { /* the strip's own shading: dark edge, bright rim */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,19,60,.10) 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,.0) 70%, rgba(255,255,255,.32) 97%, rgba(255,255,255,.08) 100%);
}
.fh__s img { position: absolute; top: 0; height: 100%; max-width: none; filter: blur(var(--strip-blur, 7px)) saturate(1.25); will-change: transform; }
.fh__inner { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--s-6) var(--s-5); }
.fh__num { font: 500 var(--t-micro)/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; opacity: .85; margin-bottom: var(--s-3); }
.fh__title { view-transition-name: chapter-title; font: 700 clamp(48px, calc(128 * var(--fx)), 150px)/1 var(--font-display); letter-spacing: -.035em; text-shadow: 0 10px 60px rgba(14,19,60,.25); }
.fh__chips { margin-top: var(--s-5); }
.fh__chips .chip { background: #fff; color: var(--m-navy); }
.fh__chips .chip:first-child { background: var(--m-navy); color: #fff; }
.fh__chips .chip:hover { background: var(--m-lilac-2); }
.fh__cue { position: absolute; left: 50%; bottom: calc(26 * var(--fx)); transform: translateX(-50%); z-index: 3; font: 500 11px/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
@media (max-width: 760px) { .fh__panel { top: 10px; left: 10px; right: 10px; bottom: 44px; } }

/* ---------- section heading with brand-shape cluster ---------- */
.hd { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-6); }
.hd__shapes .shapes { font-size: clamp(22px, calc(34 * var(--fx)), 34px); }
.label { font: 600 var(--t-small)/1.3 var(--font-display); }
.caps { text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- segmented control (interactive → stroke) ---------- */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); gap: 2px; }
.seg button { padding: .55em 1.05em; border-radius: 999px; font: 500 var(--t-small)/1 var(--font-display); color: var(--fg-soft); transition: background .3s, color .3s; }
.seg button:hover { color: var(--fg); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* ---------- tab panels ---------- */
.tabp { animation: tabin .6s var(--ease) both; }
@keyframes tabin { from { opacity: 0; transform: translateY(14px); } }

/* sparkle bullet list (Figma: navy sparkle bullets) */
.sp-list { display: grid; gap: .55em; }
.sp-list li { position: relative; padding-left: 1.55em; }
.sp-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: .95em; height: .95em; background: currentColor; -webkit-mask: var(--sparkle) center/contain no-repeat; mask: var(--sparkle) center/contain no-repeat; }
:root { --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l1.2 8.8L20 10l-8.8 1.2L10 20l-1.2-8.8L0 10l8.8-1.2z'/%3E%3C/svg%3E"); }

/* scroll-story paragraphs (opacity driven by JS) */
.story p { transition: opacity .4s; }
.js .story p { opacity: var(--o, .22); }

/* phones: content starts under the docked bar; chips become one swipeable row */
@media (max-width: 760px) {
  .fh__inner { place-content: start center; padding: calc(var(--bar-h) + 48px) 0 var(--s-5); }
  .fh__title { font-size: clamp(40px, 12vw, 56px); }
  .fh__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; padding: 4px 18px 10px; margin-inline: -2px; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .fh__chips::-webkit-scrollbar { display: none; }
  .fh__chips .chip { flex: none; }
}