/* Product Cinema hero — magnetic media stream + camera move through the phone.
   Everything is scoped under .pc3 / .pc3-* on purpose: the site's own
   :root/body/button/a rules (pro/website/index.html <style>) must stay the
   single source of truth for global theme tokens. Do not reintroduce a bare
   :root, body or * selector here — it would silently override the rest of
   the page (this is exactly what the lab version under
   assets/gpt_product_cinema_v3/ does, which is fine there since that file
   *is* the whole page; here it would leak into nav/footer/pricing/etc). */

/* Global utility (deliberately not scoped under .pc3 — also used by the
   Features section heading below): visually hidden but present for screen
   readers and search engines, standard clip-based sr-only technique. Used
   where product feedback asked for text to disappear visually without the
   page silently losing its <h1> or a section's accessible heading. */
.pc3-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pc3 {
  --pc3-bg: #07060b;
  --pc3-line: rgba(255, 255, 255, .13);
  --pc3-coral: #ff657d;
  --pc3-orange: #ffad65;
  --pc3-teal: #40e3c4;
  --pc3-gold: #ebc978;
  --pc3-text: #fffaf2;
  --pc3-muted: #c8c1d1;
  --pc3-grad: linear-gradient(110deg, var(--pc3-coral), var(--pc3-orange) 49%, var(--pc3-teal));
  --pc3-ease: cubic-bezier(.22, 1, .36, 1);
  --dt-nav-h: 68px;
  color-scheme: dark;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--dt-nav-h));
  padding: clamp(10px, 2.4vh, 28px) clamp(16px, 4vw, 56px);
  color: var(--pc3-text);
  background:
    radial-gradient(circle at 78% 43%, rgba(64, 227, 196, .095), transparent 29%),
    radial-gradient(circle at 14% 12%, rgba(255, 101, 125, .11), transparent 25%),
    linear-gradient(145deg, #07060b, #0d0915 52%, #06050a);
}
.pc3 button, .pc3 a { font: inherit; }
.pc3-noise {
  position: absolute; inset: 0; z-index: -2; opacity: .17; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.pc3::before {
  content: ""; position: absolute; inset: 0; z-index: -4;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at 70% 43%, #000 0 28%, transparent 77%);
}
.pc3-aurora { position: absolute; z-index: -3; width: min(760px, 70vw); aspect-ratio: 1; border-radius: 50%; filter: blur(110px); opacity: .21; pointer-events: none; }
.pc3-aurora--left { left: -32vw; top: -24vw; background: var(--pc3-coral); }
.pc3-aurora--right { right: -32vw; bottom: -25vw; background: var(--pc3-teal); }

/* ---- Layout: copy column (now just the primary CTA) + cinema column,
   stacked below 1081px. ---- */
.cinema-layout {
  position: relative; z-index: 10; width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  grid-template-areas: "primary cinema";
  align-items: center; gap: clamp(14px, 3vh, 32px) clamp(20px, 3.5vw, 56px);
}
.pc3-copy--primary { grid-area: primary; }
.pc3-cinema { grid-area: cinema; }
@media (max-width: 1080px) {
  .cinema-layout { grid-template-columns: 1fr; grid-template-areas: "primary" "cinema"; text-align: center; }
}

.pc3-copy { max-width: 620px; }
@media (max-width: 1080px) { .pc3-copy { margin: 0 auto; } }

.pc3-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1080px) { .pc3-actions { justify-content: center; } }
.pc3-actions .btn { min-height: 44px; }

/* ---- Cinema stage ----
   --pc3-device-w is the single source of truth for the phone's width; the
   stage's height floor is *derived* from it (aspect-ratio 9/18.55 + a fixed
   margin) instead of being a second, independently-tuned number. Two
   separately guessed clamp()s drifted out of sync before (the phone ended
   up taller than its own overflow:clip stage on mobile, silently cropping
   its bottom edge — exactly where the share/success buttons live) — a
   calc() tied to the same custom property can't drift like that again. */
