/* =====================================================================
   Product reels (real screenshots of Relay) and the running pipeline.
   With reduced motion or no JS each reel shows the frame it ends on.
   ===================================================================== */

/* A reel fills its card art; the hero one sits inside the window frame. */
.reel {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}
/* Card art: a painted, grainy colour field with the app window rising out of the bottom. */
.reel-art {
  padding: 0;
  min-height: 300px;
  overflow: hidden;
  background: #1a1a1a;
}
.paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* The product's own painting, grain and all (Figma "Painted stage"). */
.stage-paint {
  background: #1a1a1a center / cover no-repeat;
  transform: scale(1.04);
  animation: stage-drift 30s ease-in-out infinite alternate;
}
/* Fresh film grain at the screen's own resolution (the paintings themselves are clean). */
.stage-paint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}
@keyframes stage-drift {
  to {
    transform: scale(1.1) translate3d(-1.5%, -1%, 0);
  }
}
/* A soft shade so the window reads against bright paint. */
.reel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 70%);
  pointer-events: none;
}
.bento .reel-art {
  min-height: 340px;
}
.reel-art .reel {
  position: absolute;
  inset: 36px 44px 0;
  z-index: 1;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
/* Glass: the window is frosted, and the painting behind it shows faintly through the app. */
.reel-art .reel {
  background: rgba(10, 10, 10, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}
.reel-art .reel-canvas img.on {
  opacity: 0.86;
}
/* A sheen across the glass, brightest at the top edge. */
.reel-art .reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 22%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%);
}
.hero-reel {
  aspect-ratio: 1823 / 1025;
  width: 100%;
}
.reel-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transition: transform 900ms cubic-bezier(0.5, 0, 0.2, 1);
  will-change: transform;
}
.reel-canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.45s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.reel-canvas img.on {
  opacity: 1;
}
.trio .reel-art {
  min-height: 0;
  height: 290px;
  flex: none;
}
.trio .reel-art .reel {
  inset: 28px 28px 0;
}
@media (max-width: 640px) {
  .reel-art .reel,
  .trio .reel-art .reel {
    inset: 22px 18px 0;
  }
}

/* The "You" cursor */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 650ms, 250ms;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1), ease;
}
.cursor.on {
  opacity: 1;
}
.cursor svg {
  width: 18px;
  height: 18px;
  fill: var(--light);
  stroke: #0a0a0a;
  stroke-width: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s;
}
.cursor span {
  position: absolute;
  left: 14px;
  top: 13px;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--amber);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.cursor.flip span {
  left: auto;
  right: 4px;
}
.cursor.press svg {
  transform: scale(0.8);
}
.cursor.press::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: click-ring 0.45s ease-out forwards;
}
@keyframes click-ring {
  from {
    opacity: 1;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* Workflow: a compact row of icons that light up on hover */
.section.compact {
  padding-top: 56px;
  padding-bottom: 56px;
}
.h2.sm {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.12;
}
.flow {
  list-style: none;
  margin: 34px auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 40px;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 64px;
  font-size: 13.5px;
  color: var(--fg-3);
  transition: color 0.35s;
}
.flow-ico {
  width: 34px;
  height: 34px;
  fill: #6f7277;
  transition: fill 0.35s, transform 0.35s;
}
/* Cut-outs and strokes inside an icon take the section background. */
.flow-ico .cut {
  fill: var(--bg);
}
.flow-ico .line {
  fill: none;
  stroke: var(--bg);
  stroke-width: 2;
  stroke-linecap: round;
}
.flow-step {
  cursor: default;
}
.flow-step:hover {
  color: var(--fg);
}
.flow-step:hover .flow-ico {
  fill: var(--light);
  transform: translateY(-3px) scale(1.06);
}
.flow-step:hover .flow-ico .hi {
  fill: var(--amber);
}

/* ---------- dot spotlights ----------
   Hovering switches dots on near the pointer, in the same grey-white as the bright dots.
   (--mx / --my are set from main.js.) */

/* Closing card: a copy of the grid at full brightness, shown only around the pointer. */
.dots-glow {
  position: absolute;
  top: 70px;
  bottom: 70px;
  width: 80px;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(237, 236, 236, 0.75) 1.5px, transparent 1.9px);
  background-size: 10px 10px;
  -webkit-mask: radial-gradient(circle 46px at var(--mx, -999px) var(--my, -999px), #000 35%, transparent 100%);
  mask: radial-gradient(circle 46px at var(--mx, -999px) var(--my, -999px), #000 35%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s;
}
.dots-glow.left {
  left: 56px;
}
.dots-glow.right {
  right: 56px;
}
.cta-card:hover .dots-glow {
  opacity: 0.8;
}

/* "Relay" written in dots (drawn on a canvas in main.js), sitting on the heading's baseline. */
.dot-word {
  display: inline-block;
}
.dot-word canvas {
  display: inline-block;
  vertical-align: -0.24em;
  margin-right: 0.04em;
  cursor: default;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    display: none;
  }
  .reel-canvas {
    transition: none;
  }
  .stage-paint {
    animation: none;
  }
}