/* Hero right side: a collage of floating Slash UI pieces.
   script.js adds .hc-in when the intro reaches the CTA row. */

/* No fade on the whole block: a parent opacity/transform transition makes Chrome draw the cards'
   shadows larger until it ends, then they snap smaller. Each card pops in on its own instead. */
.hero-collage:not(.hc-in) .hc-play { visibility: hidden; }

/* palette rows (shared by the menu card) */
.hm-row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: oklch(0.25 0.01 90); }
.hm-row.sel { background: oklch(0.955 0.02 250); }
.hm-row .ico { width: 22px; height: 22px; border-radius: 6px; background: oklch(0.95 0.004 90); display: flex; align-items: center; justify-content: center; font-size: 12px; color: oklch(0.35 0.01 90); }
.hm-row .tag { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600; color: oklch(0.55 0.01 90); }
.hm-row.sel .tag { color: #3175B5; }
.hm-row.hide { display: none; }

/* safety net: never widen the page — clip only at the hero's horizontal edges, so card shadows aren't cut */
.hero { overflow-x: clip; }
.hc-stage { position: relative; width: 470px; height: 440px; transform-origin: 0 0; }   /* scaled to fit by script.js */
.hc-item { position: absolute; animation: hcFloat 7s ease-in-out infinite; }
.hc-item:nth-child(2) { animation-delay: -1.5s; animation-duration: 8s; }
.hc-item:nth-child(3) { animation-delay: -3s; animation-duration: 6.5s; }
.hc-item:nth-child(4) { animation-delay: -4.5s; animation-duration: 7.5s; }
.hc-item:nth-child(5) { animation-delay: -2.2s; animation-duration: 9s; }
.hc-item:nth-child(6) { animation-delay: -5.5s; animation-duration: 6.8s; }
.hc-item:nth-child(7) { animation-delay: -0.8s; animation-duration: 8.4s; }
@keyframes hcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hc-card {
  background: #fff; border-radius: 14px; padding: 8px;
  box-shadow: 0 0 0 1px oklch(0.92 0.006 90), 0 18px 40px oklch(0 0 0 / 0.10);
}
.hc-pal { width: 250px; }
.hc-pal .hm-row { height: 34px; }
.hc-sub { width: 200px; }
.hc-sub .opt { padding: 7px 10px; border-radius: 8px; }
.hc-sub .opt.sel { background: oklch(0.955 0.02 250); }
.hc-sub .opt b { display: block; font-size: 12.5px; color: oklch(0.22 0.01 90); }
.hc-sub .opt span { font-size: 11px; color: oklch(0.55 0.01 90); }
.hc-keys { display: flex; gap: 8px; }
.hc-key { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: oklch(0.2 0.01 90); background: #fff; box-shadow: 0 0 0 1px oklch(0.9 0.006 90), 0 4px 0 oklch(0.88 0.006 90), 0 12px 24px oklch(0 0 0 / 0.08); }
.hc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; color: oklch(0.25 0.01 90); box-shadow: 0 0 0 1px oklch(0.92 0.006 90), 0 12px 28px oklch(0 0 0 / 0.08); white-space: nowrap; }
.hc-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #3175B5; }
.hc-chip .ar { color: oklch(0.65 0.01 90); }
.hc-chip .val { background: oklch(0.95 0.07 95); border-radius: 5px; padding: 0 4px; }
.hc-voice { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #3175B5; box-shadow: 0 0 0 1.5px #3175B5, 0 12px 28px oklch(0 0 0 / 0.08); }
.hc-voice .dot { width: 8px; height: 8px; border-radius: 50%; background: #3175B5; animation: hcPulse 1.2s ease-in-out infinite; }
@keyframes hcPulse { 50% { opacity: 0.3; } }
.hc-voice .bars { display: flex; gap: 2px; align-items: center; height: 14px; }
.hc-voice .bars i { width: 2.5px; border-radius: 2px; background: #3175B5; animation: hcBar 0.9s ease-in-out infinite; }
.hc-voice .bars i:nth-child(1) { height: 6px; } .hc-voice .bars i:nth-child(2) { height: 12px; animation-delay: .15s; } .hc-voice .bars i:nth-child(3) { height: 8px; animation-delay: .3s; } .hc-voice .bars i:nth-child(4) { height: 13px; animation-delay: .45s; } .hc-voice .bars i:nth-child(5) { height: 5px; animation-delay: .6s; }
@keyframes hcBar { 50% { transform: scaleY(0.4); } }
.hc-pop { opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2,1.4,.4,1); }
.hc-in .hc-pop { opacity: 1; transform: none; }
/* once every card has popped in at full opacity, dim them one by one so the play button reads first */
.hc-in .hc-pop { animation: hcDim 0.6s ease var(--dim-delay, 0.9s) forwards; }
.hc-item:nth-child(1) { --dim-delay: 0.9s; }
.hc-item:nth-child(2) { --dim-delay: 1s; }
.hc-item:nth-child(3) { --dim-delay: 1.1s; }
.hc-item:nth-child(4) { --dim-delay: 1.2s; }
.hc-item:nth-child(5) { --dim-delay: 1.3s; }
.hc-item:nth-child(6) { --dim-delay: 1.4s; }
.hc-item:nth-child(7) { --dim-delay: 1.5s; }
@keyframes hcDim { from { opacity: 1; } to { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .hc-item, .hc-voice .dot, .hc-voice .bars i { animation: none; }
}

/* play overlay: sits over the collage, opens the promo video in a modal (script.js) */
.hero-collage { position: relative; }
.hc-play {
  position: absolute;
  inset: -16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  padding: 0;
  background: radial-gradient(closest-side, oklch(1 0 0 / 0.75), oklch(1 0 0 / 0) 70%);
  border-radius: 20px;
  cursor: pointer;
  font: inherit;
  z-index: 2;
}
.hc-play-btn {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: oklch(0.18 0.01 90);
  box-shadow: 0 14px 36px -10px oklch(0 0 0 / 0.5);
  transition: transform 0.25s ease;
}
.hc-play-btn svg { margin-left: 4px; }
.hc-play-label {
  padding: 7px 16px;
  border-radius: 999px;
  background: oklch(0.18 0.01 90);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 8px 20px -8px oklch(0 0 0 / 0.45);
}
/* play button + label come in once every floating card has landed (last card: .37s delay + .45s pop) */
.hc-in .hc-play-btn { animation: hcPlayIn 0.5s cubic-bezier(.2,1.5,.4,1) 0.85s backwards; }
.hc-in .hc-play-label { animation: hcLabelIn 0.4s ease 1.1s backwards; }
@keyframes hcPlayIn { from { opacity: 0; transform: scale(0.5); } }
@keyframes hcLabelIn { from { opacity: 0; transform: translateY(10px); } }
.hc-play:hover .hc-play-btn { transform: scale(1.08); }
/* hover: the cards slide outwards, clearing space around the play button.
   `transform` composes with the float animation's `translate`, so they keep floating. */
.hc-item { transition: transform 0.5s cubic-bezier(.2,.9,.3,1) var(--move-delay, 0s); }
/* uneven start times so the cards don't all move in lockstep */
.hc-item:nth-child(1) { --move-delay: 0.04s; }
.hc-item:nth-child(2) { --move-delay: 0.11s; }
.hc-item:nth-child(3) { --move-delay: 0s; }
.hc-item:nth-child(4) { --move-delay: 0.08s; }
.hc-item:nth-child(5) { --move-delay: 0.15s; }
.hc-item:nth-child(6) { --move-delay: 0.02s; }
.hc-item:nth-child(7) { --move-delay: 0.12s; }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(1) { transform: translate(-45px, -68px) scale(0.88); }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(2) { transform: translate(52px, -52px) scale(0.88); }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(3) { transform: translate(68px, 15px) scale(0.88); }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(4) { transform: translate(-188px, 22px) scale(0.88); }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(5) { transform: translate(-75px, 52px) scale(0.88); }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(6) { transform: translate(68px, 45px) scale(0.88); }
.hero-collage:has(.hc-play:hover, .hc-play:focus-visible) .hc-item:nth-child(7) { transform: translate(30px, 60px) scale(0.88); }
.hc-play:focus-visible { outline: 3px solid #3175B5; outline-offset: 4px; }

/* video modal */
.video-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.video-modal[hidden] { display: none; }
.video-modal-backdrop { position: absolute; inset: 0; background: oklch(0.15 0.01 90 / 0.72); backdrop-filter: blur(4px); animation: vmFade 0.25s ease; }
.video-modal-box { position: relative; width: min(1100px, 100%); animation: vmPop 0.3s cubic-bezier(.2,1.2,.4,1); }
.video-modal-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.6); }
.video-modal-close {
  position: absolute; top: -48px; right: 0;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: oklch(1 0 0 / 0.14); cursor: pointer;
}
.video-modal-close:hover { background: oklch(1 0 0 / 0.26); }
body.video-modal-open { overflow: hidden; }
@keyframes vmFade { from { opacity: 0; } }
@keyframes vmPop { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .video-modal-backdrop, .video-modal-box, .hc-play-btn, .hc-play-label { animation: none !important; }
  .hc-in .hc-pop { animation: none; opacity: 0.45; }
}