.pc3-cinema { --pc3-device-w: clamp(190px, 15vw, 250px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.4vh, 16px); perspective: 1700px; }
.pc3-stage {
  position: relative; width: 100%; height: clamp(calc(var(--pc3-device-w) * 2.061 + 90px), 56vh, 560px);
  display: grid; place-items: center; perspective: 1700px; transform-style: preserve-3d;
  overflow: clip; border-radius: 32px;
}
.pc3-stage::after {
  content: ""; position: absolute; z-index: -2; bottom: 3%; width: min(560px, 60vw); height: 100px;
  border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .82), transparent 72%); filter: blur(18px);
}
.pc3-stream-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.pc3-orbits { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pc3-orbits span { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%; transform-style: preserve-3d; }
.pc3-orbits span:nth-child(1) { width: min(620px, 62vw); aspect-ratio: 1; transform: translate(-50%, -49%) rotateX(70deg) rotateZ(-11deg); }
.pc3-orbits span:nth-child(2) { width: min(430px, 42vw); aspect-ratio: 1; border-color: rgba(64, 227, 196, .17); transform: translate(-50%, -47%) rotateX(74deg) rotateZ(22deg); }
.pc3-orbits span:nth-child(3) { width: min(730px, 72vw); aspect-ratio: 1; border-color: rgba(235, 201, 120, .07); transform: translate(-50%, -49%) rotateX(73deg) rotateZ(9deg); }

.pc3-camera-rig { position: relative; z-index: 8; transform-style: preserve-3d; will-change: transform, filter; transition: transform .3s var(--pc3-ease), filter .3s var(--pc3-ease); }
.pc3-device {
  position: relative; width: var(--pc3-device-w); aspect-ratio: 9 / 18.55; padding: 10px; border-radius: 44px;
  transform-style: preserve-3d;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .5), transparent 8% 78%, rgba(64, 227, 196, .15)),
    linear-gradient(155deg, #776d81, #2b2331 14%, #07060b 64%, #463b50);
  box-shadow:
    0 60px 100px -40px rgba(0, 0, 0, .96), 0 0 0 1px rgba(255, 255, 255, .25),
    inset 0 0 0 2px rgba(255, 255, 255, .055),
    20px 0 60px -38px rgba(64, 227, 196, .34), -20px 0 60px -38px rgba(255, 101, 125, .34);
  animation: pc3-device-float 6s ease-in-out infinite;
}
.pc3-device__edge { position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .23), transparent 14% 75%, rgba(255, 255, 255, .07)); pointer-events: none; }
.pc3-device__buttons { position: absolute; right: -4px; top: 23%; display: flex; flex-direction: column; gap: 10px; }
.pc3-device__buttons i { display: block; width: 3px; height: 46px; border-radius: 4px; background: linear-gradient(#62586a, #18141d); }
.pc3-device__buttons i:last-child { height: 30px; }
.pc3-device__camera { position: absolute; z-index: 20; left: 50%; top: 14px; width: 70px; height: 19px; transform: translateX(-50%); border-radius: 18px; background: #040307; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.pc3-device__camera i { position: absolute; right: 11px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #354064, #070812 68%); }
@keyframes pc3-device-float { 0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(2deg); } 50% { transform: translateY(-12px) rotateY(5deg) rotateX(-1deg); } }

.pc3-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 36px; transform-style: preserve-3d;
  background:
    radial-gradient(circle at 15% 4%, rgba(255, 101, 125, .29), transparent 30%),
    radial-gradient(circle at 87% 96%, rgba(64, 227, 196, .24), transparent 35%),
    linear-gradient(165deg, #1d162b, #0d0a14 64%);
}
.pc3-screen__glass { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 22% 73%, rgba(255, 255, 255, .025)); mix-blend-mode: screen; transition: opacity .5s; }
.pc3-appbar { position: absolute; z-index: 15; left: 16px; right: 16px; top: 30px; display: flex; align-items: center; justify-content: space-between; }
.pc3-appbar__brand { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 900; }
/* Dark backdrop + gradient glyph — matches the real app icon exactly
   (assets/influencer/screenshots/icon-512.png), not the inverse. */
.pc3-appbar__brand b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #100e1c; }
.pc3-appbar__brand svg { width: 62%; height: 62%; }
.pc3-appbar__signal { display: flex; gap: 3px; align-items: flex-end; }
.pc3-appbar__signal i { display: block; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.pc3-appbar__signal i:nth-child(1) { height: 4px; }
.pc3-appbar__signal i:nth-child(2) { height: 6px; }
.pc3-appbar__signal i:nth-child(3) { height: 8px; }

.pc3-view {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 60px 14px 22px;
  opacity: 0; transform: translateY(20px) scale(.965); filter: blur(6px); pointer-events: none; transition: .5s var(--pc3-ease);
}
.pc3-view.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* flex column (not the pre-existing height:58%-on-a-percentage-height child)
   so .pc3-media-card__visual actually gets a real rendered height: a block
   whose own height is only min-height-constrained (not an explicit height)
   makes CSS treat percentage heights on its children as 'auto' per spec,
   which collapsed the gradient thumbnail to 0px here even before this scene
   was reworked — flex-grow distributes .pc3-media-card's real used height
   properly regardless of how that height was established. */
.pc3-media-card { position: relative; width: 100%; min-height: 58%; display: flex; flex-direction: column; border: 1px solid var(--pc3-line); border-radius: 20px; background: rgba(29, 23, 44, .89); box-shadow: 0 20px 44px rgba(0, 0, 0, .32); overflow: hidden; }
.pc3-media-card__visual { position: relative; flex: 1 1 auto; min-height: 0; margin: 10px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 101, 125, .64), rgba(255, 173, 101, .22) 48%, rgba(64, 227, 196, .58)); overflow: hidden; }
.pc3-media-card__visual::before { content: ""; width: 150%; height: 40%; transform: rotate(-12deg); background: rgba(255, 255, 255, .12); filter: blur(18px); }
.pc3-media-card__play { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(5, 4, 8, .56); backdrop-filter: blur(12px); }
/* Duration badge + scrub line: makes the card read unambiguously as a video
   player (not a generic media card) at a glance, per product feedback. */
