/* Official Apple product bezels with the real Buddy screens; hardware stays unmodified and still. */
.watch-panel { position: relative; isolation: isolate; overflow: hidden; }
.watch-layout { grid-template-columns: 1fr; gap: 36px; }
.watch-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; align-items: start; }
.watch-copy .eyebrow { grid-column: 1 / -1; justify-self: start; }
.watch-copy h2 { margin: 0; max-width: 12ch; }
.watch-copy .lede { margin: 0; }
.watch-copy .points { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 10px 0 0; }
.watch-gallery { min-width: 0; }
.watch-showcase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 24px; width: 100%; padding: 18px 0 0; direction: ltr; }
.watch-frame { margin: 0; min-width: 0; display: grid; justify-items: center; gap: 22px; }
.watch-device { width: 100%; max-width: 200px; height: auto; object-fit: contain; }
.watch-device--ultra { max-width: 210px; margin: 0; }
.watch-frame figcaption { width: 100%; display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid #ffffff18; padding-top: 14px; color: #fffdfa99; font-size: 12px; font-weight: 500; line-height: 1.45; direction: initial; }
.watch-frame figcaption span { flex: none; color: var(--lime); font-variant-numeric: tabular-nums; font-size: 10px; padding-top: 2px; }
[dir=rtl] .watch-frame figcaption { direction: rtl; }
.watch-pages { display: none; }
/* Atmospheric motion sits behind the surrounding copy, never over the product artwork. */
.watch-panel::before { content: ""; position: absolute; z-index: -1; inset: -20% 48% -20% -24%; border-radius: 50%; background: radial-gradient(ellipse, rgba(83, 78, 219, 0.15), transparent 66%); pointer-events: none; animation: watch-atmosphere 12s ease-in-out infinite; animation-play-state: paused; }
.watch-enhanced.is-active .watch-panel::before { animation-play-state: running; }
.watch-copy > :is(.eyebrow, h2, .lede), .watch-copy .points li { transition: opacity 0.7s ease, transform 0.8s var(--ease); }
.watch-enhanced:not(.is-revealed) .watch-copy > :is(.eyebrow, h2, .lede), .watch-enhanced:not(.is-revealed) .watch-copy .points li { opacity: 0; transform: translateY(16px); }
.watch-copy h2 { transition-delay: 0.08s; }
.watch-copy .lede { transition-delay: 0.16s; }
.watch-copy .points li:first-child { transition-delay: 0.24s; }
.watch-copy .points li:nth-child(2) { transition-delay: 0.32s; }
@keyframes watch-atmosphere { 0%, 100% { opacity: 0.45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(20px); } }
@media (max-width: 900px) {
  .watch-copy { grid-template-columns: 1fr; gap: 18px; }
  .watch-copy h2 { max-width: 15ch; }
  .watch-showcase { gap: 18px; }
}
@media (max-width: 560px) {
  .watch-layout { padding-block: 40px; gap: 28px; }
  .watch-copy .points { grid-template-columns: 1fr; gap: 16px; }
  .watch-showcase { display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 8px 20px 12px; margin-inline: -20px; width: calc(100% + 40px); scrollbar-width: none; }
  .watch-showcase::-webkit-scrollbar { display: none; }
  .watch-frame { flex: 0 0 82%; align-content: end; scroll-snap-align: center; gap: 18px; }
  .watch-device, .watch-device--ultra { width: 180px; max-width: 100%; }
  .watch-frame figcaption { min-height: 52px; }
  .watch-pages { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .watch-pages button { border: 1px solid #ffffff22; border-radius: 999px; min-width: 44px; min-height: 36px; padding: 7px 12px; color: #fffdfa88; background: transparent; font-size: 11px; font-weight: 650; transition: color .2s, background .2s; }
  .watch-pages button[aria-pressed=true] { color: var(--ink); background: var(--lime); border-color: var(--lime); }
}
@media (prefers-reduced-motion: reduce) {
  .watch-panel::before { animation: none; }
  .watch-copy > :is(.eyebrow, h2, .lede), .watch-copy .points li,
  .watch-enhanced:not(.is-revealed) .watch-copy > :is(.eyebrow, h2, .lede), .watch-enhanced:not(.is-revealed) .watch-copy .points li { opacity: 1; transform: none; transition: none; }
}