/* Story slide (#story): ShoreRoots photo strip and the list under it. Round 5.
   Strip: 12 photos from shoreroot.com, an endless slow loop (transform only, no blur on anything that moves).
   story.js clones the photos once for the seamless loop, pauses it off-screen, and switches
   the list's frosted blur on only after the rows have finished sliding in. */

/* ---------- A brighter space: soft static colour behind the slide ---------- */
.v2 #story { position: relative; overflow-x: clip; }
.v2 #story::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 30% at 18% 78%, rgb(95 214 200 / .2), transparent 70%),
    radial-gradient(34% 28% at 82% 84%, rgb(246 210 122 / .16), transparent 70%),
    radial-gradient(60% 34% at 50% 44%, rgb(168 237 228 / .08), transparent 75%);
}

/* ---------- The photo strip ---------- */
.v2 .sr-strip {
  --ph-h: 360px; --gap: 14px; --dur: 80s;
  position: relative; margin: 26px 0 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.v2 .sr-track { display: flex; gap: var(--gap); width: max-content; padding: 10px 0 18px; }
.v2 .sr-strip.loop .sr-track { animation: sr-slide var(--dur) linear infinite; animation-play-state: paused; will-change: transform; }
.v2 .sr-strip.loop.run .sr-track { animation-play-state: running; }
.v2 .sr-strip.loop.run:hover .sr-track, .v2 .sr-strip.loop.run:focus-within .sr-track { animation-play-state: paused; }
@keyframes sr-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - var(--gap) / 2), 0, 0); } }

.v2 .sr-ph {
  position: relative; flex: none; margin: 0; height: var(--ph-h); aspect-ratio: 3 / 4;
  border-radius: 22px; overflow: hidden; background: #0B3439;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 18px 34px -18px rgb(var(--warm-shadow) / .95);
}
.v2 .sr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* light caption on a soft dark fade, no blur (the strip moves) */
.v2 .sr-ph::after {
  content: ""; position: absolute; inset: 55% 0 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(3 20 24 / .78), rgb(3 20 24 / 0));
}
.v2 .sr-ph figcaption {
  position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px;
  font: 600 1rem/1.25 var(--sans, "Geist", sans-serif); color: #fff; letter-spacing: .005em;
  text-shadow: 0 1px 10px rgb(0 0 0 / .55);
}
.v2 .sr-ph figcaption::before {
  content: ""; display: block; width: 22px; height: 3px; border-radius: 3px; margin-bottom: 8px;
  background: var(--sr-acc, #A8EDE4);
}
.v2 .sr-ph:nth-child(3n+2) { --sr-acc: #F6D27A; }
.v2 .sr-ph:nth-child(3n) { --sr-acc: #5FD6C8; }

/* Reduced motion: a still row you can scroll sideways */
@media (prefers-reduced-motion: reduce) {
  .v2 .sr-strip { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .v2 .sr-track { padding-inline: var(--pad, 20px); }
  .v2 .sr-ph { scroll-snap-align: center; }
  .v2 .sr-strip .sr-track { animation: none !important; }
}

/* ---------- The list: clear frosted rows, bolder, brighter ---------- */
.v2 #story .did { gap: 10px; margin: 0 0 12px; }
.v2 #story .did li.frost-clear { border-radius: 20px; padding: 14px 16px; }
/* moving glass must not blur: blur switches on once the rows have settled (story.js adds .settled) */
.v2 #story .did li.frost-clear { -webkit-backdrop-filter: none; backdrop-filter: none; }
.v2 #story .did b { font-weight: 700; color: #fff; letter-spacing: -.005em; }
.v2 #story .did span { color: var(--ink-2); }
.v2 #story .did .ib {
  color: #04161B; border: 0;
  background: linear-gradient(160deg, #C9F5EF, #5FD6C8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 6px 16px -6px rgb(95 214 200 / .55);
}
.v2 #story .did li:nth-child(2) .ib, .v2 #story .did li:nth-child(5) .ib {
  background: linear-gradient(160deg, #FCE7AE, #F6C343);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 6px 16px -6px rgb(246 195 67 / .55);
}

/* the N8tiveNode box: textured glass, warm and bright */
.v2 #story .now {
  border-color: rgb(246 210 122 / .55);
  background: var(--grain-light) 0 0 / 140px, linear-gradient(150deg, rgb(246 210 122 / .2), rgb(25 179 166 / .14) 60%, rgb(8 44 50 / .6));
}
.v2 #story .now h3 { font-weight: 500; color: #fff; }
.v2 #story .now h3 em { font-style: normal; color: #F6D27A; text-shadow: 0 0 22px rgb(246 210 122 / .35); }
.v2 #story .now p { color: var(--ink); opacity: .9; }

/* ---------- Phones ---------- */
@media (max-width: 1023px) {
  .v2 .sr-strip { --ph-h: min(400px, 62vh); --dur: 70s; margin: 22px 0 26px; }
  /* phones: keep the frosted look but no live blur (5 rows on screen at once) */
  .v2 #story .did li.frost-clear { background: linear-gradient(160deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05) 55%, rgb(95 214 200 / .08)), rgb(10 52 58 / .55); }
}

/* ---------- Projector: strip on top, compact 3 x 2 grid below, fits one screen ---------- */
@media (min-width: 1024px) {
  .v2.talk #story { padding-top: 4vh; padding-bottom: 11vh; }
  .v2.talk #story .wrap { display: block; }
  .v2.talk #story .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 4vw; margin: 0; }
  .v2.talk #story .head .h2 { margin: 0; white-space: nowrap; }
  .v2.talk #story .head .lead { max-width: 46ch; padding: 0 0 .5rem; font-size: 1.2rem; }

  .v2.talk .sr-strip { --ph-h: 34vh; --gap: 1.1rem; --dur: 95s; margin: 2.2vh 0 1.8vh; }
  .v2.talk .sr-track { padding: .6rem 0 1rem; }
  .v2.talk .sr-ph { border-radius: 1.5rem; }
  .v2.talk .sr-ph figcaption { left: 1.2rem; right: 1.2rem; bottom: 1.1rem; font-size: 1.12rem; }
  .v2.talk .sr-ph figcaption::before { width: 1.6rem; height: .2rem; margin-bottom: .55rem; }

  .v2.talk #story .sr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .v2.talk #story .did { display: contents; grid-area: auto; }
  .v2.talk #story .did li, .v2.talk #story .now { grid-area: auto; }
  .v2.talk #story .did li.frost-clear { grid-template-columns: 2.7rem 1fr; gap: 1rem; padding: .8rem 1.2rem; border-radius: 1.3rem; align-items: center; }
  .v2.talk #story .did.settled li.frost-clear, .v2.talk #story .sr-grid.settled .did li.frost-clear {
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  }
  .v2.talk #story .did .ib { display: grid; place-items: center; }
  .v2.talk #story .ib { width: 2.7rem; height: 2.7rem; border-radius: .85rem; }
  .v2.talk #story .ib .ic { width: 1.3rem; height: 1.3rem; }
  .v2.talk #story .did b { font-size: 1.12rem; line-height: 1.3; }
  .v2.talk #story .did div span { display: block; font-size: .95rem; line-height: 1.35; margin-top: .15rem; }
  .v2.talk #story .now { text-align: left; align-items: flex-start; display: flex; flex-direction: column; justify-content: center; gap: .35rem; margin: 0; padding: 1rem 1.4rem; border-radius: 1.3rem; }
  .v2.talk #story .now h3 { text-align: left; font-size: 1.75rem; line-height: 1; margin: 0; }
  .v2.talk #story .now p { font-size: .92rem; line-height: 1.35; }
}