.pc3-media-card__badge { position: absolute; right: 8px; top: 8px; padding: 2px 7px; border-radius: 7px; background: rgba(5, 4, 8, .62); font-size: .58rem; font-weight: 800; letter-spacing: .02em; }
.pc3-media-card__scrub { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.pc3-media-card__scrub i { display: block; width: 38%; height: 100%; border-radius: inherit; background: #fff; }
.pc3-media-card__text { padding: 4px 13px 11px; }
.pc3-media-card__text i { display: block; height: 6px; margin: 7px 0; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.pc3-media-card__text i:nth-child(1) { width: 84%; }
.pc3-media-card__text i:nth-child(2) { width: 58%; }
/* Dims the card so the highlighted CTA reads as the sole focus once it grows
   and re-centers — sits above the card's own background, below the CTA/finger
   (both get their own higher z-index). */
.pc3-media-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(4, 3, 8, .5); opacity: 0; pointer-events: none; transition: opacity .45s var(--pc3-ease); }
.pc3-view[data-pc3-view="source"][data-pc3-sub="highlight"] .pc3-media-card::after,
.pc3-view[data-pc3-view="source"][data-pc3-sub="tap"] .pc3-media-card::after { opacity: 1; }

.pc3-share {
  position: absolute; z-index: 5; right: 12px; bottom: 12px; display: grid; place-items: center; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: var(--pc3-grad); color: #07060b; cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 101, 125, .24); animation: pc3-pulse 1.8s ease-in-out infinite;
  transition: transform .5s var(--pc3-ease), box-shadow .5s var(--pc3-ease);
}
.pc3-share svg { width: 46%; height: 46%; flex: none; }
@keyframes pc3-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255, 101, 125, 0); } }

