/* Products section: the Tend and BarPass spotlights and their phone walkthroughs. Linked at the top of the
   product list (not inlined), so it never blocks first paint and keeps index.html within budget. The phone and
   first screen work without JavaScript; site.js adds the other screens, steps and motion. */

/* Spotlight panels in each app's own colours (--panel, --accent, --copy). */
.product{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;overflow:hidden;isolation:isolate;color:#fff;background:var(--panel)}
.product::before{content:"";position:absolute;z-index:0;left:-12%;top:50%;width:48%;aspect-ratio:1;translate:0 -50%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 13%,transparent),transparent);pointer-events:none}
.tend{--panel:#110d06;--accent:#d8bf8f;--copy:#cfc5b3}
.barpass{--panel:#0d0a21;--accent:#b8a6ff;--copy:#c9c3e6}
.product-copy{position:relative;z-index:1;display:flex;flex-direction:column;padding:68px 32px 64px 64px;max-width:560px}
.product-top{display:flex;align-items:center;gap:18px;margin-bottom:38px}
.product-index{display:inline-flex;align-items:center;gap:14px;font:15px var(--serif);letter-spacing:1px;color:var(--accent)}
.product-index::after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.status{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 11px;border-radius:999px;border:1px solid #ffffff2e;background:#ffffff0d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10px;font-weight:600;letter-spacing:1.4px;color:#eef2f4;white-space:nowrap}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}
.product-name{display:block;margin-bottom:18px;color:var(--accent)}
.tend .product-name{font:48px/1 var(--serif);letter-spacing:-1px}
.barpass .product-name{font:700 38px/1 var(--sans);letter-spacing:-1px}
.product h3{font:clamp(30px,2.9vw,42px)/1.12 var(--serif);letter-spacing:-.02em;margin-bottom:20px}
.product-copy>p{font-size:16px;line-height:1.75;color:var(--copy);max-width:430px;margin-bottom:24px}
.product-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 32px}
.product-tags li{padding:7px 12px;border-radius:999px;border:1px solid #ffffff24;background:#ffffff08;font-size:10px;font-weight:600;letter-spacing:1.3px;color:#e6ebef}
.product details{border-top:1px solid #ffffff1f}
.product summary{padding:18px 0 0;font-size:15px}
.product summary span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #ffffff33;font-size:18px;line-height:1;transition:transform .3s var(--ease),background-color .25s,color .25s,border-color .25s}
.product summary:hover span{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.product details>div{padding:16px 0 0;color:var(--copy)}
.development-note{font-size:13px;color:var(--muted);margin:22px 0 0}
@media (max-width: 1100px) {
  .product-copy{padding:52px 22px 50px 40px}
  .tend .product-name{font-size:42px}
  .barpass .product-name{font-size:34px}
}

/* Panels match each app's welcome screen, with a lift of light behind the phone. */
.product.tend { background: radial-gradient(55% 65% at 70% 50%, #2e2618 0%, transparent 72%), var(--panel); }
.product.barpass { background: radial-gradient(55% 65% at 70% 50%, #2c1a6b 0%, transparent 72%), var(--panel); }

.app-demo {
  --pw: clamp(230px, 21vw, 290px);
  --ios: cubic-bezier(.32, .72, 0, 1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding: 64px 40px 64px 24px;
}

/* Phone: titanium bezel, side buttons, soft gold glow. */
.phone {
  position: relative;
  flex: none;
  width: var(--pw);
  padding: 9px;
  border-radius: calc(var(--pw) * .17);
  background: linear-gradient(150deg, #4a4d50, #111213 38%, #27292b 70%, #4a4d50);
  box-shadow: inset 0 0 0 1px #ffffff1f, 0 0 0 1px #000, 0 44px 80px -28px #000d, 0 0 110px -18px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Entrance when the section first comes into view, then a slow float. Without JS the phone is simply shown. */
.app-demo.is-live .phone {
  opacity: 0;
  transform: translateY(48px) scale(.94) rotate(-2deg);
  transition: opacity .9s ease, transform 1.2s var(--ios);
}
.app-demo.is-live.is-in .phone { opacity: 1; transform: none; }
.app-demo.is-in .phone-float { animation: demo-float 7s ease-in-out 1.2s infinite; }
@keyframes demo-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(.4deg); }
}
/* Soft pool of light under the phone that breathes with the float. */
.phone-float { position: relative; flex: none; }
.phone-float::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -34px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(6px);
  pointer-events: none;
}
.app-demo.is-in .phone-float::after { animation: demo-shadow 7s ease-in-out 1.2s infinite; }
@keyframes demo-shadow { 50% { transform: scaleX(.86); opacity: .6; } }

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #2e3032;
}
.phone::before { right: -3px; top: 27%; height: 14%; }
.phone::after { left: -3px; top: 21%; height: 8%; box-shadow: 0 calc(var(--pw) * .21) 0 #2e3032; }

.phone-screen {
  position: relative;
  touch-action: pan-y;
  overflow: hidden;
  aspect-ratio: 720 / 1620;
  border-radius: calc(var(--pw) * .14);
  background: #0a0a0a;
  isolation: isolate;
}
.phone-screen .screen { position: absolute; inset: 0; }
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Motion: site.js sets each screen's start position; the transition does the rest (iOS-like easing). */
.app-demo.is-live .screen {
  transform: translateX(100%);
  transition: transform .8s var(--ios), opacity .6s ease, filter .8s ease;
  will-change: transform;
}
.app-demo.is-live .screen.is-active { transform: none; }
/* Each new screen settles in with a slight zoom, like content easing into place. */
.app-demo.is-live .screen.is-active img { animation: demo-settle 1.6s var(--ios); }
@keyframes demo-settle { from { transform: scale(1.035); } }

/* A glint of light across the glass on every screen change. */
.demo-sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #ffffff29 48%, #ffffff0d 54%, transparent 62%);
  transform: translateX(-110%);
}
.demo-sheen.is-on { animation: demo-sheen 1.1s cubic-bezier(.4, 0, .2, 1) .15s; }
@keyframes demo-sheen { to { transform: translateX(110%); } }

/* Tap ripple where a guest would press, and a pulse on the order confirmation check. */
.demo-tap,
.demo-pulse {
  position: absolute;
  z-index: 5;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.demo-tap {
  width: 13%;
  margin: -6.5% 0 0 -6.5%;
  background: #ffffff5c;
  box-shadow: 0 0 0 2px #ffffffd9, 0 0 26px 4px #ffe6b0b3;
}
.demo-tap.is-on { animation: demo-tap .8s cubic-bezier(.2, .7, .2, 1); }
@keyframes demo-tap {
  0% { opacity: 0; transform: scale(1.5); }
  30% { opacity: 1; transform: scale(.8); }
  55% { opacity: 1; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.35); }
}
.demo-pulse {
  width: 26%;
  margin: -13% 0 0 -13%;
  border: 2px solid var(--accent);
}
.demo-pulse.is-on { animation: demo-pulse 1.4s ease-out .5s 2; }
@keyframes demo-pulse {
  0% { opacity: .9; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Step guide beside the phone. */
.demo-steps { width: min(100%, 250px); }
.demo-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.demo-steps li button {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--copy);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: color .3s;
}
.demo-steps li button:hover { color: #fff; }
.demo-steps .n { font: 13px var(--serif); letter-spacing: 1px; color: #ffffff59; transition: color .3s; }
.demo-steps .bar { display: block; grid-column: 2; height: 2px; margin-top: 8px; background: #ffffff1a; border-radius: 2px; overflow: hidden; }
.demo-steps .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.demo-steps [aria-current="step"] { color: #fff; }
.demo-steps [aria-current="step"] .n { color: var(--accent); }
.demo-steps [aria-current="step"] .bar i { animation: demo-bar var(--step, 3.6s) linear forwards; }
.demo-steps .is-done .bar i { width: 100%; opacity: .55; }
.app-demo.is-paused .demo-steps .bar i { animation-play-state: paused; }
.app-demo.is-static .demo-steps [aria-current="step"] .bar i { animation: none; width: 100%; }
@keyframes demo-bar { to { width: 100%; } }

.demo-caption { display: none; margin: 0; font-size: 14px; color: #fff; text-align: center; }
.demo-caption.is-on { animation: demo-caption .6s var(--ios); }
@keyframes demo-caption { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.demo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 12px 7px 10px;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #ffffff0a;
  color: #e6ebef;
  font: 600 10px var(--sans);
  letter-spacing: 1.4px;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.demo-toggle:hover { border-color: var(--accent); color: var(--accent); }
.demo-toggle::before { content: ""; width: 7px; height: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.app-demo.is-static .demo-toggle::before { width: 0; height: 0; border-left: 7px solid currentColor; border-right: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.demo-steps button:focus-visible,
.demo-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Tablet and phone: spotlights stack with the demo above the copy; steps become a segmented progress bar. */
@media (max-width: 1023px) {
  .product-list{gap:18px}
  .product{grid-template-columns:1fr}
  .product::before{left:-30%;top:62%;width:110%}
  .product-copy{max-width:640px;padding:0 44px 48px}
  .app-demo { order: -1; flex-direction: column; gap: 22px; padding: 52px 24px 36px; }
  .demo-steps { display: flex; flex-direction: column; align-items: center; width: min(100%, 300px); }
  .demo-steps ol { grid-template-columns: repeat(var(--count, 5), 1fr); gap: 6px; width: 100%; }
  .demo-steps li button { display: block; padding: 12px 0; }
  .demo-steps .n,
  .demo-steps .t { display: none; }
  .demo-steps .bar { height: 3px; margin: 0; background: #ffffff2e; }
  .demo-steps .is-done .bar i { opacity: .8; }
  .demo-caption { display: block; margin-top: 4px; }
  .demo-toggle { margin-top: 14px; }
}
@media (max-width: 760px) {
  .product-copy{padding:0 24px 32px}
  .product-top{margin-bottom:26px}
  .tend .product-name{font-size:38px}
  .barpass .product-name{font-size:32px}
  .product h3{font-size:30px}
  .app-demo { --pw: min(240px, 64vw); padding: 44px 20px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-demo.is-live .screen { transition: opacity .2s ease; }
  .app-demo.is-live .phone { opacity: 1; transform: none; transition: none; }
  .app-demo.is-in .phone-float,
  .app-demo.is-in .phone-float::after,
  .app-demo.is-live .screen.is-active img,
  .demo-caption.is-on,
  .demo-sheen.is-on { animation: none; }
  .demo-tap.is-on,
  .demo-pulse.is-on { animation: none; }
}