/* Slide 2 — "The real problem". A founder's week on a tilted neon board: every task gets checked off while the
   "Film content" card is shoved one day right, again and again, until it lands in Next week ("Moved 6 times").
   The board is a size container, so every piece inside is sized in cqw and scales like one picture.
   Resting state = the finished scene; .nx-s2.is-playing (set by js/app/slides/s2.js) hides what hasn't happened yet. */

/* ---------- copy ---------- */
.nx-s2 .nx-split{ grid-template-columns: minmax(320px, 0.55fr) minmax(0, 1fr); gap: clamp(8px, .6vw, 16px); }
.nx-s2 .nx-h2{ font-size: clamp(2.6rem, 4.9vw, 5.2rem); text-wrap: wrap; }
.nx-s2 .nx-copy-block{ max-width: 500px; }
.nx-s2 .nx-s2-l1{ white-space: nowrap; }
.nx-s2 .nx-s2-clone{ -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nx-s2 .nx-lede{ max-width: 23.5em; }

/* ---------- the stage ---------- */
.nx-s2 .nx-s2-wrap{ position:relative; perspective: 1300px; margin-right: clamp(0px, 4vw, 72px); } /* leaves the right gutter to the dot rail */
.nx-s2 .nx-s2-stage{ --nx-r: 28px; --nx-neon-w: 6px; --nx-neon: linear-gradient(100deg, #38b6ff 0%, #4a80ff 22%, #7b5cff 48%, #b24dff 70%, #ff3fb4 100%); container-type: inline-size; padding: clamp(28px, 3.2vw, 46px) clamp(20px, 2.2vw, 32px) clamp(26px, 2.8vw, 40px);
  transform: rotateY(-24deg) rotateX(4deg) rotateZ(-.6deg); transform-origin: 6% 50%;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.85), 0 0 70px -10px rgba(93,123,255,.55), 0 0 130px -20px rgba(178,77,255,.45), 0 0 60px -20px rgba(255,63,180,.5); }

.nx-s2 .nx-s2-board{ position:relative; display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.22fr); gap: 1.3cqw; height: 47cqw; }
.nx-s2 .nx-s2-col{ position:relative; display:flex; flex-direction:column; gap: 1.2cqw; min-width:0; padding: 1.5cqw .6cqw .7cqw; border-radius: 1.5cqw;
  background: linear-gradient(180deg, rgba(34,38,92,.42), rgba(20,22,58,.34)); border: 1px solid rgba(160,170,255,.16); transition: border-color .4s ease, box-shadow .4s ease; }