/* The source-scene CTA: same button, now a labelled pill instead of a bare
   icon circle (per product feedback — this one CTA is allowed visible text,
   see website.hero_cinema.share_cta). Positioned via left/top (not the base
   right/bottom) specifically so the highlight beat below can animate left/top
   to a true left:50%/transform:translate(-50%,-50%) center — a fixed
   translate() offset instead overflowed the card on narrow phones, since the
   pill's own width (~110-125px, mostly text-driven) doesn't shrink with
   --pc3-device-w the way a proportional offset assumes. */
.pc3-share--cta {
  left: 100%; top: 100%; right: auto; bottom: auto;
  transform: translate(calc(-100% - 12px), calc(-100% - 12px));
  width: auto; height: 40px; padding: 0 16px 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
  animation: pc3-pulse 1.8s ease-in-out infinite;
  transition: left .5s var(--pc3-ease), top .5s var(--pc3-ease), transform .5s var(--pc3-ease), box-shadow .5s var(--pc3-ease);
}
.pc3-share--cta svg { width: 17px; height: 17px; }
.pc3-share__label { font-size: .72rem; font-weight: 800; white-space: nowrap; }
/* Highlight beat: the CTA visibly grows and re-centers before the finger
   taps it — true centering (left:50% + translate(-50%,-50%)), so it can
   never overflow the card regardless of the pill's own rendered width. */
.pc3-view[data-pc3-view="source"][data-pc3-sub="highlight"] .pc3-share--cta,
.pc3-view[data-pc3-view="source"][data-pc3-sub="tap"] .pc3-share--cta {
  left: 50%; top: 56%;
  transform: translate(-50%, -50%) scale(1.3);
  animation: none;
  box-shadow: 0 0 0 11px rgba(255, 101, 125, .14), 0 16px 32px rgba(255, 101, 125, .38);
}

/* ---- Finger cursor: shared tap/swipe primitive for the source and share
   scenes. Visibility is driven by the per-view data-pc3-sub attribute (see
   below); its left/top position is set as an inline style by
   hero-product-cinema.js, computed from the real target element's measured
   position (getBoundingClientRect) rather than guessed percentages — a
   fixed percentage only ever matched the specific viewport it was eyeballed
   against and drifted off the actual button on other phones/breakpoints. */
.pc3-finger { position: absolute; z-index: 6; left: 50%; top: 100%; width: 30px; height: 30px; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); transition: left .5s var(--pc3-ease), top .5s var(--pc3-ease), opacity .3s; }
.pc3-finger svg { width: 100%; height: 100%; transform: rotate(-18deg); }
.pc3-finger__ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
/* Re-applying the "tap" attribute value (even to the same view on a replay)
   is treated as a fresh selector match, so the animation restarts every time
   without any JS class-toggling — same idiom the existing pc3-progress/
   pc3-meter bars already rely on via .is-active. */
.pc3-view[data-pc3-view="source"][data-pc3-sub="tap"] .pc3-finger__ring,
.pc3-view[data-pc3-view="share"][data-pc3-sub="more-tap"] .pc3-finger__ring,
.pc3-view[data-pc3-view="share"][data-pc3-sub="tap"] .pc3-finger__ring { animation: pc3-finger-tap .5s var(--pc3-ease); }
@keyframes pc3-finger-tap { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.9); } }

.pc3-view[data-pc3-view="source"][data-pc3-sub="tap"] .pc3-finger { opacity: 1; }

