/* YPS AI Agent hero animation, in the original hero's visual slot (the copy,
   buttons and layout are the original .civic-hero ones in styles.css).
   One phone on a soft aura in the YPS AI mark's colours plays the agent:
   typing in light mode (red phone), typing in dark mode (black), and speech
   to text (blue), turning and changing colour while edge-on between them.
   WhatsApp and Telegram stand either side of it the whole time, marked
   "Coming soon". The sequence loops (yps-ai-hero.js). */

.civic-hero-visual.civic-showcase {
  --ph: clamp(440px, 64vh, 580px);          /* phone height */
  --pw: calc(var(--ph) * 0.4713);           /* phone width: the art is 592 x 1256 */
  --fan: 0.74;                              /* how far out the side phones stand, in phone widths */
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, calc(var(--pw) * 2.3));
  height: calc(var(--ph) + 48px);
  margin: -24px 0 -36px;
}

/* Side by side, the phone centres on the empty space right of the copy: from
   the end of the text to the page's right edge. The copy column (1.05fr of
   the original grid) is often wider than the text in it (the lead stops at
   590px), so centring in the visual column alone sits too far right. */
@media (min-width: 941px) {
  .civic-hero-inner:has(> .civic-showcase) {
    --hero-gap: clamp(30px, 4vw, 64px);
    gap: var(--hero-gap);
    container-type: inline-size;
    /* The copy and phones sit a little lower than the original hero. */
    --hero-drop: 40px;
    margin-top: var(--hero-drop);
    /* The audience ribbons start just below the first screen, so the copy and
       phones have it to themselves: the hero's top padding, the drop above,
       and the ribbons' 62px margin (styles.css) plus this fill the screen.
       Capped for very tall screens. The copy and phones stay at the top. */
    min-height: min(calc(100vh - clamp(136px, 10vw, 174px) - var(--hero-drop) - 62px), 800px);
    min-height: min(calc(100svh - clamp(136px, 10vw, 174px) - var(--hero-drop) - 62px), 800px);
    align-content: start;
  }

  .civic-hero-visual.civic-showcase {
    --copy-col: calc((100cqw - var(--hero-gap)) * 0.525);
    translate: calc((min(var(--copy-col), 590px) - var(--copy-col) - var(--hero-gap) + 40px) / 2) 0;
  }
}

.civic-showcase-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pw) * 3.2);
  height: calc(var(--ph) * 1.2);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(50% 42% at 50% 30%, rgba(189, 97, 222, 0.42), transparent 72%),
    radial-gradient(52% 40% at 50% 74%, rgba(33, 167, 231, 0.34), transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}

.civic-showcase-phone,
.civic-showcase-side > img {
  filter: drop-shadow(0 30px 34px rgba(23, 23, 25, 0.16));
}

.civic-showcase-phone {
  position: relative;
  z-index: 2;
  width: var(--pw);
  aspect-ratio: 592 / 1256;
}

.civic-showcase-phone > img,
.civic-showcase-phone > video,
.civic-showcase-phone > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* One still per colour; only the current one shows, and none while a
   turn clip plays over them. */
.civic-showcase-phone > img { opacity: 0; }
.civic-showcase-phone > img.is-shown { opacity: 1; }
.civic-showcase.is-fading .civic-showcase-phone > img { transition: opacity 300ms ease; }
.civic-showcase.is-spinning .civic-showcase-phone > img { opacity: 0; }

/* A turn (a clip, or frames drawn on a canvas) covers everything only while
   it plays. */
.civic-showcase-phone > video,
.civic-showcase-phone > canvas {
  z-index: 4;
  opacity: 0;
}

.civic-showcase-phone > video.is-playing,
.civic-showcase-phone > canvas.is-playing { opacity: 1; }

/* The whole screen, status bar and island included, is the scene video. It
   reaches 2px (of the 592px art) into the black bezel, so the stills' own
   white screen never shows as a hairline around it. */
