/* ShuffleIn landing page: the scroll story (items placed by distance -> match -> chat -> Shuffle) and the
   sections under it. Loaded only by index.html; styles.css stays shared with the legal pages.
   Cards are laid out at their LARGEST size (the match) and only ever scaled DOWN, so photos and text stay
   sharp at every stage. */
:root { --nav: 64px; --cw: 230px; --ch: 290px; }

/* ---- the pinned story ---- */
.story { position: relative; height: 600vh; }
.stage {
  position: sticky; top: var(--nav);
  height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav));
  overflow: hidden; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; grid-template-rows: 1fr;
  gap: 24px; align-items: center; padding: 24px 48px; max-width: 1280px; margin: 0 auto;
}
.copy { position: relative; height: 440px; z-index: 10; }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.scene.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .1s; }
.scene h1, .scene h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -0.04em; margin: 12px 0; font-weight: 600; }
.scene p { font-size: 17px; color: var(--muted2); margin: 0 0 22px; max-width: 420px; }
.vis { position: relative; align-self: stretch; min-height: 0; }
#items { position: absolute; inset: 0; }

/* radar */
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(0, 0, 0, 0.16); border-radius: 50%; z-index: 1; }
.ring i { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .06em; background: var(--bg); padding: 0 6px; color: var(--faint); }
.you { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; z-index: 2; }
.you:before, .you:after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(17, 17, 17, 0.3); animation: halo 2.4s ease-out infinite; }
.you:after { animation-delay: 1.2s; }
@keyframes halo { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

/* item cards: in the hero only the photo and the distance show; names appear once the match forms */
.it { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); z-index: 3; --ls: 1; }
.it .in { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: #ddd center/cover; border: 7px solid #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); }
.it.fl .in { animation: float 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.it .lbl { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, 0.94); padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: opacity .3s; opacity: 0; }
.it .dist { position: absolute; right: 14px; top: 14px; background: rgba(17, 17, 17, 0.85); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; transform: scale(var(--ls)); transform-origin: right top; transition: opacity .25s; }
.it.named .lbl { opacity: 1; }
.it.nolbl .lbl, .it.nolbl .dist { opacity: 0; }
.it.hero { z-index: 5; }
.it.mine { z-index: 6; opacity: 0; }

/* match */
.badge { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; z-index: 7; border: 4px solid var(--bg); opacity: 0; }
.badge svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pulse { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid var(--ink); opacity: 0; z-index: 4; pointer-events: none; }
.pulse.go { animation: pulse 1s ease-out forwards; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } }

/* the confirmation at the end: "Shuffled successfully" */
.done { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; z-index: 8; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); pointer-events: none; }
.done i { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-style: normal; }
.done svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* phone + chat */
.phone { position: absolute; left: 50%; top: 50%; width: 280px; height: 560px; margin: -280px 0 0 -140px; border-radius: 38px; background: #fff; border: 8px solid #1c1c1e; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25); z-index: 4; overflow: hidden; pointer-events: none; }
.phone .st { height: 20px; margin-top: 6px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 10px; font-weight: 600; color: var(--muted); }
.phone .hd { height: 72px; display: flex; align-items: center; padding: 0 12px 0 100px; border-bottom: 1px solid var(--hair); }
.phone .hd b { display: block; font-size: 14px; letter-spacing: -0.02em; }
.phone .hd small { display: block; font-size: 11px; color: var(--muted); }
.phone .bd { position: absolute; left: 0; right: 0; top: 98px; bottom: 54px; padding: 12px; background: #f6f6f4; overflow: hidden; }
.safe { padding: 8px 10px; border-radius: 10px; background: #ededea; font-size: 10.5px; color: var(--muted2); margin-bottom: 10px; line-height: 1.4; }
.bub { padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--hair); font-size: 12px; max-width: 82%; margin-bottom: 8px; line-height: 1.4; }
.phone .bub { opacity: 0; }
.bub.me { margin-left: auto; background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 14px 14px 4px 14px; }
.phone .ft { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #fff; border-top: 1px solid var(--hair); }
.phone .ft span { flex: 1; height: 34px; border-radius: 999px; border: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; font-size: 11.5px; color: var(--faint); }
.phone .ft i { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; }

/* scene markers + scroll hint */
.dots { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; z-index: 20; }
.dots span { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); justify-content: flex-end; transition: color .3s; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); transition: .3s; }
.dots span.on { color: var(--ink); }
.dots span.on i { background: var(--ink); transform: scale(1.4); }
.sh { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 5px; transition: opacity .4s; z-index: 20; pointer-events: none; }
.sh i { width: 18px; height: 28px; border: 2px solid rgba(0, 0, 0, 0.25); border-radius: 999px; position: relative; display: block; }
.sh i:after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }

/* ---- sections under the story ---- */
.sec { padding: 64px 0; }
.sec.alt { background: var(--white); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.sec h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.03em; margin: 8px 0 0; font-weight: 600; line-height: 1.1; }
.card { background: var(--white); border: 1px solid var(--hair); border-radius: 20px; padding: 18px; }
.pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.pic { border-radius: 24px; overflow: hidden; background: var(--white); border: 1px solid var(--hair); }
.pic .shot { height: 330px; background: var(--soft); position: relative; overflow: hidden; }
.pic p { margin: 0; padding: 14px 16px 16px; font-size: 14.5px; color: var(--muted2); }
.pic p b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; letter-spacing: -0.01em; }
.mini { position: absolute; left: 28px; right: 28px; top: 26px; bottom: -30px; border-radius: 30px 30px 0 0; background: var(--bg); border: 8px solid #1c1c1e; border-bottom: 0; overflow: hidden; }
.mini .photo { height: 60%; background: url('/img/armchair.jpg') center 30%/cover; }
.mini .panel { margin: -22px 10px 0; border-radius: 18px; background: #fff; border: 1px solid var(--hair); padding: 10px 12px; font-size: 12px; position: relative; }
.mini .panel b { display: block; font-size: 14px; letter-spacing: -0.02em; }
.mini .acts { display: flex; gap: 6px; margin-top: 10px; }
.mini .acts span { flex: 1; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; background: #fff; border: 1px solid var(--border); }
.mini .acts span.l { background: var(--ink); color: #fff; border-color: var(--ink); }
.mini .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 12px 0; }
.mini .grid4 div { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed rgba(0, 0, 0, 0.14); }
.mini .grid4 div.f { border: 0; background: url('/img/headphones.jpg') center/cover; }
.mini .fld { margin: 10px 12px 0; height: 36px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; padding: 0 12px; font-size: 12px; }
.mini .post { margin: 10px 12px 0; height: 38px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.mini .bub { margin: 10px 12px 0; max-width: 80%; font-size: 11.5px; }
.mini .safe { margin: 14px 12px 0; }
.manifesto { background: var(--ink); color: #fff; border-radius: 28px; padding: 44px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.manifesto h2 { font-size: clamp(34px, 4vw, 44px); letter-spacing: -0.04em; margin: 0 0 10px; line-height: 1.02; }
.manifesto p { color: rgba(255, 255, 255, 0.72); margin: 0; font-size: 16px; }
.manifesto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.manifesto li { padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; font-size: 14px; }
.manifesto a { color: #fff; }
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; margin-top: 18px; }
.price h3 { margin: 0 0 6px; font-size: 18px; }
.price ul { padding-left: 1.2rem; margin: 8px 0 0; }
.price li { font-size: 14px; color: var(--muted2); margin: 4px 0; }
.price .fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); max-width: 760px; }
.early { max-width: 760px; }
.early p { margin: 10px 0 0; }
.early h3 { font-size: 20px; letter-spacing: -0.02em; margin: 28px 0 6px; font-weight: 600; }
.faq details { border-top: 1px solid rgba(0, 0, 0, 0.08); padding: 14px 0; max-width: 760px; }
.faq details:last-of-type { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.faq summary { font-weight: 600; cursor: pointer; font-size: 15px; }
.faq details p { color: var(--muted2); margin: 8px 0 0; font-size: 14.5px; }
.faq .list { margin-top: 18px; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * .12s); }
.reveal.in { opacity: 1; transform: none; }

/* no script: show the words, skip the moving picture */
.no-js .story { height: auto; }
.no-js .stage { position: static; height: auto; display: block; padding: 40px 20px; }
.no-js .copy { height: auto; }
.no-js .scene { position: static; opacity: 1; transform: none; margin-bottom: 28px; }
.no-js .vis, .no-js .dots, .no-js .sh { display: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (max-width: 860px) {
  :root { --cw: 150px; --ch: 188px; }
  .it .in { border-width: 5px; border-radius: 20px; }
  .it .lbl { left: 10px; bottom: 10px; font-size: 12px; padding: 5px 9px; }
  .it .dist { right: 10px; top: 10px; font-size: 11px; padding: 3px 8px; }
  .you { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 10px; }
  .phone .hd { padding-left: 106px; }
  .done { font-size: 13px; }
  .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 6px; padding: 10px 18px 14px; align-items: stretch; }
  .copy { height: 232px; }
  .scene h1, .scene h2 { font-size: 27px; margin: 8px 0; }
  .scene p { font-size: 14px; margin-bottom: 12px; }
  .scene .btn { height: 42px; font-size: 13px; }
  .dots { display: none; }
  .pics, .manifesto, .price { grid-template-columns: 1fr; }
  .manifesto { padding: 30px 24px; }
  .sec { padding: 44px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .it.fl .in, .you:before, .you:after, .sh i:after { animation: none; }
  .scene, .reveal { transition: none; }
}