.pc3-share-sheet { position: relative; z-index: 2; align-self: end; width: calc(100% + 28px); margin: 0 -14px -22px; padding: 26px 12px; border-radius: 26px 26px 0 0; background: rgba(246, 243, 250, .97); color: #17121e; box-shadow: 0 -22px 46px rgba(0, 0, 0, .28); transition: opacity .4s var(--pc3-ease), transform .4s var(--pc3-ease); }
/* Sheet 1 deliberately has no DownloadThat tile (per product feedback — a
   real Android share sheet buries it behind "More…" too); it fades/slides
   out once the story swipes over to the full app grid below. */
.pc3-view[data-pc3-view="share"][data-pc3-sub="sheet2"] .pc3-share-sheet,
.pc3-view[data-pc3-view="share"][data-pc3-sub="swipe-dt"] .pc3-share-sheet,
.pc3-view[data-pc3-view="share"][data-pc3-sub="tap"] .pc3-share-sheet { opacity: 0; transform: translateY(10px); pointer-events: none; }
/* Four fixed 56px-wide items (224px+ gaps) never fit inside the phone's own
   screen width - --pc3-device-w floors at 190px on every real phone (15vw is
   nowhere near that floor below ~1267px viewports), leaving well under 150px
   for this row. A fixed width meant the row simply overflowed past the
   phone's overflow:hidden edge, cropping a tile and its label (caught via a
   real Samsung Galaxy screenshot). flex:1 1 0 + min-width:0 instead divides
   whatever width IS available equally among all items, so the row's rendered
   width can never exceed its container - nothing to clip. */
.pc3-share-apps { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pc3-share-apps span, .pc3-share-apps button { flex: 1 1 0; min-width: 0; max-width: 56px; padding: 0; border: 0; background: none; color: inherit; text-align: center; }
.pc3-share-apps b { display: grid; place-items: center; width: min(44px, 100%); aspect-ratio: 1; margin: 0 auto 6px; border-radius: 14px; background: #d9d4df; font-size: 19px; }
.pc3-share-apps small { display: block; font-size: .5rem; font-weight: 800; overflow-wrap: break-word; }
.pc3-view[data-pc3-view="share"][data-pc3-sub="swipe-more"] .pc3-share-apps__more b,
.pc3-view[data-pc3-view="share"][data-pc3-sub="more-tap"] .pc3-share-apps__more b { background: #c9c1d6; box-shadow: 0 0 0 4px rgba(64, 227, 196, .22); }

/* ---- Sheet 2: the expanded "More" app grid, with DownloadThat placed a row
   down (not in the first visible row) and highlighted, requiring the swipe
   beat below to reveal it — matches a real Android "more apps" list instead
   of an instant reveal. Fixed proportion of --pc3-device-w, not a percentage of the
   view's own height — sized so row 1 fully shows and DownloadThat's row is
   only half-visible below the fold to start, giving the swipe beat below
   something real to reveal instead of nothing (a tall-enough sheet just
   shows every icon at once). */
.pc3-share-grid {
  position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 22px; height: calc(var(--pc3-device-w) * .37); overflow: hidden;
  border-radius: 22px 22px 0 0; background: rgba(246, 243, 250, .97); color: #17121e; box-shadow: 0 -22px 46px rgba(0, 0, 0, .28);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s var(--pc3-ease), transform .4s var(--pc3-ease);
}
.pc3-view[data-pc3-view="share"][data-pc3-sub="sheet2"] .pc3-share-grid,
.pc3-view[data-pc3-view="share"][data-pc3-sub="swipe-dt"] .pc3-share-grid,
.pc3-view[data-pc3-view="share"][data-pc3-sub="tap"] .pc3-share-grid { opacity: 1; transform: none; pointer-events: auto; }
.pc3-share-grid__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; padding: 14px 10px; transform: translateY(0); transition: transform .6s var(--pc3-ease); }
/* The swipe beat shifts the grid up by roughly one row (a fixed proportion
   of --pc3-device-w, not a percentage of the inner grid's own height — that
   would keep changing as rows are added/removed) bringing the DownloadThat
   tile fully into view the same way a real finger-drag would. */
.pc3-view[data-pc3-view="share"][data-pc3-sub="swipe-dt"] .pc3-share-grid__inner,
.pc3-view[data-pc3-view="share"][data-pc3-sub="tap"] .pc3-share-grid__inner { transform: translateY(calc(var(--pc3-device-w) * -.3)); }
.pc3-share-grid__inner span, .pc3-share-grid__inner button { padding: 0; border: 0; background: none; color: inherit; text-align: center; }
.pc3-share-grid__inner b { display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin: 0 auto 5px; border-radius: 14px; background: #d9d4df; font-size: 17px; }
.pc3-share-grid__inner small { display: block; font-size: .48rem; font-weight: 800; overflow-wrap: break-word; }
.pc3-share-grid__dt { cursor: pointer; }
/* Dark backdrop + gradient glyph — the real app icon, not the inverse — plus
   a glow ring so it reads as the one the finger is aiming for. */
.pc3-share-grid__dt b { background: #100e1c; box-shadow: 0 0 0 3px rgba(64, 227, 196, .35), 0 8px 18px rgba(255, 101, 125, .3); animation: pc3-pulse 1.8s ease-in-out infinite; }
.pc3-share-grid__dt svg { width: 60%; height: 60%; }

.pc3-view[data-pc3-view="share"][data-pc3-sub="swipe-more"] .pc3-finger,
.pc3-view[data-pc3-view="share"][data-pc3-sub="more-tap"] .pc3-finger,
.pc3-view[data-pc3-view="share"][data-pc3-sub="swipe-dt"] .pc3-finger,
.pc3-view[data-pc3-view="share"][data-pc3-sub="tap"] .pc3-finger { opacity: 1; }

.pc3-format-card, .pc3-ingest, .pc3-inside, .pc3-success {
  width: 100%; padding: 18px 14px; border: 1px solid var(--pc3-line); border-radius: 20px;
  background: rgba(29, 23, 44, .91); box-shadow: 0 20px 44px rgba(0, 0, 0, .32); text-align: center;
}
.pc3-format-card { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.pc3-format-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pc3-format-card button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 10px 6px;
  border: 1px solid var(--pc3-line); border-radius: 12px; background: rgba(255, 255, 255, .045); color: var(--pc3-text);
  cursor: pointer; transition: .22s;
}
.pc3-format-card button:hover, .pc3-format-card button:focus-visible { border-color: rgba(64, 227, 196, .58); transform: translateY(-2px); }
.pc3-format-card button b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .07); font-size: 15px; }
.pc3-format-card button span { display: block; font-size: .75rem; font-weight: 700; }

.pc3-ingest__core { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; background: var(--pc3-grad); color: #07060b; font-size: 34px; font-weight: 950; box-shadow: 0 14px 34px rgba(255, 101, 125, .2); transform-style: preserve-3d; }
.pc3-ingest__meter, .pc3-progress { height: 8px; margin: 13px 0 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.pc3-ingest__meter i, .pc3-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pc3-grad); }
.pc3-view.is-active .pc3-ingest__meter i { animation: pc3-meter 2.2s var(--pc3-ease) forwards; }
.pc3-view.is-active .pc3-progress i { animation: pc3-progress 2.05s var(--pc3-ease) forwards; }
@keyframes pc3-meter { to { width: 82%; } }
@keyframes pc3-progress { to { width: 100%; } }

.pc3-inside__file { position: relative; width: 78px; height: 92px; margin: 0 auto 12px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px; background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); box-shadow: 0 18px 42px rgba(0, 0, 0, .35); }
.pc3-inside__file::before { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent rgba(255, 255, 255, .11) transparent; }
.pc3-inside__file span { position: absolute; left: 11px; top: 12px; color: var(--pc3-gold); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.pc3-inside__file b { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--pc3-grad); color: #07060b; font-size: 19px; }
/* Status row mimicking the real app's "downloading…" card (filename +
   live percentage) so the final beat reads as the app itself mid-download,
   not an abstract file icon. */
.pc3-inside__row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: .62rem; font-weight: 700; color: var(--pc3-muted); }
.pc3-inside__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pc3-gold); box-shadow: 0 0 0 3px rgba(235, 201, 120, .22); animation: pc3-inside-dot 1s ease-in-out infinite; }
@keyframes pc3-inside-dot { 50% { opacity: .35; } }
.pc3-inside__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pc3-inside__percent { flex: none; color: var(--pc3-text); font-variant-numeric: tabular-nums; }

