.reel-flow__motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(var(--motif-ink), 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--motif-ink), 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
}
.reel-flow__motif::before,
.reel-flow__motif::after { content: ''; position: absolute; pointer-events: none; }
.reel-flow__motif::before {
  inset: 0;
  background-image: radial-gradient(rgba(var(--motif-ink), 0.09) 1px, transparent 1.4px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 85% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 60% at 85% 40%, #000 0%, transparent 70%);
  opacity: 0.55;
}
.reel-flow__motif::after {
  width: 780px;
  height: 780px;
  border-radius: 50%;
  top: -340px;
  right: -180px;
  background: radial-gradient(circle, rgba(255, 46, 0, 0.16), transparent 62%);
  filter: blur(52px);
}
.reel-flow__stage {
  --phone-w: clamp(190px, 18vw, 270px);
  position: relative;
  width: 100%;
  height: calc(var(--phone-w) * 19.5 / 9);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.reel-flow__stage.is-dragging { cursor: grabbing; }
.reel-flow__track {
  --bleed: 96px;
  position: absolute;
  inset: calc(var(--bleed) * -1) 0;
  perspective: 1600px;
  perspective-origin: 50% calc(var(--bleed) + (100% - 2 * var(--bleed)) * 0.4);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}
.reel-flow__slide {
  position: absolute;
  top: var(--bleed);
  left: 50%;
  width: var(--phone-w);
  margin-left: calc(var(--phone-w) / -2);
  will-change: transform, opacity;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.reel-flow__slide:not(.is-center) { cursor: pointer; }
.reel-flow__stage.is-dragging .reel-flow__slide { cursor: grabbing; }
.reel-flow__stage.is-moving .reel-flow__slide { pointer-events: none; }

.reel-flow__phone {
  --r: calc(var(--phone-w) * 0.145);
  --bezel: calc(var(--phone-w) * 0.022);
  position: relative;
  aspect-ratio: 9 / 19.5;
  padding: var(--bezel);
  border: 2px solid transparent;
  border-radius: var(--r);
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(140deg, #6b6b72 0%, #2a2a2e 28%, #16161a 55%, #3c3c42 82%, #77777e 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 80px -40px rgba(0, 0, 0, 0.85);
}
.reel-flow__island {
  position: absolute;
  top: calc(var(--bezel) + var(--phone-w) * 0.03);
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: calc(var(--phone-w) * 0.088);
  border-radius: 999px;
  background: #000;
  z-index: 4;
  pointer-events: none;
}
.reel-flow__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r) - var(--bezel) - 2px);
  overflow: hidden;
  background: #0d0d0f;
}
.reel-flow__screen > img,
.reel-flow__screen > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.reel-flow__screen > video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 420ms ease-out;
}
.reel-flow__screen.is-playing > video { opacity: 1; }

.reel-flow__sound {
  position: absolute;
  right: calc(var(--phone-w) * 0.06);
  bottom: calc(var(--phone-w) * 0.06);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.62);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 220ms ease-out, transform 220ms ease-out, background-color 160ms ease-out;
}
.reel-flow__sound svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reel-flow__sound:hover { background: rgba(10, 10, 12, 0.85); }
.reel-flow__screen.is-playing .reel-flow__sound {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.reel-flow__screen::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 22px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.reel-flow__screen.is-paused::after { opacity: 1; transform: none; }

.reel-flow__stage:focus-visible .reel-flow__slide.is-center .reel-flow__phone {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.reel-flow__controls {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
}
.reel-flow__controls--wide { display: none; }
@media (min-width: 1280px) {
  .reel-flow__controls--stacked { display: none; }
  .reel-flow__controls--wide {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 16px;
  }
}
.reel-flow__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out;
}
.reel-flow__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reel-flow__btn:hover,
.reel-flow__btn:focus-visible {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border);
  outline: none;
}
.reel-flow__count {
  min-width: 64px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1280px) {
  .about-reels > .reel-flow__stage {
    --rf-fit: 1;
    height: auto;
    min-height: 320px;
  }
}

@media (max-width: 1279px) {
  .reel-flow__stage {
    --phone-w: clamp(260px, min(38vw, (100svh - 160px) * 9 / 19.5), 340px);
    --rf-step: 0.74;
    --rf-turn: 24;
  }
}
@media (max-width: 640px) {
  .reel-flow__stage {
    --phone-w: min(58vw, 250px);
    --rf-step: 0.68;
    --rf-turn: 30;
  }
}