/* =============================================================================
   ShiftHawk — hero in-phone loop (Section 1)

   A looping, ghost-gesture walkthrough drawn INSIDE the hero phone frame:

     Schedule tab → (ghost swipe left) → Swap tab → (ghost tap a date)
     → (ghost tap "Find me a Swap") → swaps list pops in → (ghost swipe
     back) → Schedule tab → repeat.

   Contract (mirrors feature-diagrams.css / team-invite.css):
     • The static <picture> screenshot inside .phone stays the no-JS /
       prefers-reduced-motion frame. Nothing here runs without .spl-play.
     • hero-phone-loop.js arms the stage (.spl-armed hides the screenshot,
       shows the mockup) ONLY when motion is allowed, then adds .spl-play
       via IntersectionObserver so the 16s infinite timeline starts on view.
     • Colors echo the real app screens (cream surface, cyan primary, lilac
       date chips, mint result cards, banana highlights) — Tamagui-mirrored
       tokens from styles.css.
   ========================================================================== */

.spl { display: none; }

/* Armed: swap the static screenshot for the live mockup */
.phone.spl-armed > picture { display: none; }
.phone.spl-armed .spl { display: block; }

.spl {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  aspect-ratio: 512 / 1113;           /* same box as the screenshot */
  background: #FDF8EC;                 /* app cream */
  font-family: var(--font-display);
  user-select: none;
  pointer-events: none;                /* purely decorative */
}

/* ---------------------------------------------------------------- track */
.spl-track {
  position: absolute; inset: 0 0 11.5% 0;   /* leave room for the tab bar */
  width: 200%;
  display: flex;
}
.spl-screen { width: 50%; flex: none; position: relative; padding: 15% 5.5% 2%; }

/* Screen A now uses the real app screenshot (full-bleed inside the screen).
   The screenshot has the Legend below the grid — no CSS Legend overlay, so
   nothing can overlap the calendar at any breakpoint. */
.spl-sched { padding: 0; }
.spl-sched picture { position: absolute; inset: 0; display: block; }
.spl-sched img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
}

.spl-play .spl-track { animation: spl-track 16s cubic-bezier(.55,0,.25,1) infinite; }
@keyframes spl-track {
  0%, 13%   { transform: translateX(0); }
  17%, 81%  { transform: translateX(-50%); }
  85%, 100% { transform: translateX(0); }
}

/* ---------------------------------------------------------- shared bits */
.spl-h1 {
  display: flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: 16.3px; color: #0F172A;
  margin: 0 0 4%;
}
.spl-h1 :is(.ph, .ph-duotone, .ph-bold) { color: var(--primary); font-size: 1.2em; }