.pc3-success { border-color: rgba(64, 227, 196, .32); }
.pc3-success__check { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 21px; background: linear-gradient(135deg, var(--pc3-teal), #98f8e5); color: #07060b; font-size: 33px; font-weight: 950; box-shadow: 0 14px 34px rgba(64, 227, 196, .18); }
.pc3-success a { display: inline-flex; margin-top: 8px; min-height: 40px; padding: 0 14px; align-items: center; border-radius: 10px; background: var(--pc3-grad); color: #07060b; font-weight: 900; text-decoration: none; }

.pc3-source {
  position: absolute; z-index: 4; width: 96px; padding: 10px; border: 1px solid var(--pc3-line); border-radius: 20px;
  background: rgba(24, 20, 36, .86); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(18px);
  transform-style: preserve-3d; opacity: .82; will-change: transform, opacity, filter;
}
.pc3-source__icon { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 17px; }
/* Only Video and Audio — the app's share flow never offers an Images
   choice (no such toggle exists in video_downloader/web/static/index.html),
   so there is deliberately no third floating source card here. */
.pc3-source--video { left: 0; top: 22%; color: var(--pc3-coral); }
.pc3-source--audio { right: 0; top: 56%; color: var(--pc3-gold); }
.pc3-source__stack { position: relative; height: 26px; }
.pc3-source__stack i { position: absolute; left: 50%; width: 40px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, rgba(255, 101, 125, .5), rgba(64, 227, 196, .3)); transform: translateX(-50%); }
.pc3-source__stack i:nth-child(1) { transform: translateX(-50%) rotate(-9deg); }
.pc3-source__stack i:nth-child(3) { transform: translateX(-50%) rotate(9deg); }
.pc3-source__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; }
.pc3-source__wave i { width: 3px; border-radius: 4px; background: currentColor; }
.pc3-source__wave i:nth-child(1), .pc3-source__wave i:nth-child(5) { height: 10px; }
.pc3-source__wave i:nth-child(2), .pc3-source__wave i:nth-child(4) { height: 20px; }
.pc3-source__wave i:nth-child(3) { height: 26px; }

.pc3-glass-flare { position: absolute; z-index: 30; left: 50%; top: 50%; width: 55%; height: 72%; transform: translate(-50%, -50%) scale(.45); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(64, 227, 196, .15) 22%, transparent 62%); opacity: 0; filter: blur(18px); pointer-events: none; }
.pc3-portal { position: absolute; z-index: 29; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); opacity: 0; box-shadow: 0 0 60px rgba(64, 227, 196, .25), inset 0 0 34px rgba(255, 101, 125, .16); }
.pc3-portal span { position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(64, 227, 196, .35); }

