/* Plot Premium stories: shared by /pricing (on ink) and the home page
   (on cream, with .stories--light). One benefit at a time: copy and a
   step switcher on one side, the matching product visual on the other. */
/* Steps auto-advance every 6s unless motion is reduced. */
.stories { background: var(--ink); color: var(--bg); padding-top: 2rem; }
.stories h2 { font-size: clamp(2.4rem, 4.2vw, 3.5rem); color: var(--bg); margin-bottom: 1.1rem; }
.stories-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 5rem;
  align-items: center;
}
.stories-copy { max-width: 560px; min-width: 0; }
.stories-stage { position: relative; margin-bottom: 1.6rem; }
.stories-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.stories-slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.stories-slide h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.5rem; }
.stories-slide h3 s { text-decoration-thickness: 3px; text-decoration-color: var(--fill); color: #d9d1c4; }
.stories-slide p { font-size: 1.2rem; font-weight: 400; line-height: 1.45; color: #d9d1c4; }
.stories-steps { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 1.6rem; }
.stories-step { flex: 1 1 72px; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: #d9d1c4; font-family: var(--sans); }
.stories-step:focus-visible { outline: 2px solid var(--fill); outline-offset: 4px; border-radius: 4px; }
.stories-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.16); overflow: hidden; margin-bottom: 8px; }
.stories-bar i { display: block; height: 100%; width: 0; background: var(--fill); }
.stories-step[aria-pressed="true"] { color: var(--bg); }
.stories-step[aria-pressed="true"] .stories-bar i { width: 100%; transition: width 6s linear; }
.stories-step span:last-child { display: block; font-size: 0.74rem; font-weight: 600; line-height: 1.2; }
/* The cards stack in one grid cell and cross-fade: the leaving card
   eases up and out while the next eases up and in. */
.stories-visuals { display: grid; justify-content: center; align-items: center; min-height: 420px; }
.stories-visuals .vis {
  grid-area: 1 / 1;
  justify-self: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.985);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.55s;
  pointer-events: none;
}
.stories-visuals .vis.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.12s, 0.12s, 0s; pointer-events: auto; }
.stories-visuals .vis.is-leaving { opacity: 0; visibility: visible; transform: translateY(-12px) scale(0.985); transition-delay: 0s; }
.stories-also {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.stories-also-label { margin-right: 6px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #d9d1c4; }
.also-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  color: var(--bg);
  font-size: 0.9rem;
  font-weight: 500;
}
.also-pill svg { width: 16px; height: 16px; fill: none; stroke: var(--fill); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The product visuals: one cream card each. Every animation below
   ends on the card's resting state; reduced motion skips straight to it. */
.vis { width: 100%; max-width: 440px; padding: 20px 22px; background: #fffaf3; color: var(--text); border-radius: 24px; font-size: 0.9rem; font-weight: 400; }
.vis-meta { display: block; font-size: 0.8rem; color: var(--text-secondary); }
.vis-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.poster { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: var(--surface); }
.av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 0.7rem; flex-shrink: 0; }
.av-you { background: var(--fill); }
.av-them { background: var(--sage); }
@keyframes vis-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Just Decide: the three chips select in turn, the stack shuffles and
   settles on tonight's pick, then the play pill presses. */
.pf-q { margin-bottom: 10px; }
.pf-label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 5px; }
.pf-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-seg span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); }
.pf-seg .on { background: var(--fill); color: var(--text); animation: pf-chip 0.35s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes pf-chip { from { background: var(--surface); color: var(--text-secondary); transform: scale(0.96); } 60% { transform: scale(1.04); } to { background: var(--fill); color: var(--text); transform: none; } }
.pf-pick { display: flex; gap: 14px; align-items: center; margin-top: 18px; }
.pf-shuffle { position: relative; width: 68px; flex-shrink: 0; }
.pf-shuffle .poster { width: 68px; }
.pf-c { position: absolute; inset: 0; opacity: 0; animation: pf-card 0.9s var(--ease) both; animation-delay: calc(2s + var(--i) * 0.12s); }
@keyframes pf-card { 0% { opacity: 0; transform: translate(0, 6px) rotate(0); } 30% { opacity: 1; transform: translate(calc(var(--i) * 10px - 20px), -6px) rotate(calc(var(--i) * 6deg - 12deg)); } 100% { opacity: 0; transform: translate(0, 0) rotate(0); } }
.pf-final { position: relative; animation: pf-final 0.6s var(--ease) 2.7s both; }
@keyframes pf-final { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.pf-info { animation: vis-rise 0.5s var(--ease) 2.9s both; }
.pf-info strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.pf-info .vis-meta { margin: 2px 0 8px; }
.pf-play { animation: pf-press 0.5s var(--ease) 3.8s both; }
@keyframes pf-press { 0%, 100% { transform: none; } 40% { transform: scale(0.94); background: var(--ink-hover); } }

/* Watch together: the two copies of the shared title travel out of
   their rows and meet in the middle (as the old homepage did), a ring
   lands around them, the rest of the rows dim, then the outcome lands. */
.wt-board { position: relative; }
.wt-list + .wt-list { margin-top: 14px; }
.wt-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 500; margin-bottom: 8px; }
.wt-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wt-row .poster { border-radius: 6px; }
.wt-row .poster:not(.is-match) { opacity: 0.45; animation: wt-dim 0.6s var(--ease) 1s both; }
@keyframes wt-dim { from { opacity: 1; } to { opacity: 0.45; } }
/* --dx/--dy: how far each copy travels to the meeting point, set per copy below. */
.wt-row .is-match { position: relative; z-index: 2; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.12); animation: wt-travel 0.9s var(--ease) 0.9s both; }
@keyframes wt-travel { from { transform: none; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.12); } }
.wt-list:first-child .is-match { --dx: calc(200% + 16px - 7px); --dy: calc(50% + 24px); --r: -5deg; }
.wt-list:nth-child(2) .is-match { --dx: 7px; --dy: calc(-50% - 24px); --r: 5deg; }
.wt-ring { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 3px solid var(--accent); z-index: 1; pointer-events: none; animation: wt-ring 0.6s var(--ease) 1.7s both; }
@keyframes wt-ring { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.wt-both { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; transform: translate(-50%, 46px); animation: vis-rise 0.4s var(--ease) 2.1s both; }
.wt-both .av { border: 2px solid #fffaf3; }
.wt-both .av + .av { margin-left: -8px; }
.wt-outcome { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--sage); animation: vis-rise 0.5s var(--ease) 2.4s both; }
.wt-outcome strong { display: block; font-size: 0.92rem; }
.wt-outcome .vis-meta { color: #3f4a1c; }

/* Your watch profile: the numbers count up (script), the bars grow,
   Most rewatched flips through two titles before settling. */
.wp-top { margin-bottom: 14px; }
.wp-posters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wp-posters .poster { border-radius: 6px; animation: vis-rise 0.45s var(--ease) both; animation-delay: calc(var(--i) * 0.1s); }
.wp-top-label { display: block; margin-top: 8px; font-size: 0.78rem; color: var(--text-secondary); }
.wp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.wp-stat { padding: 12px; border-radius: 14px; background: var(--surface); }
.wp-stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wp-stat span { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--text-secondary); }
.wp-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.wp-bar { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 10px; font-size: 0.8rem; }
.wp-bar i { display: block; height: 10px; border-radius: 5px; background: var(--fill); width: var(--w, 50%); transform-origin: left; animation: wp-grow 0.7s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes wp-grow { from { transform: scaleX(0); } to { transform: none; } }
.wp-bar em { font-style: normal; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wp-taste { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--accent-dim); font-size: 0.85rem; }
.wp-thumb { width: 30px; border-radius: 4px; flex-shrink: 0; }
.wp-taste > span { flex: none; white-space: nowrap; }
.wp-taste span { color: var(--text-secondary); }
.wp-taste b { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; text-align: right; }
.wp-taste .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; flex: none; }
.wp-flip { position: relative; height: 1.3em; overflow: hidden; }
.wp-flip span { display: block; height: 1.3em; line-height: 1.3em; white-space: nowrap; }
.wp-flip span:first-child { animation: wp-flip 1.6s steps(1, end) 1.6s both; }
@keyframes wp-flip { 0% { margin-top: 0; } 50% { margin-top: -1.3em; } 100% { margin-top: -2.6em; } }
.wp-flip span:first-child { margin-top: -2.6em; }

/* Taste match: the avatars meet, the score counts up (script), the
   posters and bars follow, and the disagreement lands last. */
.tm-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tm-pair { display: flex; }
.tm-pair .av { width: 36px; height: 36px; font-size: 0.95rem; border: 2px solid #fffaf3; animation: tm-meet 0.7s var(--ease) both; }
.tm-pair .av + .av { margin-left: -10px; --from: 14px; }
.tm-pair .av-you { --from: -14px; }
@keyframes tm-meet { from { transform: translateX(var(--from, 0)); } to { transform: none; } }
.tm-num { display: block; font-family: var(--display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tm-cap { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.tm-row { margin-bottom: 12px; }
.tm-label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 6px; }
.tm-posters { display: flex; gap: 6px; }
.tm-posters .poster { width: 56px; border-radius: 6px; animation: vis-rise 0.45s var(--ease) both; animation-delay: var(--d, 0s); }
.tm-genres { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tm-legend { display: flex; gap: 14px; justify-content: flex-end; font-size: 0.72rem; color: var(--text-secondary); }
.tm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tm-legend i { width: 10px; height: 10px; border-radius: 3px; }
.tm-genre { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px; align-items: center; font-size: 0.8rem; }
.tm-genre span { grid-row: 1 / 3; }
.tm-genre i, .tm-legend i.is-you, .tm-legend i.is-them { display: block; }
.tm-genre i { height: 8px; border-radius: 4px; width: var(--w, 50%); transform-origin: left; animation: wp-grow 0.6s var(--ease) both; animation-delay: var(--d, 0s); }
.is-you { background: var(--fill); }
.is-them { background: var(--sage); }
.tm-disagree { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); font-size: 0.8rem; animation: vis-rise 0.5s var(--ease) 3.3s both; }
.tm-disagree .tm-label { grid-column: 1 / -1; margin-bottom: 2px; color: var(--text-secondary); }
.tm-disagree b { font-family: var(--display); font-weight: 700; font-size: 0.95rem; }
.tm-ratings { display: flex; gap: 12px; justify-content: flex-end; white-space: nowrap; }
.tm-ratings span { color: var(--text-secondary); }
.tm-stars { display: inline-block; font-style: normal; color: var(--accent); letter-spacing: 0.04em; animation: tm-stars 0.4s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes tm-stars { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Make it yours: the whole card re-skins every 1.5s through the app's five
   theme families (Cream, Sage, Mist, Blush, Plum). Each swatch, icon and
   widget reads its own family's colours from --t-* set inline, and the
   selected ring steps through them on the same clock. */
.stories-visuals .vis--yours.is-active { animation: my-skin 7.5s steps(1, end) 1s infinite; }
@keyframes my-skin {
  0%  { background: #fffaf3; color: #292924; --skin-fill: #FF88C8; --skin-surface: #F1E9DC; }
  20% { background: #EDF2DA; color: #20261A; --skin-fill: #BFDA5E; --skin-surface: #E3EACA; }
  40% { background: #EBF0F4; color: #1B232A; --skin-fill: #A8CBEE; --skin-surface: #E1E8EE; }
  60% { background: #FAE8ED; color: #2B1A20; --skin-fill: #8FD6CB; --skin-surface: #F6DCE3; }
  80% { background: #F0EBF8; color: #221B2E; --skin-fill: #F2C04F; --skin-surface: #E7E0F2; }
}
.vis--yours { --skin-fill: #FF88C8; --skin-surface: #F1E9DC; }
.my-themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.my-theme { border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 5px; border: 2px solid transparent; background: var(--t-bg); color: var(--t-ink); animation: my-ring 7.5s steps(1, end) 1s infinite; animation-delay: calc(1s + var(--i) * 1.5s); }
.my-theme i { display: block; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.08); }
.my-theme i:first-child { width: 60%; background: var(--t-fill); }
.my-theme small { font-size: 0.68rem; font-weight: 600; margin-top: 3px; }
/* One keyframe set: the ring is on for the first fifth of the cycle, and
   each item's delay shifts that window to its own family. Until its delay
   runs out an item shows its base state: ringed for Cream, bare for the rest. */
@keyframes my-ring { 0% { border-color: var(--t-ink); } 20% { border-color: transparent; } }
.my-theme[style*="--i:0"], .my-icon[style*="--i:0"] { border-color: var(--t-ink); }
.my-icons { display: flex; gap: 8px; align-items: center; }
.my-icon { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 0.78rem; letter-spacing: -0.04em; background: var(--t-bg); color: var(--t-ink); border: 2px solid transparent; animation: my-ring 7.5s steps(1, end) 1s infinite; animation-delay: calc(1s + var(--i) * 1.5s); }
.my-icons small { margin-left: auto; font-size: 0.78rem; color: inherit; opacity: 0.6; }
.my-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.my-widget { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: var(--skin-surface); color: inherit; }
.my-widget .poster { width: 44px; border-radius: 6px; flex-shrink: 0; }
.my-widget b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; line-height: 1.15; }
.my-widget small { display: block; font-size: 0.7rem; opacity: 0.65; }
.my-widget small:first-child { color: var(--skin-fill); opacity: 1; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.62rem; filter: saturate(1.2) brightness(0.75); }

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

@media (max-width: 900px) {
  .stories-inner { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .stories-visuals { min-height: 0; grid-template-columns: minmax(0, 1fr); }
}

/* Light: the same stories on the page cream (home page). The cards gain a
   hairline and a soft shadow so they still lift off the background. */
.stories--light { background: var(--bg); color: var(--text); }
.stories--light h2 { color: var(--text); }
.stories--light .stories-slide h3 s { color: var(--text-secondary); }
.stories--light .stories-slide p { color: var(--text-secondary); }
.stories--light .stories-step { color: var(--text-secondary); }
.stories--light .stories-step[aria-pressed="true"] { color: var(--text); }
.stories--light .stories-bar { background: rgba(41,41,36,0.12); }
.stories--light .stories-also { border-top-color: rgba(41,41,36,0.1); }
.stories--light .stories-also-label { color: var(--text-secondary); }
.stories--light .also-pill { background: var(--surface); color: var(--text); }
.stories--light .also-pill svg { stroke: var(--accent); }
.stories--light .vis { border: 1px solid rgba(41,41,36,0.08); box-shadow: 0 24px 60px rgba(41,41,36,0.12); }