/* 07_pitch: experimental pitch build, NOT Questum house style. Questum's web system: 06_production-context/web/ */
/* Apple layer: an optional, restrained add-on to questum-motion.css (2026-09-30).
   Adds (1) Liquid-Glass-style materials for the floating control layer only, and
   (2) Apple spring easings computed from SwiftUI spring parameters, as CSS linear().
   Rules followed (Apple HIG, Materials and Motion):
   - glass only on controls and navigation that float above content, never on content itself;
   - "regular" glass by default; "clear" glass only over media, with a 35% dim layer if the media is bright;
   - motion brief, precise, never blocking; everything off under prefers-reduced-motion.
   No SF Pro: Apple's font licence is for Apple-platform apps. Type stays Rules / Inter. */

:root {
  /* SwiftUI springs sampled to CSS linear(). Durations are the settle times. */
  --spring-smooth: linear(0, 0.0156, 0.0552, 0.1102, 0.174, 0.2421, 0.3111, 0.3788, 0.4434, 0.5042, 0.5605, 0.612, 0.6588, 0.7009, 0.7387, 0.7722, 0.802, 0.8282, 0.8513, 0.8715, 0.8891, 0.9045, 0.9179, 0.9294, 0.9395, 0.9481, 0.9556, 0.962, 0.9676, 0.9723, 0.9764, 0.9799, 0.9829, 0.9854, 0.9876, 0.9895, 0.9911, 0.9924, 0.9936, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9976, 0.998, 0.9983, 0.9986, 1);
  --spring-smooth-dur: .72s;   /* .smooth: response .5, no bounce */
  --spring-snappy: linear(0, 0.0145, 0.0525, 0.1067, 0.1713, 0.2419, 0.3148, 0.3876, 0.4581, 0.5251, 0.5877, 0.6452, 0.6973, 0.7442, 0.7858, 0.8224, 0.8543, 0.8818, 0.9054, 0.9254, 0.9422, 0.9562, 0.9677, 0.9771, 0.9846, 0.9906, 0.9953, 0.9989, 1.0016, 1.0035, 1.0048, 1.0056, 1.0061, 1.0063, 1.0062, 1.006, 1.0057, 1.0053, 1.0049, 1.0044, 1.004, 1.0035, 1.0031, 1.0027, 1.0023, 1.002, 1.0017, 1.0014, 1);
  --spring-snappy-dur: .69s;   /* .snappy: response .5, bounce .15 */
  --spring-default: linear(0, 0.0144, 0.0523, 0.1066, 0.1717, 0.2429, 0.3168, 0.3907, 0.4625, 0.5307, 0.5945, 0.6532, 0.7064, 0.7542, 0.7965, 0.8336, 0.8659, 0.8936, 0.9171, 0.937, 0.9535, 0.9671, 0.9781, 0.9869, 0.9938, 0.9991, 1.0031, 1.006, 1.008, 1.0093, 1.01, 1.0102, 1.0101, 1.0097, 1.0092, 1.0085, 1.0078, 1.0071, 1.0063, 1.0056, 1.0049, 1.0042, 1.0036, 1.0031, 1.0026, 1.0021, 1.0017, 1.0014, 1);
  --spring-default-dur: .75s;  /* .spring(response .55, damping .825) */
  --spring-press: linear(0, 0.012, 0.0436, 0.0891, 0.1439, 0.2044, 0.2678, 0.3318, 0.3949, 0.4558, 0.5138, 0.5681, 0.6186, 0.6649, 0.7072, 0.7455, 0.7798, 0.8105, 0.8378, 0.8618, 0.8829, 0.9013, 0.9173, 0.9311, 0.943, 0.9532, 0.9619, 0.9692, 0.9754, 0.9806, 0.9849, 0.9885, 0.9914, 0.9937, 0.9957, 0.9972, 0.9984, 0.9993, 1, 1.0006, 1.001, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0015, 1.0014, 1);
  --spring-press-dur: .37s;    /* response .3, damping .9: press/release */

  /* Glass tokens: restrained 2026 look (more opaque than 2025 Liquid Glass) */
  --glass-blur: 22px;
  --glass-sat: 180%;
  --glass-tint-dark: rgba(20,20,20,.42);
  --glass-tint-light: rgba(255,255,255,.62);
  --glass-edge: rgba(255,255,255,.26);
  --glass-edge-light: rgba(0,0,0,.08);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* ---------- Materials ---------- */
.glass {
  background: var(--glass-tint-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  color: #fff;
}
.glass--light { background: var(--glass-tint-light); border-color: var(--glass-edge-light); color: var(--black, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(0,0,0,.08); }
/* Clear variant: only over photos/video; pair with .media-dim on bright media */
.glass--clear { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
.media-dim { position: relative; }
.media-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); pointer-events: none; }
/* Refraction: Chromium-only progressive enhancement (needs the #glass-refract SVG filter from apple-layer.js) */
@supports (backdrop-filter: url(#x)) {
  .glass--refract { backdrop-filter: blur(6px) saturate(var(--glass-sat)) url(#glass-refract); }
}
/* No backdrop-filter support: solid fallback keeps text legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(20,20,20,.88); } .glass--light { background: rgba(255,255,255,.94); }
}

/* ---------- Press feedback (Apple-style, brief) ---------- */
.press { transition: transform var(--spring-press-dur) var(--spring-press); }
.press:active { transform: scale(.97); }

/* ---------- Floating glass nav: appears after the hero, condenses on scroll ---------- */
.glass-nav { position: fixed; top: 16px; left: 0; right: 0; margin-inline: auto; width: max-content; z-index: 600; display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 999px; transform: translate3d(0, -140%, 0); opacity: 0;   /* centred by margins, not translate(-50%): text stays on whole pixels */
  transition: transform var(--spring-snappy-dur) var(--spring-snappy), opacity .3s ease, padding var(--spring-smooth-dur) var(--spring-smooth); }
.glass-nav.is-shown { transform: translate3d(0, 0, 0); opacity: 1; }
.glass-nav-active .site-header { transform: translateY(-100%); }
.glass-nav a { color: inherit; text-decoration: none; font-size: 15px; padding: 10px 18px; border-radius: 999px; transition: background .2s; }
.glass-nav a:hover { background: rgba(255,255,255,.12); }
.glass-nav.glass--light a:hover { background: rgba(0,0,0,.06); }
.glass-nav .glass-nav-cta { background: #fff; color: #000; }
.glass-nav.glass--light .glass-nav-cta { background: #000; color: #fff; }

/* ---------- Segmented control with a sliding glass thumb (the one-into-four switcher) ---------- */
.segmented { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; }
.segmented button { position: relative; z-index: 1; appearance: none; border: 0; background: none; color: inherit; font: inherit; font-size: 15px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap; opacity: .72; transition: opacity .2s; }
.segmented button[aria-selected="true"] { opacity: 1; }
.segmented .thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform var(--spring-snappy-dur) var(--spring-snappy), width var(--spring-snappy-dur) var(--spring-snappy); }
.segmented.glass .thumb { background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.segmented:not(.glass) button[aria-selected="true"] { color: #000; }

/* Variant stage: cards crossfade and settle with a spring */
.variant-stage { display: grid; }
.variant-stage > * { grid-area: 1 / 1; opacity: 0; transform: scale(.96) translateY(8px); filter: blur(6px);
  transition: opacity .35s ease, transform var(--spring-default-dur) var(--spring-default), filter .45s ease; pointer-events: none; }
.variant-stage > .is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* "Opening" effect: one ad fans out into four (used on scroll or on tap) */
.fan { position: relative; display: grid; place-items: center; }
.fan > * { grid-area: 1 / 1; transition: transform var(--spring-default-dur) var(--spring-default), opacity .4s ease; }
.fan > *:not(:first-child) { opacity: 0; }
.fan.is-open > *:not(:first-child) { opacity: 1; }
.fan.is-open > :nth-child(2) { transform: translateX(-165%) rotate(-2deg); transition-delay: .00s; }
.fan.is-open > :nth-child(3) { transform: translateX(-55%)  rotate(-.6deg); transition-delay: .04s; }
.fan.is-open > :nth-child(4) { transform: translateX(55%)   rotate(.6deg);  transition-delay: .08s; }
.fan.is-open > :nth-child(5) { transform: translateX(165%)  rotate(2deg);   transition-delay: .12s; }
.fan.is-open > :first-child { opacity: 0; transform: scale(.94); }

/* ---------- Glass media controls for the episode player ---------- */
.player { position: relative; overflow: hidden; border-radius: 24px; background: #000; }
.player video, .player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.player-controls { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: 999px; }
.player-controls button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; }
.player-progress { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); cursor: pointer; touch-action: none;
  transition: transform .2s ease; outline: none; }
.player-progress::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }   /* a 32 px hit area around the 4 px bar */
.player-progress > i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width .1s linear; }
.player-progress:hover, .player-progress:focus-visible, .is-scrubbing .player-progress { transform: scaleY(1.5); }   /* grows when touched, Apple-like */
.is-scrubbing .player-progress > i { transition: none; }
.player-time { font-size: 13px; font-variant-numeric: tabular-nums; opacity: .85; }
.player-controls .player-cc { width: auto; height: 28px; padding: 0 7px; border-radius: 7px; background: none; font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; line-height: 28px; opacity: .7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transition: opacity .2s, background .2s; }
.player.cc-on .player-cc { opacity: 1; background: rgba(255,255,255,.22); }
/* touch: Apple's 44pt targets (the CC button's visible chip stays small; its hit area is 44 tall) */
@media (hover: none) {
  .player-controls button { width: 44px; height: 44px; }
  .player-controls .player-cc { height: 44px; min-width: 44px; padding: 0 4px; background: none; box-shadow: none; position: relative; isolation: isolate; }
  .player-controls .player-cc::before { content: ""; position: absolute; z-index: -1; inset: 8px 5px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
  .player.cc-on .player-cc { background: none; } .player.cc-on .player-cc::before { background: rgba(255,255,255,.22); }
  .player-progress::before { top: -20px; bottom: -20px; }   /* a 44 px hit area around the 4 px bar */
}
.player::before { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events: none; }

/* The big glossy play button ([data-bigplay] players): a round clear-glass lens in the middle, with a specular top */
.player-big { position: absolute; z-index: 6; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; padding: 0;   /* centred by margins: whole pixels */
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.14);   /* Apple's size (64px): clear glass, a hairline rim and a top highlight */
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(0,0,0,.25);
  transition: opacity .35s ease, transform var(--spring-snappy-dur) var(--spring-snappy); }
.player-big svg { width: 22px; height: 22px; margin-left: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.player-big:hover { transform: scale(1.06); }
.player-big:active { transform: scale(.96); }
.player.is-playing .player-big { opacity: 0; transform: scale(.8); pointer-events: none; }
.player[data-bigplay]:not(.is-started) .player-controls, .player[data-bigplay]:not(.is-started)::before { opacity: 0 !important; pointer-events: none; }

/* ---------- Glass dock: a small floating CTA bar after the hero ---------- */
.glass-dock { position: fixed; left: 50%; bottom: 20px; z-index: 600; display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 20px; border-radius: 999px; transform: translate(-50%, 160%);
  transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.glass-dock.is-shown { transform: translate(-50%, 0); }
.glass-dock .dock-text { font-size: 15px; white-space: nowrap; }
.glass-dock .btn { padding: 10px 22px; }
.glass-dock.glass--light .btn--white { background:#000; color:#fff; border-color:#000; }
.glass-dock.glass--light .btn--white::before { background:#fff; }
.glass-dock.glass--light .btn--white:hover { color:#000; }

/* Phones: no floating nav (Dip, 2026-10-04: the page reads top to bottom; the close holds the one action); the dock must fit a 375px screen */
@media (max-width: 639px) {
  .glass-nav { display: none; }
  .glass-dock { gap: 10px; padding: 6px 6px 6px 16px; max-width: calc(100vw - 24px); }
  .glass-dock .dock-text { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 399px) { .glass-dock .dock-text { display: none; } .glass-dock { padding-left: 6px; } }

/* ---------- Scroll-linked media: Apple product-page style scale-in (progressive) ---------- */
@supports (animation-timeline: view()) {
  .scroll-scale { animation: scroll-scale linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes scroll-scale { from { transform: scale(.9); border-radius: 48px; opacity: .6; } to { transform: scale(1); border-radius: 32px; opacity: 1; } }
}

/* Optional softer body reveal: Questum fade-up plus a light blur */
.soft-blur.fade-up, .soft-blur.fade-up-later, .soft-blur.fade-up-late { filter: blur(6px); transition-property: opacity, transform, filter; }
.soft-blur.in-view { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .press, .glass-nav, .segmented .thumb, .variant-stage > *, .fan > *, .glass-dock { transition: none !important; }
  .scroll-scale { animation: none !important; }
  .soft-blur { filter: none !important; }
}