/* ---- Passive step/progress indicator (no manual controls by design) ---- */
.pc3-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.pc3-timeline { width: min(300px, 60%); padding: 10px 14px; border: 1px solid var(--pc3-line); border-radius: 14px; background: rgba(15, 12, 22, .68); backdrop-filter: blur(18px); }
.pc3-timeline > span { color: var(--pc3-gold); font-size: .72rem; font-weight: 950; letter-spacing: .12em; }
.pc3-timeline p { display: inline; margin-left: 8px; color: var(--pc3-muted); font-size: .72rem; }
.pc3-timeline > div { height: 2px; margin-top: 9px; background: rgba(255, 255, 255, .1); }
.pc3-timeline i { display: block; width: 16.66%; height: 100%; background: var(--pc3-grad); transition: width .5s var(--pc3-ease); }
@media (max-width: 700px) { .pc3-timeline { display: none; } }

button:focus-visible, a:focus-visible { outline: 3px solid var(--pc3-teal); outline-offset: 3px; }

/* ---- Camera moves per phase ---- */
.pc3[data-pc3-phase="share"] .pc3-camera-rig { transform: translate3d(0, 0, 60px) rotateY(-2deg); }
.pc3[data-pc3-phase="format"] .pc3-camera-rig { transform: translate3d(0, 0, 130px) scale(1.04) rotateY(0deg); }
.pc3[data-pc3-phase="stream"] .pc3-camera-rig { transform: translate3d(0, 0, 210px) scale(1.1); }
.pc3[data-pc3-phase="inside"] .pc3-camera-rig { transform: translate3d(0, 0, 460px) scale(1.28); filter: saturate(1.06); }
.pc3[data-pc3-phase="inside"] .pc3-device { animation: none; }
.pc3[data-pc3-phase="inside"] .pc3-device__edge, .pc3[data-pc3-phase="inside"] .pc3-device__camera, .pc3[data-pc3-phase="inside"] .pc3-device__buttons { opacity: 0; transition: opacity .35s; }
.pc3[data-pc3-phase="inside"] .pc3-screen__glass { opacity: .2; }
.pc3[data-pc3-phase="inside"] .pc3-glass-flare { animation: pc3-flare .8s ease-out forwards; }
.pc3[data-pc3-phase="inside"] .pc3-portal { animation: pc3-portal .82s ease-out forwards; }
.pc3[data-pc3-phase="success"] .pc3-camera-rig { transform: translate3d(0, 0, 90px) scale(1.01) rotateY(4deg); }
.pc3[data-pc3-phase="success"] .pc3-device { animation: pc3-success-float 5.5s ease-in-out infinite; }
.pc3[data-pc3-phase="stream"] .pc3-source, .pc3[data-pc3-phase="inside"] .pc3-source, .pc3[data-pc3-phase="success"] .pc3-source { opacity: 0; filter: blur(7px); }
@keyframes pc3-flare { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 45% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } }
@keyframes pc3-portal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 45% { opacity: .75; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
@keyframes pc3-success-float { 0%, 100% { transform: translateY(0) rotateY(4deg); } 50% { transform: translateY(-9px) rotateY(-2deg); } }

/* ---- Reduced motion (manual toggle) ---- */
.pc3.is-reduced .pc3-source, .pc3.is-reduced .pc3-stream-canvas, .pc3.is-reduced .pc3-orbits { display: none; }
.pc3.is-reduced .pc3-device, .pc3.is-reduced .pc3-camera-rig { animation: none !important; transform: none !important; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .pc3-cinema { min-height: 0; }
  .pc3-stage { height: clamp(calc(var(--pc3-device-w) * 2.061 + 70px), 52vh, 480px); }
  .pc3-source--video { left: 4%; }
  .pc3-source--audio { right: 4%; }
}
@media (max-width: 700px) {
  .pc3 { padding: clamp(8px, 1.6vh, 16px) 14px; }
  .pc3-actions { gap: 8px; }
  .pc3-actions .btn { min-height: 42px; padding: 0 16px; font-size: .85rem; }
  .pc3-cinema { --pc3-device-w: clamp(185px, 52vw, 225px); }
  .pc3-stage { height: clamp(calc(var(--pc3-device-w) * 2.061 + 50px), 46vh, 400px); }
  .pc3-orbits span:nth-child(1) { width: 92vw; }
  .pc3-orbits span:nth-child(2) { width: 70vw; }
  .pc3-orbits span:nth-child(3) { width: 108vw; }
  .pc3-source { width: 70px; padding: 7px; border-radius: 15px; }
  /* Video top-left, Audio bottom-right — NOT both near the top (they
     collided at the low end of the stage-height clamp, 260px: a card is
     ~90px tall, so two cards fighting for the same vertical band overlapped
     on real, shorter phone viewports). */
  .pc3-source--video { left: -3%; top: 5%; }
  .pc3-source--audio { right: -3%; bottom: 5%; top: auto; }
  .pc3-source__icon { width: 27px; height: 27px; font-size: 13px; }
  .pc3-source__stack, .pc3-source__wave { transform: scale(.72); }
  .pc3-controls { gap: 8px; }
  .pc3[data-pc3-phase="inside"] .pc3-camera-rig { transform: translate3d(0, 0, 300px) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .pc3-source, .pc3-stream-canvas, .pc3-orbits, .pc3-glass-flare, .pc3-portal { display: none !important; }
  .pc3-device, .pc3-camera-rig { animation: none !important; transform: none !important; }
}

@media (forced-colors: active) {
  .pc3-source, .pc3-media-card, .pc3-format-card button, .pc3-share-sheet, .pc3-ingest, .pc3-inside, .pc3-success { border: 1px solid CanvasText; }
}