/* ==========================================================================
   schedule-v3.css — schedule-pickup.html top (2026-10-16): rotating headline,
   3 animated service cards that drive the wizard, a ticker, and the "host a
   drive" showcase (lobby video, bin photos, truck scene). Loaded after
   pickup-v3.css + event-v3.css (the scene). Motion gated on html.sv-js.
   ========================================================================== */

/* ─── Headline with rotating service ──────────────────────────────────── */
html body.eco-chromed main.sv .sp-h1 { font-size: clamp(38px, 4.6vw, 68px) !important; line-height: 1 !important; }
.sp-rot { position: relative; display: block; height: 1.12em; overflow: hidden; }
.sp-rot-w { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--lime); opacity: 0; transform: translateY(105%); transition: transform .65s var(--ease), opacity .45s; }
.sp-rot-w.is-on { opacity: 1; transform: none; }
.sp-rot-w.is-out { opacity: 0; transform: translateY(-105%); }
html:not(.sv-js) .sp-rot-w { transition: none; }

/* ─── Service cards ────────────────────────────────────────────────────── */
.sp-svcs { display: grid; gap: 10px; margin-top: 26px; max-width: 620px; }
.sp-svc {
  position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  width: 100%; margin: 0; padding: 10px 16px 10px 10px; border-radius: 22px; border: 1.5px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06); color: #fff; font: inherit; text-align: left; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), border-color .3s, background .3s, box-shadow .35s;
}
.sp-svc:hover { transform: translateY(-3px); border-color: rgba(185, 242, 74, .55); background: rgba(255, 255, 255, .09); }
.sp-svc[aria-pressed="true"] { border-color: var(--lime); background: rgba(185, 242, 74, .12); box-shadow: 0 0 0 4px rgba(185, 242, 74, .14), 0 24px 50px -24px rgba(0, 0, 0, .8); }
.sp-svc:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.sp-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #0b1d12; }
.sp-media img, .sp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-media video { opacity: 0; transition: opacity .6s; }
.sp-media.is-live video { opacity: 1; }
.sp-media--event { background: #bfe3ff; }
html.sv-js .sp-media--pickup img { animation: spKen 14s ease-in-out infinite alternate; }
@keyframes spKen { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-4%, -2%); } }
.sp-truck { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--forest); border: 1.5px solid var(--lime); color: var(--lime); }
.sp-truck svg { width: 15px; height: 15px; }
html.sv-js .sp-truck { animation: spDrive 5s ease-in-out infinite; }
@keyframes spDrive { 0%, 10% { left: 6px; } 55%, 65% { left: calc(100% - 34px); } 100% { left: 6px; } }
.sp-txt { display: grid; gap: 4px; min-width: 0; }
.sp-txt b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 800 19px/1.15 var(--display); letter-spacing: -.01em; }
.sp-txt small { font: 500 14px/1.4 var(--body); color: rgba(255, 255, 255, .72); }
.sp-when { padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font: 700 11.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.sp-new { padding: 4px 8px; border-radius: 99px; background: var(--lime); color: var(--forest); font: 800 10.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.sp-check { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); transition: background .3s, border-color .3s; }
.sp-svc[aria-pressed="true"] .sp-check { background: var(--lime); border-color: var(--lime); }
.sp-svc[aria-pressed="true"] .sp-check::after { content: ""; position: absolute; left: 8px; top: 4px; width: 7px; height: 12px; border: solid var(--forest); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.sp-more { margin-top: 14px !important; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.sp-more a { color: var(--lime) !important; font-weight: 700; text-decoration: none !important; border-bottom: 1.5px solid rgba(185, 242, 74, .35); }
html.sv-js .sp-svc { animation: spIn .8s var(--ease) both; animation-delay: calc(.35s + var(--i, 0) * .12s); }
@keyframes spIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* ─── Host-a-drive showcase ────────────────────────────────────────────── */
.sp-host-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.sp-host { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 32px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.sp-host:hover { transform: translateY(-6px); border-color: rgba(15, 162, 74, .5); box-shadow: 0 40px 70px -46px rgba(7, 19, 11, .6); }
.sp-host-media { position: relative; aspect-ratio: 1344 / 768; overflow: hidden; background: #0b1d12; }
.sp-host-media > img, .sp-host-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-host-media > video { opacity: 0; transition: opacity .6s; }
.sp-host-media.is-live > video { opacity: 1; }
.sp-host-media--event { background: #bfe3ff; }
.sp-host-tag { position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 99px; background: rgba(7, 19, 11, .75); color: #fff; font: 700 13px/1 var(--body); }
.sp-host-media > img.sp-host-bin { position: absolute; inset: auto -2% -6% auto; z-index: 2; width: 44%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }
html.sv-js .sp-host-bin { animation: spFloat 6s ease-in-out infinite; }
@keyframes spFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.sp-host-body { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 30px; flex: 1; }
.sp-host-k { font: 700 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-dk); }
[data-theme="dark"] .sp-host-k { color: var(--lime); }
html body.eco-chromed main.sv .sp-host-body h3 { font-size: clamp(26px, 2.6vw, 34px) !important; }
.sp-host-body p { font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.sp-ticks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-ticks li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.45; color: var(--fg-2); }
.sp-ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sp-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease); }
.sp-thumbs a:hover img { transform: translateY(-3px) rotate(-1deg); }
.sp-host-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.sp-btn-line { border-color: var(--line) !important; color: var(--fg) !important; background: transparent; }
.sp-btn-line:hover { border-color: var(--green) !important; }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sp-svcs { max-width: none; }
  .sp-host-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-svc { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; }
  .sp-media { border-radius: 11px; }
  .sp-txt b { font-size: 16.5px; gap: 6px; }
  .sp-txt small { font-size: 12.5px; }
  .sp-check { width: 24px; height: 24px; }
  .sp-svc[aria-pressed="true"] .sp-check::after { left: 7px; top: 3px; width: 6px; height: 11px; }
  .sp-truck { width: 22px; height: 22px; border-radius: 7px; } .sp-truck svg { width: 12px; height: 12px; }
  .sp-host-body { padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-svc, .sp-media--pickup img, .sp-truck, .sp-host-bin { animation: none !important; }
}