/* ═══════════════════════════════════════════════════════════════
   feature-rec.css: recording tiles, the player and the scenes
   ═══════════════════════════════════════════════════════════════
   4.2531.25: moved out of features.css so the feature pages and the
   landing page's tour gallery share one copy. The colors are set here,
   on the tiles and the player themselves, so they look the same on the
   light feature pages and on the dark landing page. Used with
   feature-rec.js and feature-recordings.js. Everything that moves
   stands still under prefers-reduced-motion. */
.frec, .frec-overlay {
  --frec-accent: #1a3a5c;
  --frec-accent-lt: #e8edf2;
  --frec-card: #fffdf9;
  --frec-glow: linear-gradient(90deg, #1a3a5c, #2f7d8c, #c9a227, #2f7d8c, #1a3a5c);
  --frec-gold: #c9a227;
  --frec-ink: #0f0f0f;
  --frec-muted: #6b6659;
  --frec-paper: #f7f5f0;
  --frec-rule: #d6d0c4;
  --frec-teal: #2f7d8c;
}

/* Recording tiles: paused, 150 by 150, glowing on approach. The ring is two
   masks combined so only a border shows: prefixed for older WebKit, then
   standard (4.2531.9). The standard mask shorthand resets mask-composite,
   so mask-composite must follow it. */
.frec { margin: 0; width: 150px; }
.frec-tile { position: relative; display: block; width: 150px; height: 150px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--frec-card); box-shadow: 0 0 0 1px var(--frec-rule), 0 6px 18px rgba(26, 58, 92, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.frec-tile::after { pointer-events: none; content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background-image: var(--frec-glow); background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.25s ease; animation: frec-shimmer 6s linear infinite; }
.frec-tile:hover, .frec-tile:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 26px rgba(26, 58, 92, 0.22); }
.frec-tile:hover::after, .frec-tile:focus-visible::after { opacity: 1; }
.frec-tile:focus-visible { outline: 3px solid var(--frec-gold); outline-offset: 3px; }
.frec-thumb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; padding: 22px 0 0; }
.frec-thumb .fs-screen { transform-origin: top left; }
.frec-thumb-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0.8rem; text-align: center; font-size: 0.85rem; color: var(--frec-accent); }
.frec-ready .frec-thumb-fallback { display: none; }
.frec-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(26, 58, 92, 0.88);
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); animation: frec-pulse 2.2s ease-out infinite; }
.frec-play::before { pointer-events: none; content: ""; position: absolute; left: 18px; top: 14px; width: 0; height: 0; border-left: 14px solid #fffdf9; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.frec figcaption { font-size: 0.82rem; color: var(--frec-muted); margin-top: 0.4rem; line-height: 1.3; }
.frec figcaption strong { display: block; color: var(--frec-accent); font-weight: 500; }

/* The player. */
html.frec-lock { overflow: hidden; }
.frec-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.frec-overlay[hidden] { display: none; }
.frec-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, 0.55); backdrop-filter: blur(4px); animation: frec-fade 0.3s ease both; }
.frec-dialog { position: relative; width: min(680px, 96vw); max-height: 94vh; overflow: auto; background: var(--frec-paper); border-radius: 16px; padding: 0.9rem 1.1rem 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.frec-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.frec-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin: 0; padding: 0; border: 0; }
.frec-close, .frec-replay { font: inherit; font-weight: 500; border: 1px solid var(--frec-accent); background: transparent; color: var(--frec-accent); cursor: pointer; border-radius: 6px; }
.frec-close { width: 2.1rem; height: 2.1rem; font-size: 1.3rem; line-height: 1; }
.frec-replay { padding: 0.3rem 0.9rem; background: var(--frec-accent); color: #fffdf9; }
.frec-close:focus-visible, .frec-replay:focus-visible { outline: 3px solid var(--frec-gold); outline-offset: 2px; }
.frec-stage { margin-top: 0.7rem; overflow: hidden; }
.frec-stage .fs-screen { transform-origin: top left; }
.frec-foot { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; margin-top: 0.7rem; }
.frec-cap { grid-column: 1 / -1; min-height: 1.6em; font-size: 1.02rem; color: var(--frec-ink); font-weight: 400; }
.frec-meter { height: 4px; background: var(--frec-rule); border-radius: 4px; overflow: hidden; }
.frec-meter-fill { display: block; height: 100%; width: 0; background-image: var(--frec-glow); background-size: 300% 100%; transition: width 0.5s ease; }

/* Scenes: a mock product screen, 600px wide at natural size. */
.fs-screen { position: relative; width: 600px; min-height: 360px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--frec-rule); overflow: hidden; font-size: 15px; text-align: left; }
.fs-chrome { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; background: var(--frec-accent); color: #fffdf9; }
.fs-lights { width: 42px; height: 10px; background: radial-gradient(circle at 5px 5px, #e66 4px, transparent 5px), radial-gradient(circle at 21px 5px, #eb4 4px, transparent 5px), radial-gradient(circle at 37px 5px, #5b6 4px, transparent 5px); }
.fs-where { font-weight: 500; letter-spacing: 0.02em; }
.fs-body { padding: 1rem 1.1rem; display: grid; gap: 0.65rem; }
.fs-hidden { display: none !important; }
.fs-body > *:not(.fs-hidden), .fs-row > *:not(.fs-hidden) { animation: fs-in 0.35s ease both; }
.fs-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; color: var(--frec-ink); }
.fs-note { color: var(--frec-muted); }
.fs-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.fs-btn { display: inline-block; justify-self: start; padding: 0.45rem 0.9rem; border: 1px solid var(--frec-accent); color: var(--frec-accent); border-radius: 6px; font-weight: 500; transition: transform 0.15s ease, background 0.15s ease; }
.fs-primary { background: var(--frec-accent); color: #fffdf9; }
.fs-press { transform: scale(0.94); box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.35); }
.fs-field { display: grid; gap: 0.2rem; }
.fs-label { font-size: 0.8rem; color: var(--frec-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.fs-value { display: block; min-height: 2.1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--frec-rule); border-radius: 6px; background: var(--frec-card); color: var(--frec-ink); }
.fs-focus .fs-value { border-color: var(--frec-teal); box-shadow: 0 0 0 3px rgba(47, 125, 140, 0.18); }
.fs-choice { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; border: 1px solid var(--frec-rule); border-radius: 6px; }
.fs-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--frec-accent); flex: none; transition: background 0.2s ease; }
.fs-on { border-color: var(--frec-accent); background: var(--frec-accent-lt); }
.fs-on .fs-dot { background: var(--frec-accent); box-shadow: inset 0 0 0 2px #fff; }
.fs-card { border-left: 3px solid var(--frec-accent); background: var(--frec-accent-lt); padding: 0.65rem 0.85rem; border-radius: 0 6px 6px 0; }
.fs-card-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; font-weight: 500; }
.fs-card-body { color: var(--frec-muted); font-size: 0.92rem; margin-top: 0.25rem; }
.fs-pill { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #fff; border: 1px solid var(--frec-accent); color: var(--frec-accent); white-space: nowrap; }
.fs-pill-new { background: var(--frec-gold); border-color: var(--frec-gold); color: var(--frec-ink); animation: fs-pop 0.5s ease; }
.fs-list { display: grid; gap: 0.3rem; }
.fs-item { padding: 0.35rem 0.6rem; border: 1px solid var(--frec-rule); border-radius: 6px; background: var(--frec-card); }
.fs-steps { display: grid; gap: 0.35rem; }
.fs-step { padding: 0.35rem 0.6rem 0.35rem 1.9rem; position: relative; color: var(--frec-muted); }
.fs-step::before { pointer-events: none; content: ""; position: absolute; left: 0.5rem; top: 0.55rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--frec-rule); }
.fs-done { color: var(--frec-ink); }
.fs-done::before { border-color: var(--frec-teal); background: var(--frec-teal); }
.fs-bars { display: grid; gap: 0.35rem; }
.fs-bar { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.fs-track { height: 0.6rem; background: var(--frec-accent-lt); border-radius: 4px; overflow: hidden; }
.fs-fill { display: block; height: 100%; width: 0; background-image: var(--frec-glow); background-size: 300% 100%; transition: width 0.9s ease; }
.fs-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fs-cell { height: 18px; border-radius: 3px; background: var(--frec-accent-lt); transition: background 0.6s ease; }
.fs-lit .fs-cell[data-hot="1"] { background: rgba(47, 125, 140, 0.35); }
.fs-lit .fs-cell[data-hot="2"] { background: rgba(47, 125, 140, 0.6); }
.fs-lit .fs-cell[data-hot="3"] { background: rgba(26, 58, 92, 0.75); }
.fs-lit .fs-cell[data-hot="4"] { background: var(--frec-gold); }
.fs-cursor { position: absolute; left: 0; top: 0; width: 18px; height: 22px; z-index: 5; opacity: 0; pointer-events: none;
  background: var(--frec-ink); clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 58% 94%, 40% 56%, 74% 56%); filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.9));
  transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.2s ease; }
.fs-cursor-on { opacity: 1; }

@keyframes frec-shimmer { from { background-position: 0% 100%; } to { background-position: 300% 100%; } }
@keyframes frec-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(201, 162, 39, 0); } }
@keyframes frec-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fs-pop { 0% { transform: scale(0.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .frec, .frec *, .frec *::before, .frec *::after,
  .frec-overlay, .frec-overlay *, .frec-overlay *::before, .frec-overlay *::after { animation: none !important; transition: none !important; }
}