/* Sigh Club · classes on a loop (2026-10-27). Olga sent a motion-design reel (cards on a curved 3D ribbon, one pulled out with
   its details) and asked: "I want to build this animation with moving cards for my landing page with the classes moving like this in
   a loop". On the front page between the free class and Our Ahhpp, on the beige paper (.loop--cream, the page's own --page)
   (Olga, 2026-10-27: "on bedge background before Ahhpp", then "runner after the ahhpp"). The plain .loop is plum, kept for later.
   The cards are ten example classes made by the real engine (cards-loop-data.js, tools/make_cards_data.mjs). */
.loop { position: relative; overflow: hidden; background: var(--plum-deep); color: #FFF7EE; padding: 120px 0 88px; }
.loop--cream { background: var(--page); color: var(--ink); }

.loop__head { position: relative; z-index: 3; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); }
.loop .loop__kicker { color: var(--rose); }
.loop--cream .loop__kicker { color: var(--plum); }
.loop__h { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 88px); line-height: .96; letter-spacing: -.02em; margin: 16px 0 0; max-width: 11em; }
.loop__h em { color: var(--rose); }
/* the headline changes with the group of classes passing (the reel's headlines change with its groups): two lines in one cell */
.loop__h { display: grid; }
.loop__h .lh { grid-area: 1 / 1; will-change: opacity, transform, filter; }
.loop__h .lh--old { pointer-events: none; }
.loop--cream .loop__h em { color: var(--plum); }

/* the stage: the deck of cards and, on wide screens, the class pulled out on the right over the far end of the deck */
.loop__stage { position: relative; max-width: var(--w-wide); height: 590px; margin: 0 auto; }   /* taller for the bigger cards (2026-10-27) */
.loop__deck { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 34% 26%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.loop__deck.is-drag { cursor: grabbing; }
.loop__deck.is-drag .lc__btn { cursor: grabbing; }
/* the cards a little bigger (Olga, 2026-10-27: "they should be slightly bigger and move a bit more, now they feel stale"): 268 x 344, were 236 x 304 */
.lc { position: absolute; left: 31%; top: 64px; width: 268px; height: 344px; margin-left: -134px; transform-origin: 50% 50%; will-change: transform, opacity; }
.lc__btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; text-align: left; background: #FFFDFA; color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 26px 50px -26px rgba(16,6,20,.75); cursor: pointer; font: inherit; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lc__btn:hover { transform: translateY(-5px); }
.lc__btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.loop--cream .lc__btn { box-shadow: 0 24px 44px -24px rgba(59,33,64,.5); }
.lc__panel { position: relative; height: 172px; flex: none; background: linear-gradient(150deg, var(--c2) 0%, var(--c) 72%); }
.lc__panel svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }
.lc__tag, .lc__len { position: absolute; top: 14px; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(59,33,64,.72); }
.lc__tag { left: 16px; } .lc__len { right: 16px; }
.lc__b { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 16px; }
.lc__t { font: 400 29px/1.02 var(--serif); letter-spacing: -.01em; }
.lc__m { font: 500 14px/1.35 var(--sans); color: var(--body); }
.lc__f { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* the class pulled out */
.loop__info { position: absolute; right: var(--gutter); top: 20px; z-index: 300; width: 344px; background: #FFFDFA; color: var(--ink); border-radius: 26px; padding: 26px 26px 26px; box-shadow: 0 34px 70px -34px rgba(16,6,20,.8); }
.loop--cream .loop__info { box-shadow: 0 30px 60px -30px rgba(59,33,64,.45); }
.li__in { will-change: opacity; }
.li__row { display: flex; justify-content: space-between; gap: 12px; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.li__k { margin-top: 26px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.li__t { margin-top: 10px; font: 400 42px/.98 var(--serif); letter-spacing: -.015em; }
.li__s { margin-top: 12px; font: 400 16px/1.45 var(--sans); color: var(--body); }
.li__hr { height: 1px; background: var(--line); margin: 20px 0 16px; }
.li__strip { display: flex; gap: 3px; height: 10px; }
.li__strip i { display: block; height: 100%; border-radius: 4px; min-width: 4px; }
.li__m { margin-top: 10px; font: 500 13px/1.45 var(--sans); color: var(--body); }
.li__g { margin-top: 4px; font: 500 13px/1.45 var(--sans); color: var(--muted); }
.li__go { margin-top: 22px; }

/* under the deck: what the cards are, and the controls (anything that moves on its own for more than five seconds needs a pause) */
.loop__foot { position: relative; z-index: 3; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.loop__left { display: grid; gap: 12px; justify-items: start; }
.loop__dirs { display: flex; flex-wrap: wrap; gap: 6px; }
.loop__dirs .ld { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,247,238,.3); background: transparent; color: #FFF7EE; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.loop__dirs .ld.on { background: #FFF7EE; color: var(--plum-deep); border-color: #FFF7EE; }
.loop--cream .loop__dirs .ld { border-color: var(--rule); color: var(--ink); }
.loop--cream .loop__dirs .ld:hover { border-color: var(--ink); }
.loop--cream .loop__dirs .ld.on { background: var(--plum-deep); color: var(--page); border-color: var(--plum-deep); }
.loop__dirs .ld:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.loop__note { font: 500 13px/1.4 var(--sans); color: rgba(255,247,238,.6); }
.loop--cream .loop__note { color: var(--muted); }
.loop__ctrl { display: flex; gap: 8px; }
.loop__ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,247,238,.3); background: transparent; color: #FFF7EE; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.loop__ctrl button:hover { background: rgba(255,247,238,.1); border-color: rgba(255,247,238,.6); }
.loop__ctrl button:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.loop--cream .loop__ctrl button { border-color: var(--rule); color: var(--ink); }
.loop--cream .loop__ctrl button:hover { background: rgba(59,33,64,.06); border-color: var(--ink); }
.loop__ctrl svg { width: 16px; height: 16px; display: block; }

/* tablets: the pulled-out class narrower */
@media (max-width: 1100px) { .loop__info { width: 300px; } .li__t { font-size: 36px; } .lc { left: 30%; } }

/* phones: one card in the middle, the next and the last one peeking, the pulled-out class under the deck */
@media (max-width: 760px) {
  .loop { padding: 88px 0 64px; }
  .loop__stage { height: auto; }
  .loop__deck { position: relative; inset: auto; height: 392px; perspective: 1000px; perspective-origin: 50% 36%; }
  .lc { left: 50%; top: 34px; width: 240px; height: 318px; margin-left: -120px; }   /* were 220 x 292 */
  .lc__panel { height: 156px; }
  .lc__t { font-size: 27px; }
  .loop__info { position: relative; right: auto; top: auto; width: auto; margin: 4px var(--gutter) 0; padding: 22px 22px 22px; }
  .li__k { margin-top: 20px; }
  .li__t { font-size: 34px; }
  .loop__foot { margin-top: 20px; align-items: flex-end; }
  /* 2026-10-27 at the ship check: the three direction pills get their own line on a phone (LET GO wrapped under DOWN and UP),
     the note and the arrows share the line under them */
  .loop__foot { display: grid; grid-template-columns: 1fr auto; row-gap: 14px; }
  .loop__left { display: contents; }
  .loop__dirs { grid-column: 1 / -1; flex-wrap: nowrap; }
  .loop__note { grid-column: 1; align-self: center; }
  .loop__ctrl { grid-column: 2; }
  .loop__dirs .ld { height: 34px; padding: 0 13px; }
}
@media (max-width: 760px) and (min-width: 600px) { .loop__info { max-width: 460px; margin-left: auto; margin-right: auto; } }