.civic-showcase-screen {
  position: absolute;
  left: 6.25%;
  top: 5.295%;
  z-index: 3;
  width: 87.5%;
  height: 89.411%;
  overflow: hidden;
  border-radius: 15.83% / 7.3%;
}

/* A turn takes over from the screen (and hands back to it) in one frame:
   it carries the same picture. Only the no-turn fallback fades. */
.civic-showcase.is-turning .civic-showcase-screen { opacity: 0; }
.civic-showcase.is-fading .civic-showcase-screen { transition: opacity 160ms ease; }

.civic-showcase-screen > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.civic-showcase-screen > video.is-active { opacity: 1; }

/* WhatsApp and Telegram stand either side of the phone, tilted out.
   --soon-x places each one's "Coming soon" caption (below). */
.civic-showcase-side {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: calc(var(--pw) * 0.835);
  --soon-x: calc(max((var(--fan) - 0.0825) * var(--pw) / 2, (var(--fan) + 0.1675) * var(--pw) - 25vw) - var(--pw) * 0.045);
}

.civic-showcase-side > img {
  display: block;
  width: 100%;
  height: auto;
}

.civic-showcase-side.is-left {
  transform: translate(calc(-50% - var(--pw) * var(--fan)), -47%) rotate(-3deg);
}

.civic-showcase-side.is-right {
  transform: translate(calc(-50% + var(--pw) * var(--fan)), -47%) rotate(3deg);
}

/* Not launched yet: a glass caption under each side phone, tilted with it.
   --soon-x centres it on the part of the phone left visible: between the
   centre phone and the phone's outer edge, or the screen's edge when the
   phone runs off it. The phone's 3deg tilt carries the caption about 0.045
   phone widths inwards, which its last term takes back. */
.civic-showcase-soon {
  position: absolute;
  top: calc(100% + 14px);
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--civic-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 6px 18px rgba(23, 23, 25, 0.06);
  color: var(--civic-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.civic-showcase-soon-app {
  color: var(--civic-ink);
  font-weight: 600;
}

.civic-page.site-dark .civic-showcase-soon {
  background: rgba(30, 30, 33, 0.62);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

.civic-showcase-side.is-left .civic-showcase-soon {
  left: var(--soon-x);
  transform: translateX(-50%);
}

.civic-showcase-side.is-right .civic-showcase-soon {
  right: var(--soon-x);
  transform: translateX(50%);
}

/* Narrower visual column: smaller phones, fanned a little closer. */
@media (max-width: 1180px) {
  .civic-hero-visual.civic-showcase {
    --ph: clamp(400px, 56vh, 520px);
    --fan: 0.66;
  }

  /* Less room beside the centre phone: the label is just "Coming soon". */
  .civic-showcase-soon-app { display: none; }
}

/* Tablets keep the copy left and the phones right, in two equal columns, with
   the phones sized so the fanned three fit their column: clear of the copy
   and of the screen's edge. */
@media (min-width: 621px) and (max-width: 940px) {
  .civic-hero-inner:has(> .civic-showcase) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .civic-hero-visual.civic-showcase {
    --fan: 0.62;
    --pw: min(calc((50vw - 16px) / 2.075), 217px);
    --ph: calc(var(--pw) / 0.4713);
    width: 100%;
    margin: -12px 0 -24px;
  }

  .civic-showcase-soon {
    top: calc(100% + 10px);
    padding: 5px 9px;
    font-size: 10.5px;
  }
}

/* Phones: the animation sits above the copy. */
@media (max-width: 620px) {
  /* All three phones fit the screen: the side ones tuck in closer, and the
     whole group (tilt included, about 2 phone widths) leaves 12px a side. */
  .civic-hero-visual.civic-showcase {
    --fan: 0.54;
    --pw: min(calc((100vw - 24px) / 2), 207px);
    --ph: calc(var(--pw) / 0.4713);
    width: 100%;
    margin: 0 auto 24px;
  }

  .civic-showcase-soon {
    top: calc(100% + 10px);
    padding: 5px 7px;
    font-size: 10px;
  }
}