.nx-s2 .nx-s2-day{ display:block; font-weight:500; font-size: max(12px, 1.75cqw); letter-spacing:.03em; text-transform:uppercase; color: #8ea4ff; padding: 0 .5cqw .6cqw; transition: color .3s ease, text-shadow .3s ease; }
.nx-s2 .nx-s2-col.is-today{ border-color: rgba(63,214,255,.55); box-shadow: 0 0 22px -8px rgba(63,214,255,.7), inset 0 0 18px -12px rgba(63,214,255,.8); }
.nx-s2 .nx-s2-col.is-today .nx-s2-day{ color:#fff; text-shadow: 0 0 10px rgba(63,214,255,.9); }

/* Next week: the red holding pen */
.nx-s2 .nx-s2-next{ border-color: rgba(255,90,80,.5); background: linear-gradient(180deg, rgba(110,28,64,.42), rgba(70,18,48,.3));
  box-shadow: 0 0 30px -12px rgba(255,75,62,.6), inset 0 0 26px -16px rgba(255,75,62,.7); }
.nx-s2 .nx-s2-next .nx-s2-day{ text-transform:none; letter-spacing:0; font-size: max(13px, 2.35cqw); color: var(--nx-ink); }
.nx-s2 .nx-s2-drop{ flex:1; border-radius: 1.2cqw; border:1px solid rgba(255,110,100,.24); background: rgba(255,75,62,.07); }

/* a done task: frosted glass card + green check */
.nx-s2 .nx-s2-task{ position:relative; min-height: 10.6cqw; padding: 1cqw .7cqw 3.2cqw; border-radius: 1.1cqw; font-size: max(12px, 1.98cqw); line-height:1.25; letter-spacing:-.015em; color: var(--nx-ink);
  background: linear-gradient(180deg, rgba(62,68,138,.62), rgba(40,44,100,.55)); border:1px solid rgba(170,180,255,.28);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); overflow-wrap: anywhere; }
.nx-s2 .nx-s2-check{ position:absolute; right: .9cqw; bottom: .8cqw; width: 2.6cqw; height: 2.6cqw; border-radius:50%; background: #28d17c;
  box-shadow: 0 0 12px rgba(40,209,124,.65); }
.nx-s2 .nx-s2-check::after{ content:''; position:absolute; left: 34%; top: 20%; width: 26%; height: 44%; border: solid #06301a; border-width: 0 .32cqw .32cqw 0; transform: rotate(40deg); }

/* the Film content card, its ghost trail, its tag and the hand dragging it */
.nx-s2 .nx-s2-film, .nx-s2 .nx-s2-ghost{ position:absolute; left:0; top:0; z-index:3; transform: translate(var(--x), var(--y)); }
.nx-s2 .nx-s2-ghost, .nx-s2 .nx-s2-card{ display:flex; align-items:center; gap: 1.2cqw; width: 23cqw; height: 8.6cqw; padding: 0 1.5cqw; border-radius: 1.3cqw; white-space:nowrap; overflow:hidden; }
.nx-s2 .nx-s2-ghost{ transform: translate(var(--x), var(--y)) rotate(-6deg); font-size: max(12px, 2cqw); color: rgba(243,239,231,.8);
  background: rgba(120,130,210,.16); border:1px solid rgba(200,205,255,.34); transition: opacity .5s ease; }
.nx-s2 .nx-s2-ghost i, .nx-s2 .nx-s2-card i{ flex:none; width: 2.3cqw; height: 2.3cqw; border-radius:50%; background: #ff4b3e; }
.nx-s2 .nx-s2-ghost i{ box-shadow: 0 0 10px rgba(255,75,62,.9); }
.nx-s2 .nx-s2-ghost[data-pos="0"]{ opacity:.24; } .nx-s2 .nx-s2-ghost[data-pos="1"]{ opacity:.32; } .nx-s2 .nx-s2-ghost[data-pos="2"]{ opacity:.4; }
.nx-s2 .nx-s2-ghost[data-pos="3"]{ opacity:.48; } .nx-s2 .nx-s2-ghost[data-pos="4"]{ opacity:.58; }
.nx-s2 .nx-s2-film{ z-index:4; }
.nx-s2 .nx-s2-card{ position:relative; z-index:1; transform: rotate(-6deg); font-size: max(12px, 2.55cqw); font-weight:500; color:#fff;
  background: linear-gradient(180deg, rgba(64,20,44,.96), rgba(38,14,34,.96)); border: 2px solid #ff6a5c;
  box-shadow: 0 0 0 1px rgba(255,120,110,.35), 0 0 22px rgba(255,75,62,.75), 0 0 60px -10px rgba(255,75,62,.7), inset 0 0 18px -6px rgba(255,75,62,.6); }
.nx-s2 .nx-s2-card i{ width: 2.7cqw; height: 2.7cqw; box-shadow: 0 0 0 .7cqw rgba(255,75,62,.22), 0 0 14px rgba(255,75,62,.9); }
.nx-s2 .nx-s2-tag{ position:absolute; left: 4cqw; top: 12.4cqw; white-space:nowrap; font-size: max(12px, 1.8cqw); color:#ff8076; padding: .55cqw 1.2cqw; border-radius:999px;
  border: 1.5px solid rgba(255,75,62,.85); background: rgba(70,12,28,.55); box-shadow: 0 0 16px -4px rgba(255,75,62,.8); }
.nx-s2 .nx-s2-count{ font-weight:inherit; }
.nx-s2 .nx-s2-hand{ position:absolute; z-index:2; left: 21cqw; top: -2.4cqw; width: 11.5cqw; /* ends at the frame, as in S2A, clear of the dot rail */ height:auto; pointer-events:none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.5));
  /* the asset's wrist is a hard crop on its right edge; fade it so the arm never shows a cut line when the edge lands on screen */
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 92%); mask-image: linear-gradient(to right, #000 62%, transparent 92%); }

/* trail positions (top-left of the card, in board cqw): Mon → Tue → Wed → Thu → Fri → Next week */
.nx-s2 [data-pos="0"]{ --x: .4cqw;  --y: 30.4cqw; }
.nx-s2 [data-pos="1"]{ --x: 12.3cqw; --y: 27.6cqw; }
.nx-s2 [data-pos="2"]{ --x: 28.7cqw; --y: 24.8cqw; }
.nx-s2 [data-pos="3"]{ --x: 45cqw;  --y: 22cqw; }
.nx-s2 [data-pos="4"]{ --x: 61.3cqw; --y: 19.2cqw; }
.nx-s2 [data-pos="5"]{ --x: 77.4cqw; --y: 15.6cqw; }

/* the stat chip */
.nx-s2 .nx-s2-stat{ display:flex; align-items:center; gap: 2.2cqw; width: fit-content; min-width: 40cqw; margin-top: 2.2cqw; padding: 2cqw 4cqw 2cqw 3.2cqw; border-radius: 3.6cqw;
  background: linear-gradient(90deg, rgba(42,46,112,.66), rgba(46,34,104,.62)); border: 1.5px solid rgba(150,130,255,.5);
  box-shadow: 0 0 28px -10px rgba(123,99,255,.85), inset 0 1px 0 rgba(255,255,255,.07); }
.nx-s2 .nx-s2-bars{ flex:none; width: 5cqw; height: 5cqw; fill: url(#nx-s2-bar); filter: drop-shadow(0 0 6px rgba(123,99,255,.8)); }
.nx-s2 .nx-s2-stat-label{ font-size: max(12px, 2.55cqw); color: var(--nx-ink); white-space:nowrap; }
.nx-s2 .nx-s2-zero{ font-size: max(30px, 7.4cqw); line-height:1; font-weight:400; color:#ff5a5f; text-shadow: 0 0 18px rgba(255,75,62,.7); margin-left: .6cqw; }

/* hotter neon than the shared recipe: the mock's rim reads white-hot with a wide bloom and a lit floor */
.nx-s2 .nx-s2-stage::before{ filter: brightness(1.15) saturate(1.5); }
.nx-s2 .nx-s2-stage::after{ inset:-6px; padding: calc(var(--nx-neon-w) + 6px); filter: blur(24px) brightness(1.7) saturate(1.8); }
.nx-s2 .nx-floor-glow{ bottom:-96px; left:6%; right:2%; height:140px; background: radial-gradient(50% 50% at 50% 45%, rgba(155,92,255,.55), rgba(63,214,255,.18) 55%, transparent 76%); }

/* ---------- the animation (driven by s2.js; nothing here applies at rest) ---------- */
.nx-s2.is-playing .nx-s2-task{ transition: opacity .45s ease, transform .5s cubic-bezier(.2,.9,.3,1.2); }
.nx-s2.is-playing .nx-s2-task:not(.is-in){ opacity:0; transform: translateY(1.6cqw) scale(.95); }
.nx-s2.is-playing .nx-s2-check{ transition: opacity .25s ease, transform .4s cubic-bezier(.3,1.6,.5,1); }
.nx-s2.is-playing .nx-s2-task:not(.is-done) .nx-s2-check{ opacity:0; transform: scale(.2); }
.nx-s2.is-playing .nx-s2-ghost:not(.is-in){ opacity:0; }
.nx-s2.is-playing .nx-s2-film{ transition: transform .62s cubic-bezier(.34,1.3,.5,1), opacity .4s ease; }
.nx-s2.is-playing .nx-s2-film.is-drag{ transition: transform 1.05s cubic-bezier(.55,0,.25,1), opacity .4s ease; }
.nx-s2.is-playing .nx-s2-film.is-snap{ transition:none; }
.nx-s2.is-playing .nx-s2-hand{ transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.nx-s2.is-playing .nx-s2-hand:not(.is-in){ opacity:0; transform: translate(5cqw, 4cqw) rotate(6deg); }
.nx-s2.is-playing .nx-s2-tag{ transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.nx-s2.is-playing .nx-s2-tag.is-bump{ transform: scale(1.14); }
.nx-s2.is-playing .nx-s2-next{ transition: border-color .5s ease, box-shadow .5s ease, background .5s ease; }
.nx-s2.is-playing .nx-s2-next:not(.is-hot){ border-color: rgba(255,90,80,.22); box-shadow:none; background: linear-gradient(180deg, rgba(60,24,64,.32), rgba(36,18,48,.26)); }
.nx-s2.is-playing.is-clearing .nx-s2-film, .nx-s2.is-playing.is-clearing .nx-s2-ghost{ opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .nx-s2.is-playing .nx-s2-zero{ animation: nx-s2-pulse 2.2s ease-in-out infinite; }
  .nx-s2.is-playing .nx-s2-card i{ animation: nx-s2-blink 1.6s ease-in-out infinite; }
}
@keyframes nx-s2-pulse{ 50%{ opacity:.55; text-shadow: 0 0 30px rgba(255,75,62,1); } }
@keyframes nx-s2-blink{ 50%{ opacity:.45; } }

/* ---------- smaller screens: flat board under the copy ---------- */
@media (max-width: 1080px){
  .nx-s2 .nx-split{ grid-template-columns: minmax(0, 1fr); }
  .nx-s2 .nx-copy-block{ max-width: 620px; }
  .nx-s2 .nx-s2-wrap{ perspective:none; margin-right:0; }
  .nx-s2 .nx-s2-stage{ transform:none; }
  .nx-s2 .nx-s2-hand{ left: 20.4cqw; top: -1.6cqw; width: 10cqw; }
}
/* phones and narrow tablets: the week folds into a 2 × 3 grid (Mon Tue / Wed Thu / Fri Next week) so text stays legible */
@media (max-width: 820px){
  .nx-s2 .nx-s2-br{ display:none; }
  .nx-s2 .nx-s2-stage{ --nx-r: 20px; --nx-neon-w: 3px; padding: 18px 14px 16px; }
  /* --row: a day cell's height; capped so tablets (≈340px cells at 768) don't turn the week into a scroll of empty boxes */
  .nx-s2 .nx-s2-board{ --row: min(62cqw, 210px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, var(--row)); gap: 3cqw; height:auto; }
  .nx-s2 .nx-s2-col{ gap: 8px; padding: 10px 8px 8px; border-radius: 12px; }
  .nx-s2 .nx-s2-day{ font-size: 12px; padding: 0 2px 2px; }
  .nx-s2 .nx-s2-next .nx-s2-day{ font-size: 15px; }
  .nx-s2 .nx-s2-drop{ border-radius: 10px; }
  .nx-s2 .nx-s2-task{ min-height:0; padding: 8px 34px 8px 10px; border-radius: 10px; font-size: 13px; }
  .nx-s2 .nx-s2-check{ width: 18px; height: 18px; right: 8px; bottom: auto; top: 50%; margin-top: -9px; }
  .nx-s2 .nx-s2-check::after{ border-width: 0 2px 2px 0; }
  .nx-s2 .nx-s2-ghost, .nx-s2 .nx-s2-card{ width: 44cqw; height: 38px; gap: 8px; padding: 0 12px; border-radius: 10px; }
  .nx-s2 .nx-s2-ghost{ font-size: 13px; transform: translate(var(--x), var(--y)) rotate(-3deg); }
  .nx-s2 .nx-s2-card{ font-size: 14px; transform: rotate(-3deg); }
  .nx-s2 .nx-s2-ghost i, .nx-s2 .nx-s2-card i{ width: 12px; height: 12px; }
  .nx-s2 .nx-s2-card i{ box-shadow: 0 0 0 4px rgba(255,75,62,.22), 0 0 10px rgba(255,75,62,.9); }
  .nx-s2 .nx-s2-tag{ z-index:2; left:auto; right: -4px; top: -14px; font-size: 12px; padding: 2px 9px; background: #3a0e1e; }
  .nx-s2 .nx-s2-hand{ display:none; }
  .nx-s2 [data-pos="0"]{ --x: 2cqw;    --y: calc(var(--row) - 46px); }
  .nx-s2 [data-pos="1"]{ --x: 53.5cqw; --y: calc(var(--row) - 46px); }
  .nx-s2 [data-pos="2"]{ --x: 2cqw;    --y: calc(2 * var(--row) + 3cqw - 46px); }
  .nx-s2 [data-pos="3"]{ --x: 53.5cqw; --y: calc(2 * var(--row) + 3cqw - 46px); }
  .nx-s2 [data-pos="4"]{ --x: 2cqw;    --y: calc(3 * var(--row) + 6cqw - 46px); }
  .nx-s2 [data-pos="5"]{ --x: 53.5cqw; --y: calc(2 * var(--row) + 6cqw + 52px); }
  .nx-s2 .nx-s2-stat{ width:100%; min-width:0; gap: 12px; margin-top: 14px; padding: 10px 18px; border-radius: 16px; }
  .nx-s2 .nx-s2-bars{ width: 24px; height: 24px; }
  .nx-s2 .nx-s2-stat-label{ font-size: 15px; }
  .nx-s2 .nx-s2-zero{ font-size: 36px; }
  .nx-s2 .nx-floor-glow{ bottom:-54px; }
}