/* -------------------------------------------------------- Schedule view */
.spl-month {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 3%;
}
.spl-month b { font-size: 14.1px; font-weight: 800; color: #0F172A; }
.spl-month span {
  width: 1.35em; height: 1.35em; border-radius: 50%;
  border: 1px solid #E2E8F0; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 11.3px;
}
.spl-sync { font-size: 9.2px; color: var(--warning); margin: 0 0 3%; font-weight: 600; }
.spl-sync::before { content: "●"; color: var(--banana); margin-right: 3px; }

.spl-dow, .spl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4.2%; }
.spl-dow { margin-bottom: 2.5%; }
.spl-dow span { text-align: center; font-size: 8.4px; font-weight: 700; color: #94A3B8; }
.spl-grid { grid-auto-rows: 1fr; }
.spl-day {
  aspect-ratio: .78; border-radius: 18%;
  background: #fff; border: 1px solid #EEF2F7;
  font-size: 8.4px; font-weight: 700; color: #475569;
  padding: 8% 0 0 14%;
  box-shadow: 0 1px 1.5px rgba(15,23,42,.05);
}
.spl-day.spl-off { background: transparent; border-color: transparent; box-shadow: none; color: #CBD5E1; }
.spl-day.spl-shift { background: #FACC15; border-color: #EAB308; color: #713F12; }
.spl-day.spl-shift-soft { background: #FDF0BD; border-color: #F5E19A; color: #854D0E; }
.spl-day.spl-today { border: 1.5px solid var(--primary); color: var(--primary-deep); }
.spl-legend {
  margin-top: 6%;
  border: 1.5px solid var(--primary); border-radius: 999px;
  color: var(--primary); background: #fff;
  text-align: center; font-weight: 700; font-size: 10.2px;
  padding: 3.2% 0;
}

/* ------------------------------------------------------------ Swap view */
.spl-seg {
  display: flex; background: #EDF1F6; border-radius: 999px; padding: 2%;
  margin: 0 0 5%;
}
.spl-seg span {
  flex: 1; text-align: center; border-radius: 999px;
  font-size: 10.2px; font-weight: 700; color: #475569;
  padding: 2.6% 0;
}
.spl-seg .on { background: var(--primary); color: #fff; }
.spl-label { font-size: 9.9px; font-weight: 700; color: #0F172A; margin: 0 0 2.5%; }

.spl-dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5%; margin-bottom: 7%; }
.spl-date {
  background: #C4B5FD40; border: 1px solid #C4B5FD; border-radius: 14%;
  padding: 5.5% 0 4.5%;
  text-align: center; color: #4C1D95;
  transition: none;
}
.spl-date small { display: block; font-size: 8.1px; font-weight: 600; opacity: .75; }
.spl-date b { display: block; font-size: 9.9px; font-weight: 800; }
.spl-date code { display: block; font-family: var(--font-mono); font-size: 7.0px; opacity: .7; }

/* the tapped date lights up mid-loop */
.spl-play .spl-date-target { animation: spl-date-sel 16s steps(1, end) infinite; }
@keyframes spl-date-sel {
  0%, 25.9% { background: #C4B5FD40; border-color: #C4B5FD; box-shadow: none; }
  26%, 89%  { background: #DDEFFB; border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary); }
  89.1%, 100% { background: #C4B5FD40; border-color: #C4B5FD; box-shadow: none; }
}

.spl-cta-row { display: flex; align-items: center; gap: 4%; margin-bottom: 8%; }
.spl-cta {
  background: var(--primary); color: #fff; border-radius: 999px;
  font-weight: 800; font-size: 10.6px;
  padding: 4.2% 7%;
  box-shadow: 0 3px 10px rgba(8,145,178,.35);
}
.spl-play .spl-cta { animation: spl-cta-press 16s ease-in-out infinite; }
@keyframes spl-cta-press {
  0%, 35% { transform: scale(1); }
  36.2%   { transform: scale(.92); }
  37.4%, 100% { transform: scale(1); }
}
.spl-weeks { font-family: var(--font-mono); font-size: 8.8px; color: #475569; }
.spl-weeks b { color: var(--primary-deep); }

/* results — pop in after the CTA tap */
.spl-found {
  font-size: 15.6px; font-weight: 800; color: #0F172A;
  margin: 0 0 4.5%;
  opacity: 0;
}
.spl-found small { font-family: var(--font-mono); font-weight: 500; font-size: .55em; color: #94A3B8; margin-left: 5px; }
.spl-card {
  border-radius: 10px; border: 1px solid #D6F5E4; background: #F1FDF6;
  padding: 4.5% 5%; margin-bottom: 4%;
  opacity: 0;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.spl-card-2 { background: #F0FBFE; border-color: #CBEFF8; }
.spl-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5%; }
.spl-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #059669; color: #fff; border-radius: 999px;
  font-size: 8.4px; font-weight: 700; padding: 1.6% 4%;
}
.spl-card-2 .spl-badge { background: var(--primary); }
.spl-legs { font-family: var(--font-mono); font-size: 7.7px; color: #64748B; }
.spl-pair { display: flex; align-items: center; gap: 5px; font-size: 8.8px; color: #334155; margin-top: 1.6%; }
.spl-ava {
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7.0px; font-weight: 800; color: #fff;
}
.spl-ava-p { background: var(--pink); }
.spl-ava-a { background: var(--amber); }
.spl-ava-m { background: #10B981; }
.spl-pair code { font-family: var(--font-mono); font-size: 7.5px; color: #64748B; margin-left: auto; }

.spl-play .spl-found  { animation: spl-pop 16s cubic-bezier(.2,.9,.3,1.2) infinite; animation-delay: 0s; }
.spl-play .spl-card-1 { animation: spl-pop-2 16s cubic-bezier(.2,.9,.3,1.2) infinite; }
.spl-play .spl-card-2 { animation: spl-pop-3 16s cubic-bezier(.2,.9,.3,1.2) infinite; }
@keyframes spl-pop {
  0%, 39.9% { opacity: 0; transform: translateY(8px) scale(.96); }
  42%, 87%  { opacity: 1; transform: translateY(0) scale(1); }
  89%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
}
@keyframes spl-pop-2 {
  0%, 42.9% { opacity: 0; transform: translateY(10px) scale(.94); }
  45.5%, 87% { opacity: 1; transform: translateY(0) scale(1); }
  89%, 100% { opacity: 0; transform: translateY(10px) scale(.94); }
}
@keyframes spl-pop-3 {
  0%, 45.9% { opacity: 0; transform: translateY(10px) scale(.94); }
  48.5%, 87% { opacity: 1; transform: translateY(0) scale(1); }
  89%, 100% { opacity: 0; transform: translateY(10px) scale(.94); }
}

/* -------------------------------------------------------------- tab bar */
.spl-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11.5%;
  background: #fff; border-top: 1px solid #EEF2F7;
  display: flex; align-items: center;
}
.spl-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #94A3B8; font-size: 8.1px; font-weight: 600;
}
.spl-tab :is(.ph, .ph-duotone) { font-size: 2.1em; }
/* active tint follows the loop: Schedule ⇄ Swap */
.spl-play .spl-tab-sched { animation: spl-tab-sched 16s steps(1, end) infinite; }
.spl-play .spl-tab-swap  { animation: spl-tab-swap 16s steps(1, end) infinite; }
.spl-tab-sched { color: var(--primary); }               /* resting state */
@keyframes spl-tab-sched {
  0%, 16.9% { color: var(--primary); }
  17%, 82.9% { color: #94A3B8; }
  83%, 100% { color: var(--primary); }
}
@keyframes spl-tab-swap {
  0%, 16.9% { color: #94A3B8; }
  17%, 82.9% { color: var(--primary); }
  83%, 100% { color: #94A3B8; }
}

/* ---------------------------------------------------------- ghost finger */
.spl-finger {
  position: absolute; z-index: 4;
  width: 9.5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(148,163,184,.45));
  box-shadow: 0 2px 10px rgba(15,23,42,.28), 0 0 0 2px rgba(255,255,255,.5) inset;
  opacity: 0;
  left: 0; top: 0;
}
.spl-play .spl-finger { animation: spl-finger 16s ease-in-out infinite; }
@keyframes spl-finger {
  /* rest */
  0%, 9%    { left: 72%; top: 46%; opacity: 0; transform: scale(1); }
  /* swipe left → Swap tab */
  10.5%     { left: 72%; top: 46%; opacity: .9; }
  13%       { left: 68%; top: 46%; opacity: .9; transform: scale(1); }
  16.5%     { left: 16%; top: 46%; opacity: .9; }
  18%       { left: 14%; top: 46%; opacity: 0; }
  /* travel to the date chip (3rd in row 1) */
  21%       { left: 66%; top: 26%; opacity: 0; transform: scale(1); }
  23%       { left: 66%; top: 26%; opacity: .9; }
  25.5%     { transform: scale(1); }
  26.4%     { left: 66%; top: 26%; opacity: .9; transform: scale(.72); }
  27.6%     { transform: scale(1); }
  /* travel to "Find me a Swap" */
  32%       { left: 22%; top: 47.5%; opacity: .9; transform: scale(1); }
  35.4%     { left: 22%; top: 47.5%; transform: scale(1); }
  36.4%     { left: 22%; top: 47.5%; transform: scale(.72); }
  37.6%     { transform: scale(1); }
  40%       { left: 22%; top: 47.5%; opacity: 0; }
  /* rest while the results hold */
  41%, 77%  { left: 20%; top: 46%; opacity: 0; transform: scale(1); }
  /* swipe right → back to Schedule */
  78.5%     { left: 20%; top: 46%; opacity: .9; }
  84%       { left: 76%; top: 46%; opacity: .9; }
  85.5%, 100% { left: 78%; top: 46%; opacity: 0; }
}

/* Safety: any environment that forces reduced motion after arming */
@media (prefers-reduced-motion: reduce) {
  .phone.spl-armed > picture { display: block; }
  .phone.spl-armed .spl { display: none; }
}