/* ============================================================================
   PCS (pcs-works.com) TV channel. Look: "Machined steel broadcast".
   The site's brushed-metal aesthetic and blue marble cards become a
   broadcast studio: graphite brushed steel, PCS blue light (#2E6BC6), warm
   sand-gold accents (#D4A970, #E6BE85), the blue marble texture as the light
   ground, and a CRT look for the 1987 cable TV heritage scenes.
   Faces from the site: Fraunces (display, italic for accent words) + Outfit.
   One focal motion per screen; grounds drift slowly.
   ========================================================================= */
.scene[data-theme^="pc-"] {
  --display: "Fraunces", Georgia, serif;
  --text: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --blue: #2E6BC6; --sand: #D4A970; --sand2: #E6BE85;
}
.hero { font-family: var(--display); font-weight: 400; font-size: calc(104 * var(--px)); line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; font-variation-settings: "opsz" 144; }
.em { font-style: italic; font-weight: 400; color: var(--accent); }
.lede { font-family: var(--text); font-weight: 300; font-size: calc(46 * var(--px)); line-height: 1.36; color: var(--prose); max-width: calc(1100 * var(--px)); text-wrap: pretty; }
.kicker { font-family: var(--text); font-weight: 600; font-size: calc(28 * var(--px)); letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: calc(18 * var(--px)); }
.kicker::before { content: ''; width: calc(46 * var(--px)); height: calc(4 * var(--px)); background: var(--blue); box-shadow: 0 0 calc(14 * var(--px)) rgba(46,107,198,0.9); flex: none; }

/* ---------------------------------------------------------------------------
   GROUNDS
   ------------------------------------------------------------------------ */
.ground { overflow: hidden; }
.scene[data-theme="pc-steel"], .scene[data-theme="pc-cobalt"], .scene[data-theme="pc-crt"], .scene[data-theme="pc-photo"] {
  --ink: #F2F5F9; --prose: rgba(236,241,247,0.88); --meta: rgba(214,224,236,0.72);
  --rule: rgba(138,164,192,0.45); --accent: #E6BE85; --flash: #E6BE85;
}
.scene[data-theme="pc-steel"] .ground {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 60% 70% at 18% 0%, rgba(200,215,232,0.14), transparent 70%),
    radial-gradient(ellipse 55% 60% at 100% 100%, rgba(46,107,198,0.22), transparent 70%),
    linear-gradient(176deg, #2b3037 0%, #1a1d22 55%, #111317 100%);
}
.scene[data-theme="pc-cobalt"] .ground {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 70% 80% at 85% 10%, rgba(95,150,230,0.42), transparent 65%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(212,169,112,0.12), transparent 70%),
    linear-gradient(150deg, #1c4a92 0%, #11305f 50%, #0a1b38 100%);
}
.scene[data-theme="pc-crt"] .ground {
  background:
    radial-gradient(ellipse 80% 70% at 70% 40%, rgba(46,107,198,0.28), transparent 70%),
    linear-gradient(180deg, #0d1118 0%, #07090d 100%);
}
.scene[data-theme="pc-crt"] .ground::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px);
}
/* pc-marble: the site's own blue marble card background, light. */
.scene[data-theme="pc-marble"] {
  --ink: #0f2140; --prose: rgba(15,33,64,0.86); --meta: rgba(15,33,64,0.62);
  --rule: rgba(46,107,198,0.45); --accent: #2E6BC6; --flash: #2E6BC6;
}
.scene[data-theme="pc-marble"] .ground {
  background: linear-gradient(100deg, rgba(245,249,253,0.9) 0%, rgba(232,239,248,0.78) 50%, rgba(232,239,248,0.55) 100%), #e8eff8;
}
.scene[data-theme="pc-marble"] .ground::before {
  content: ''; position: absolute; inset: -6%; z-index: -1;
  background: url("assets/img/blue-marble.jpg") center / cover no-repeat;
  animation: pc-marble 30s ease-in-out infinite alternate;
}
.scene[data-theme="pc-marble"] .ground { isolation: isolate; }
@keyframes pc-marble { from { transform: scale(1.02) translate(-1%, 0); } to { transform: scale(1.1) translate(1.5%, -1%); } }
.scene[data-theme="pc-marble"] .kicker::before { box-shadow: none; }

/* Ambient: a slow band of blue studio light crosses the steel. */
.scene[data-theme="pc-steel"] .ground::after,
.scene[data-theme="pc-cobalt"] .ground::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(160,195,240,0.10) 48%, rgba(255,255,255,0.14) 50%, rgba(160,195,240,0.10) 52%, transparent 62%);
  background-size: 320% 100%;
  display: none;
}
@keyframes pc-sweep { 0% { background-position: 110% 0; } 55%, 100% { background-position: -10% 0; } }

/* scrim photo scenes: a navy wash, never brown. */
.scene[data-theme="pc-photo"] .ground { background: #0a1426; }
.scene[data-layout="scrim"][data-theme="pc-photo"] {
  --scrim: linear-gradient(96deg, rgba(8,16,32,0.94) 0%, rgba(8,16,32,0.82) 42%, rgba(8,16,32,0.25) 80%, rgba(8,16,32,0.1) 100%);
}
.scene[data-layout="scrim"] .scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,16,32,0.75) 0%, transparent 22%), linear-gradient(0deg, rgba(8,16,32,0.8) 0%, transparent 22%);
}
.scene[data-layout="scrim"].is-live .bg { animation: pc-drift-bg 22s ease-in-out alternate infinite; }
@keyframes pc-drift-bg { from { transform: scale(1.03); } to { transform: scale(1.12) translateX(-2%); } }
.scene[data-layout="scrim"] .beat { right: calc(760 * var(--px)); }

/* ---------------------------------------------------------------------------
   CHASSIS: logo bug on a steel plate, a lit blue top rule, a steel lower
   third with the clock (index.html #tvclock) at its right end.
   ------------------------------------------------------------------------ */
.scene { --logoh: 50; }
.mark {
  top: calc(-12 * var(--px)); left: calc(-4 * var(--px));
  padding: calc(14 * var(--px)) calc(24 * var(--px));
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px), #262a30;
  border: calc(1 * var(--px)) solid rgba(200,215,232,0.25);
  box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,0.35);
}
.mark-sub {
  top: calc(6 * var(--px)); font-family: var(--text); font-weight: 500;
  font-size: calc(24 * var(--px)); letter-spacing: 0.26em; color: var(--meta);
  padding-left: calc(30 * var(--px));
}
.mark-sub::before { content: ''; position: absolute; left: 0; top: 50%; width: calc(12 * var(--px)); height: calc(12 * var(--px)); margin-top: calc(-6 * var(--px)); border-radius: 50%; background: #e0443e; box-shadow: 0 0 calc(10 * var(--px)) #e0443e; animation: pc-onair 2.4s ease-in-out infinite; }
@keyframes pc-onair { 50% { opacity: 0.35; } }
.rule-top {
  border-top: 0; height: calc(2 * var(--px));
  background: linear-gradient(90deg, var(--blue) 0%, rgba(46,107,198,0.5) 40%, rgba(138,164,192,0.25) 100%);
}
.chassis-foot {
  height: calc(72 * var(--px)); padding: 0 calc(30 * var(--px)); border-top: 0; align-items: center;
  border-left: calc(8 * var(--px)) solid var(--blue);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px), rgba(24,27,32,0.9);
  color: #eef2f7; font-family: var(--text); font-weight: 500;
  font-size: calc(27 * var(--px)); letter-spacing: 0.14em;
}
#tvclock { font-family: "Outfit", system-ui, sans-serif !important; --clock-accent: #2E6BC6; background: rgba(14,16,20,0.95) !important; }

/* ---------------------------------------------------------------------------
   BEAT LAYOUTS
   ------------------------------------------------------------------------ */
.beat { top: calc(222 * var(--px)); bottom: calc(196 * var(--px)); gap: calc(26 * var(--px)); }
.beat[data-style="art"], .beat[data-style="quote"] { padding-right: calc(880 * var(--px)); }
.beat[data-style="art"] .hero { font-size: calc(92 * var(--px)); }
.beat[data-style="art"] .lede { font-size: calc(44 * var(--px)); }
.el.widget[data-widget="art"], .el.widget[data-widget="qrcard"], .beat[data-style="art"] > .el.widget[data-widget="mosaic"] {
  position: absolute; right: 0; top: calc(-6 * var(--px)); bottom: calc(-6 * var(--px)); width: calc(820 * var(--px));
}
.beat[data-style="full"] .hero { font-size: calc(92 * var(--px)); }
.beat[data-style="quote"] .hero { font-style: italic; font-size: calc(70 * var(--px)); line-height: 1.2; }
.beat[data-style="quote"] .lede { font-size: calc(34 * var(--px)); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.beat[data-style="quote"]::before { content: '\201C'; font-family: var(--display); font-size: calc(260 * var(--px)); line-height: 0.6; color: var(--sand); opacity: 0.55; height: calc(90 * var(--px)); }
.beat[data-style="art"] .el.widget[data-widget="stats"] { margin-top: calc(18 * var(--px)); }
.beat[data-style="art"] .el.widget[data-widget="checks"] { margin-top: calc(10 * var(--px)); }

/* IDENT */
.scene[data-layout="ident"] .ident-logo { height: calc(240 * var(--px)); filter: drop-shadow(0 0 calc(30 * var(--px)) rgba(46,107,198,0.75)); }
.scene[data-layout="ident"] .hero { font-size: calc(72 * var(--px)); }
.scene[data-layout="ident"] .lede { font-size: calc(36 * var(--px)); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 400; max-width: none; }
.scene[data-layout="ident"].is-live .ident-logo { animation: pc-logo 2200ms 150ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-logo { 0% { opacity: 0; transform: scaleY(0.01) scaleX(1.4); filter: brightness(4) blur(calc(6 * var(--px))); } 35% { opacity: 1; transform: scaleY(0.04) scaleX(1); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 calc(30 * var(--px)) rgba(46,107,198,0.75)); } }

/* ---------------------------------------------------------------------------
   ELEMENT ENTRIES (manifest fx)
   ------------------------------------------------------------------------ */
.beat.is-active .el[data-in="pc-etch"] { animation: pc-etch 1250ms var(--delay,0ms) cubic-bezier(0.65,0,0.35,1) both; }
@keyframes pc-etch {
  0% { opacity: 1; clip-path: inset(-10% 100% -20% 0); filter: brightness(2.2); }
  70% { filter: brightness(1.4); }
  100% { opacity: 1; clip-path: inset(-10% -2% -20% 0); filter: none; }
}
.beat.is-active .el[data-in="pc-blur"] { animation: pc-blur 1300ms var(--delay,0ms) cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes pc-blur { from { opacity: 0; filter: blur(calc(18 * var(--px))); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
.beat.is-active .el[data-in="pc-mask"] { animation: pc-mask 1100ms var(--delay,0ms) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-mask { from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(calc(70 * var(--px))); } to { opacity: 1; clip-path: inset(-10% 0 -20% 0); transform: none; } }
.beat.is-active .el[data-in="pc-rise"] { animation: pc-rise 900ms var(--delay,0ms) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-rise { from { opacity: 0; transform: translateY(calc(28 * var(--px))); } to { opacity: 1; transform: none; } }
.beat.is-active .el[data-in="pc-focus"] { animation: pc-blur 1100ms var(--delay,0ms) cubic-bezier(0.2,0.7,0.2,1) both; }
.beat.is-active .el[data-in="pc-clip"] { animation: pc-clip 1200ms var(--delay,0ms) cubic-bezier(0.65,0,0.35,1) both; }
@keyframes pc-clip { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.beat.is-active .el[data-in="show"] { animation: pc-show 400ms var(--delay,0ms) ease both; }
@keyframes pc-show { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------------
   TRANSITIONS
     pc-tune     a CRT turning on: a bright line opens to full picture
     pc-shutter  machined slats rotate open
     pc-glint    a diagonal reveal led by a light edge
     pc-push     the new scene slides in over a dimmed old one
   ------------------------------------------------------------------------ */
.scene.is-entering[data-tx="pc-tune"] { animation: tx-pc-tune var(--txd, 1200ms) cubic-bezier(0.2,0.8,0.2,1) both; transform-origin: 50% 50%; }
@keyframes tx-pc-tune {
  0% { transform: scale(1.2, 0.004); filter: brightness(5); opacity: 0.6; }
  30% { transform: scale(1, 0.01); filter: brightness(3); opacity: 1; }
  100% { transform: none; filter: none; opacity: 1; }
}
@property --pc-s { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.scene.is-entering[data-tx="pc-shutter"] {
  animation: tx-pc-shutter var(--txd, 1200ms) cubic-bezier(0.65,0,0.35,1) both;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 var(--pc-s), transparent var(--pc-s) 12.5%);
          mask-image: repeating-linear-gradient(180deg, #000 0 var(--pc-s), transparent var(--pc-s) 12.5%);
}
@keyframes tx-pc-shutter { from { --pc-s: 0%; } to { --pc-s: 12.6%; } }
@property --pc-g { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.scene.is-entering[data-tx="pc-glint"] {
  animation: tx-pc-glint var(--txd, 1300ms) cubic-bezier(0.45,0,0.25,1) both;
  -webkit-mask-image: linear-gradient(120deg, #000 calc(var(--pc-g) - 20%), transparent var(--pc-g));
          mask-image: linear-gradient(120deg, #000 calc(var(--pc-g) - 20%), transparent var(--pc-g));
}
@keyframes tx-pc-glint { from { --pc-g: 0%; } to { --pc-g: 125%; } }
.scene.is-entering[data-tx="pc-push"] { animation: tx-pc-push var(--txd, 1200ms) cubic-bezier(0.65,0,0.35,1) both; box-shadow: calc(-30 * var(--px)) 0 calc(60 * var(--px)) rgba(0,0,0,0.6); }
@keyframes tx-pc-push { from { transform: translateX(100%); } to { transform: none; } }
.scene.is-leaving { transition: filter 900ms ease; filter: brightness(0.6); }

/* ---------------------------------------------------------------------------
   WIDGET art
   ------------------------------------------------------------------------ */
.pc-art { position: absolute; inset: 0; }
.pc-art-frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 100%); box-shadow: 0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(0,0,0,0.4); }
.pc-art.go .pc-art-frame { animation: pc-frame-in 1400ms cubic-bezier(0.77,0,0.18,1) both; }
@keyframes pc-frame-in { to { clip-path: inset(0 0 0 0); } }
.pc-art-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); }
.pc-art.go .pc-art-frame img { animation: pc-kb 16s ease-out both; }
@keyframes pc-kb { from { transform: scale(1.16); } to { transform: scale(1.02) translate(-1.2%, -0.8%); } }
.pc-art-photo::before {
  /* machined steel bracket, offset behind the photograph */
  content: ''; position: absolute; inset: calc(-16 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)) calc(-16 * var(--px));
  border: calc(2 * var(--px)) solid rgba(46,107,198,0.85); opacity: 0; transition: opacity 900ms 1100ms;
}
.pc-art-photo.go::before { opacity: 1; }
.pc-glint { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%); background-size: 300% 100%; background-position: 120% 0; pointer-events: none; }
.pc-glint { display: none; }
@keyframes pc-glint { to { background-position: -20% 0; } }
/* contain: the whole picture, never cropped, on a blurred copy of itself */
.pc-contain { background: #0e1726; }
.pc-art-frame img.pc-contain-back { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(calc(40 * var(--px))) brightness(0.55); transform: none; }
.pc-art-frame img.pc-contain-img { position: absolute; inset: calc(24 * var(--px)); width: calc(100% - 48 * var(--px)); height: calc(100% - 48 * var(--px)); object-fit: contain; transform: none; }
.pc-art.go .pc-art-frame img.pc-contain-back, .pc-art.go .pc-art-frame img.pc-contain-img { animation: none; }

/* browser: a site in a window, its address typed in */
.pc-win { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4f6f9; border-radius: calc(14 * var(--px)); overflow: hidden;
  box-shadow: 0 calc(30 * var(--px)) calc(70 * var(--px)) rgba(0,0,0,0.45), 0 0 0 calc(1 * var(--px)) rgba(255,255,255,0.18);
  opacity: 0; transform: perspective(calc(2000 * var(--px))) rotateY(-14deg) scale(0.94); transform-origin: 100% 50%; }
.pc-art.go .pc-win { animation: pc-win 1300ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-win { to { opacity: 1; transform: none; } }
.pc-win-bar { flex: none; height: calc(66 * var(--px)); display: flex; align-items: center; gap: calc(22 * var(--px)); padding: 0 calc(22 * var(--px)); background: linear-gradient(180deg, #e9edf2, #d9dfe7); border-bottom: calc(1 * var(--px)) solid #c4ccd6; }
.pc-win-dots { width: calc(76 * var(--px)); height: calc(18 * var(--px)); flex: none; background: radial-gradient(circle at calc(9 * var(--px)) 50%, #ff5f57 calc(8 * var(--px)), transparent calc(9 * var(--px))), radial-gradient(circle at calc(38 * var(--px)) 50%, #febc2e calc(8 * var(--px)), transparent calc(9 * var(--px))), radial-gradient(circle at calc(67 * var(--px)) 50%, #28c840 calc(8 * var(--px)), transparent calc(9 * var(--px))); }
.pc-win-url { flex: 1; height: calc(42 * var(--px)); border-radius: calc(21 * var(--px)); background: #fff; display: flex; align-items: center; padding: 0 calc(22 * var(--px)); overflow: hidden; }
.pc-win-typed { font-family: "Outfit", sans-serif; font-size: calc(24 * var(--px)); color: #34404f; white-space: nowrap; overflow: hidden; width: 0; border-right: calc(2 * var(--px)) solid #2E6BC6; }
.pc-art.go .pc-win-typed { animation: pc-type 1100ms 700ms steps(var(--n, 20)) both, pc-caret 900ms 1800ms step-end 3; }
@keyframes pc-type { to { width: calc(var(--n) * 1ch); } }
@keyframes pc-caret { 50% { border-right-color: transparent; } }
.pc-win-view { flex: 1; overflow: hidden; position: relative; background: #fff; }
.pc-win-view img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.pc-art.go .pc-win-view img { animation: pc-scrollshot 14s 1800ms ease-in-out both; }
@keyframes pc-scrollshot { to { transform: translateY(-6%); } }

/* tv: a picture in a set, tuned in */
.pc-tv { position: absolute; inset: calc(10 * var(--px)) 0 calc(40 * var(--px)) 0; padding: calc(28 * var(--px)); border-radius: calc(30 * var(--px));
  background: linear-gradient(180deg, #3a3f47, #1b1e23), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 calc(2 * var(--px)) 0 rgba(255,255,255,0.18), 0 calc(30 * var(--px)) calc(70 * var(--px)) rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(calc(40 * var(--px))); }
.pc-art.go .pc-tv { animation: pc-rise 900ms cubic-bezier(0.22,1,0.36,1) both; }
.pc-tv::after { content: ''; position: absolute; left: 50%; bottom: calc(-36 * var(--px)); width: calc(240 * var(--px)); height: calc(20 * var(--px)); margin-left: calc(-120 * var(--px)); background: linear-gradient(180deg, #2a2e34, #15171a); border-radius: 0 0 calc(10 * var(--px)) calc(10 * var(--px)); }
.pc-tv-glass { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(18 * var(--px)); background: #000; transform: scaleY(0.004); filter: brightness(4); }
.pc-art.go .pc-tv-glass { animation: pc-crt 1100ms 600ms cubic-bezier(0.2,0.8,0.2,1) both; }
@keyframes pc-crt { 0% { transform: scale(1.1, 0.004); filter: brightness(5); } 35% { transform: scale(1, 0.012); filter: brightness(3); } 100% { transform: none; filter: none; } }
.pc-tv-glass img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.pc-tv-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 calc(2 * var(--px)), transparent calc(2 * var(--px)) calc(5 * var(--px))), radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%); }
.pc-tv-line { position: absolute; left: 0; right: 0; height: 18%; top: -20%; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent); animation: pc-roll 7s linear infinite; }
@keyframes pc-roll { to { top: 110%; } }
.pc-tv-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(18 * var(--px)); text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #2a5fb0 0%, #12305f 60%, #081428 100%); }
.pc-tv-card-k { font-family: "Outfit", sans-serif; font-size: calc(28 * var(--px)); letter-spacing: 0.3em; text-transform: uppercase; color: #E6BE85; }
.pc-tv-card-t { font-family: "Fraunces", serif; font-size: calc(104 * var(--px)); line-height: 1; color: #fff; text-shadow: 0 0 calc(24 * var(--px)) rgba(120,170,255,0.8); }
.pc-tv-card-s { font-family: "Outfit", sans-serif; font-size: calc(30 * var(--px)); letter-spacing: 0.16em; color: rgba(255,255,255,0.8); }
.pc-tv-cap { position: absolute; left: 0; right: 0; bottom: calc(-90 * var(--px)); text-align: center; font-size: calc(24 * var(--px)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta); }

/* ---------------------------------------------------------------------------
   WIDGET stats: steel plates, numbers roll up
   ------------------------------------------------------------------------ */
.pc-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: calc(22 * var(--px)); }
.pc-stat { padding: calc(20 * var(--px)) calc(28 * var(--px)); min-width: calc(250 * var(--px));
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); border: calc(1 * var(--px)) solid rgba(46,107,198,0.25); border-top: calc(4 * var(--px)) solid #2E6BC6;
  opacity: 0; transform: translateY(calc(30 * var(--px))); }
.pc-stats.go .pc-stat { animation: pc-rise 900ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
.pc-stat-n { font-family: var(--display); font-size: calc(76 * var(--px)); line-height: 1; color: var(--ink); clip-path: inset(100% 0 0 0); }
.pc-stats.go .pc-stat-n { animation: pc-roll-up 800ms calc(var(--d) + 300ms) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-roll-up { from { clip-path: inset(100% 0 0 0); transform: translateY(40%); } to { clip-path: inset(-10% 0 -10% 0); transform: none; } }
.pc-stat-t { margin-top: calc(10 * var(--px)); font-size: calc(26 * var(--px)); font-weight: 500; letter-spacing: 0.06em; color: var(--prose); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   WIDGET cards
   ------------------------------------------------------------------------ */
.pc-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: calc(26 * var(--px)); perspective: calc(1800 * var(--px)); margin-top: calc(14 * var(--px)); }
.pc-card { position: relative; padding: calc(30 * var(--px)) calc(30 * var(--px)) calc(32 * var(--px)); opacity: 0;
  background: linear-gradient(170deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
  border: calc(1 * var(--px)) solid rgba(200,215,232,0.22); border-top: calc(3 * var(--px)) solid #2E6BC6; }
.pc-card.lit { background: linear-gradient(170deg, rgba(230,190,133,0.35), rgba(212,169,112,0.12)); border-top-color: #E6BE85; }
.scene[data-theme="pc-marble"] .pc-card { background: rgba(255,255,255,0.72); border-color: rgba(46,107,198,0.2); border-top-color: #2E6BC6; box-shadow: 0 calc(14 * var(--px)) calc(30 * var(--px)) rgba(15,33,64,0.12); }
.pc-glyph { width: calc(84 * var(--px)); height: calc(84 * var(--px)); display: block; margin-bottom: calc(18 * var(--px)); fill: none; stroke: #8fb8f0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pc-card.lit .pc-glyph { stroke: #E6BE85; }
.scene[data-theme="pc-marble"] .pc-glyph { stroke: #2E6BC6; }
.pc-glyph path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.pc-cards.go .pc-glyph path { animation: pc-draw 1200ms calc(var(--d) + 400ms + var(--i) * 120ms) ease-out both; }
@keyframes pc-draw { to { stroke-dashoffset: 0; } }
.pc-card-name { font-family: var(--display); font-size: calc(46 * var(--px)); line-height: 1.12; color: var(--ink); }
.pc-card-text { margin-top: calc(14 * var(--px)); font-size: calc(36 * var(--px)); font-weight: 300; line-height: 1.32; color: var(--prose); }
.pc-reveal-focus.go .pc-card { animation: pc-blur 1200ms var(--d) cubic-bezier(0.2,0.7,0.2,1) both; }
.pc-reveal-flip .pc-card { transform-origin: 50% 0; }
.pc-reveal-flip.go .pc-card { animation: pc-flipx 1100ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-flipx { from { opacity: 0; transform: rotateX(80deg); } to { opacity: 1; transform: none; } }
.pc-reveal-slide.go .pc-card { animation: pc-slidein 1000ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-slidein { from { opacity: 0; transform: translateX(calc(120 * var(--px))); clip-path: inset(0 0 0 30%); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------------------------
   WIDGET checks
   ------------------------------------------------------------------------ */
.pc-checks { display: grid; gap: calc(22 * var(--px)); }
.pc-check { display: grid; grid-template-columns: calc(62 * var(--px)) 1fr; align-items: center; gap: calc(24 * var(--px)); opacity: 0; transform: translateX(calc(-30 * var(--px))); padding-bottom: calc(18 * var(--px)); border-bottom: calc(1 * var(--px)) solid var(--rule); }
.pc-checks.go .pc-check { animation: pc-checkin 800ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-checkin { to { opacity: 1; transform: none; } }
.pc-mark { width: calc(62 * var(--px)); height: calc(62 * var(--px)); fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.pc-checks-check .pc-mark { stroke: #5fd08a; }
.pc-checks-cross .pc-mark { stroke: #ff6b5e; }
.pc-mark path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.pc-checks.go .pc-mark path { animation: pc-draw 600ms calc(var(--d) + 350ms + var(--k) * 200ms) ease-out both; }
.pc-check-t { font-size: calc(44 * var(--px)); font-weight: 400; line-height: 1.25; color: var(--ink); }

/* ---------------------------------------------------------------------------
   WIDGET logos: plates turn over
   ------------------------------------------------------------------------ */
.pc-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(60 * var(--px)); perspective: calc(1600 * var(--px)); margin-top: calc(30 * var(--px)); }
.pc-logo { opacity: 0; transform: rotateY(-90deg); text-align: center; }
.pc-logos.go .pc-logo { animation: pc-turn 1100ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-turn { to { opacity: 1; transform: none; } }
.pc-logo-plate { width: calc(250 * var(--px)); height: calc(250 * var(--px)); margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(15,33,64,0.3), 0 0 0 calc(6 * var(--px)) rgba(255,255,255,0.8); }
.pc-logo-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-logo-name { margin-top: calc(26 * var(--px)); font-family: var(--display); font-size: calc(54 * var(--px)); color: var(--ink); }
.pc-logo-text { margin-top: calc(8 * var(--px)); font-size: calc(34 * var(--px)); font-weight: 400; color: var(--prose); }

/* ---------------------------------------------------------------------------
   WIDGET mosaic
   ------------------------------------------------------------------------ */
.pc-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: 1fr; gap: calc(14 * var(--px)); }
.beat[data-style="full"] > .el.widget[data-widget="mosaic"] { position: relative; flex: 1; min-height: 0; }
.pc-tile { overflow: hidden; opacity: 0; transform: translateY(calc(40 * var(--px))) scale(0.95); filter: blur(calc(10 * var(--px))); box-shadow: 0 calc(10 * var(--px)) calc(26 * var(--px)) rgba(0,0,0,0.4); }
.pc-mosaic.go .pc-tile { animation: pc-tile 1000ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
@keyframes pc-tile { to { opacity: 1; transform: none; filter: none; } }
.pc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-mosaic.go .pc-tile img { animation: pc-tilekb 12s ease-in-out alternate infinite; }
@keyframes pc-tilekb { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* ---------------------------------------------------------------------------
   WIDGET faces: real portraits, a REC dot like a camera viewfinder
   ------------------------------------------------------------------------ */
.pc-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(36 * var(--px)); margin-top: calc(12 * var(--px)); }
.pc-face { margin: 0; opacity: 0; transform: translateY(calc(40 * var(--px))); }
.pc-faces.go .pc-face { animation: pc-rise 1000ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
.pc-face-shot { position: relative; height: calc(380 * var(--px)); overflow: hidden; border: calc(2 * var(--px)) solid rgba(200,215,232,0.4); box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(0,0,0,0.45); }
.pc-face-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-face-rec { position: absolute; top: calc(14 * var(--px)); left: calc(16 * var(--px)); width: calc(16 * var(--px)); height: calc(16 * var(--px)); border-radius: 50%; background: #e0443e; box-shadow: 0 0 calc(10 * var(--px)) #e0443e; animation: pc-onair 1.6s ease-in-out infinite; }
.pc-face figcaption { margin-top: calc(18 * var(--px)); }
.pc-face-name { font-family: var(--display); font-size: calc(40 * var(--px)); line-height: 1.1; color: var(--ink); white-space: nowrap; }
.pc-face-role { margin-top: calc(6 * var(--px)); font-size: calc(24 * var(--px)); letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; }
.scene[data-scene-id="voices"] .beat[data-style="full"] .lede { font-size: calc(32 * var(--px)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }

/* ---------------------------------------------------------------------------
   WIDGET qrcard + contact QR
   ------------------------------------------------------------------------ */
.pc-qrcard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(26 * var(--px)); opacity: 0; }
.pc-qrcard.go { animation: pc-blur 1000ms ease both; }
.pc-qr-plate { position: relative; background: #fff; padding: calc(26 * var(--px)); box-shadow: 0 0 0 calc(4 * var(--px)) #2E6BC6, 0 0 calc(60 * var(--px)) rgba(46,107,198,0.6); overflow: hidden; }
.pc-qr-plate img { width: calc(420 * var(--px)); height: calc(420 * var(--px)); display: block; image-rendering: pixelated; }
.pc-qr-scan { position: absolute; left: 0; right: 0; height: calc(6 * var(--px)); top: 0; background: rgba(46,107,198,0.75); box-shadow: 0 0 calc(18 * var(--px)) #2E6BC6; animation: pc-scan 2.6s ease-in-out infinite alternate; }
@keyframes pc-scan { to { top: calc(100% - 6 * var(--px)); } }
.pc-qr-cap { font-size: calc(28 * var(--px)); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.pc-contact { display: flex; align-items: center; justify-content: space-between; gap: calc(80 * var(--px)); }
.pc-contact-rows { display: grid; gap: calc(22 * var(--px)); flex: 1; }
.pc-contact-row { display: grid; grid-template-columns: calc(330 * var(--px)) 1fr; align-items: baseline; padding-bottom: calc(20 * var(--px)); border-bottom: calc(1 * var(--px)) solid var(--rule); opacity: 0; transform: translateY(calc(24 * var(--px))); }
.pc-contact.go .pc-contact-row { animation: pc-rise 800ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
.pc-contact-k { font-size: calc(26 * var(--px)); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.pc-contact-v { font-size: calc(52 * var(--px)); font-weight: 300; color: var(--ink); white-space: nowrap; }
.pc-qr { display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--px)); opacity: 0; }
.pc-contact.go .pc-qr { animation: pc-blur 900ms 900ms ease both; }
.pc-contact .pc-qr-plate img { width: calc(330 * var(--px)); height: calc(330 * var(--px)); }
.scene[data-scene-id="contact"] .hero { font-size: calc(120 * var(--px)); }

/* ---------------------------------------------------------------------------
   WIDGET agenda (Foursight)
   ------------------------------------------------------------------------ */
.pc-agenda { margin-top: calc(30 * var(--px)); }
.pc-agenda-track { display: flex; gap: calc(10 * var(--px)); height: calc(250 * var(--px)); }
.pc-block { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(22 * var(--px)); color: #fff; clip-path: inset(0 100% 0 0); }
.pc-agenda.go .pc-block { animation: pc-clip 800ms var(--d) cubic-bezier(0.65,0,0.35,1) both; }
.pc-block-net { background: linear-gradient(160deg, #3d7fe0, #1f4f9a); }
.pc-block-vid { background: linear-gradient(160deg, #c79554, #8f6430); }
.pc-block-talk { background: linear-gradient(160deg, #314a6e, #1b2a42); }
.pc-block-qa { background: linear-gradient(160deg, #6b5aa8, #3f3470); }
.pc-block-name { font-family: "Fraunces", serif; font-size: calc(38 * var(--px)); line-height: 1.05; white-space: nowrap; }
.pc-block-min { margin-top: calc(6 * var(--px)); font-size: calc(28 * var(--px)); opacity: 0.85; white-space: nowrap; }
.pc-agenda-cap { margin-top: calc(34 * var(--px)); font-size: calc(44 * var(--px)); font-weight: 400; color: var(--ink); opacity: 0; }
.pc-agenda.go .pc-agenda-cap { animation: pc-rise 900ms 2200ms both; }

/* ---------------------------------------------------------------------------
   WIDGET steps
   ------------------------------------------------------------------------ */
.pc-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--px)); padding-top: calc(70 * var(--px)); margin-top: calc(20 * var(--px)); }
.pc-steps-rail { position: absolute; left: 0; right: 0; top: calc(30 * var(--px)); height: calc(4 * var(--px)); background: linear-gradient(90deg, #2E6BC6, #D4A970); transform: scaleX(0); transform-origin: left; }
.pc-steps.go .pc-steps-rail { animation: pc-rail 2000ms 200ms cubic-bezier(0.6,0,0.2,1) both; }
@keyframes pc-rail { to { transform: scaleX(1); } }
.pc-step { position: relative; opacity: 0; transform: translateY(calc(30 * var(--px))); }
.pc-steps.go .pc-step { animation: pc-rise 900ms var(--d) cubic-bezier(0.22,1,0.36,1) both; }
.pc-step::before { content: ''; position: absolute; top: calc(-52 * var(--px)); left: 0; width: calc(28 * var(--px)); height: calc(28 * var(--px)); border-radius: 50%; background: #fff; border: calc(5 * var(--px)) solid #2E6BC6; }
.pc-step-n { font-family: var(--display); font-style: italic; font-size: calc(64 * var(--px)); color: var(--accent); line-height: 1; }
.pc-step-name { margin-top: calc(14 * var(--px)); font-family: var(--display); font-size: calc(50 * var(--px)); line-height: 1.12; color: var(--ink); }
.pc-step-text { margin-top: calc(12 * var(--px)); font-size: calc(36 * var(--px)); font-weight: 300; color: var(--prose); }

/* Full-width screens: hero sits at the top, widgets below. */
.beat[data-style="full"] { justify-content: flex-start; padding-top: calc(10 * var(--px)); }
.scene[data-scene-id="fortune"] .beat, .scene[data-scene-id="how"] .beat[data-style="full"], .scene[data-scene-id="contact"] .beat { justify-content: center; }

/* ---- v1 review fixes ---- */
.beat[data-style="full"] { justify-content: center; padding-top: 0; }
.scene[data-theme="pc-marble"] .mark-sub { background: rgba(255,255,255,0.82); padding: calc(8 * var(--px)) calc(16 * var(--px)) calc(8 * var(--px)) calc(40 * var(--px)); top: calc(-4 * var(--px)); color: #0f2140; }
.scene[data-theme="pc-marble"] .mark-sub::before { left: calc(14 * var(--px)); }
.scene[data-theme="pc-marble"] .ground { background: linear-gradient(100deg, rgba(245,249,253,0.93) 0%, rgba(236,242,250,0.86) 48%, rgba(232,239,248,0.6) 100%), #e8eff8; }
/* services: eight cards must clear the lower third */
.scene[data-scene-id="services"] .pc-card { padding: calc(22 * var(--px)) calc(26 * var(--px)); display: flex; align-items: center; gap: calc(20 * var(--px)); }
.scene[data-scene-id="services"] .pc-glyph { width: calc(66 * var(--px)); height: calc(66 * var(--px)); margin: 0; flex: none; }
.scene[data-scene-id="services"] .pc-card-name { font-size: calc(42 * var(--px)); }
.scene[data-scene-id="services"] .pc-cards { gap: calc(20 * var(--px)); }
/* full-width card screens: bigger, so no dead space under them */
.beat[data-style="full"] .pc-cards:not(:has(.pc-card:nth-child(5))) .pc-card { padding: calc(40 * var(--px)) calc(36 * var(--px)) calc(44 * var(--px)); }
.beat[data-style="full"] .pc-cards:not(:has(.pc-card:nth-child(5))) .pc-glyph { width: calc(100 * var(--px)); height: calc(100 * var(--px)); }
.beat[data-style="full"] .pc-cards:not(:has(.pc-card:nth-child(5))) .pc-card-name { font-size: calc(54 * var(--px)); }
.beat[data-style="full"] .pc-cards:not(:has(.pc-card:nth-child(5))) .pc-card-text { font-size: calc(40 * var(--px)); }
.beat[data-style="full"] .hero { font-size: calc(100 * var(--px)); }
/* faces taller */
.pc-face-shot { height: calc(430 * var(--px)); }
/* steps on plates */
.pc-step { background: rgba(255,255,255,0.8); padding: calc(28 * var(--px)) calc(30 * var(--px)) calc(32 * var(--px)); box-shadow: 0 calc(14 * var(--px)) calc(30 * var(--px)) rgba(15,33,64,0.12); }
.pc-step::before { top: calc(-56 * var(--px)); left: calc(30 * var(--px)); }
.pc-step-name { font-size: calc(54 * var(--px)); }
.pc-step-text { font-size: calc(38 * var(--px)); }
/* agenda bigger */
.pc-agenda-track { height: calc(320 * var(--px)); }
.pc-block-name { font-size: calc(44 * var(--px)); }
.pc-agenda-cap { font-size: calc(48 * var(--px)); }
.pc-face-shot { height: calc(380 * var(--px)); }
.scene[data-scene-id="voices"] .beat[data-style="full"] { gap: calc(20 * var(--px)); }

/* ---- v2 (Oct 11): Oleg's critique ---- */
/* No light sweeps anywhere (lesson 16). The only light accent left is the ident logo glow. */
.pc-art-photo::before { border-color: rgba(212,169,112,0.7); }
.pc-face-card { display: grid; place-items: center; background: linear-gradient(160deg, #2c3a52, #16202f); }
.pc-face-initials { font-family: var(--display); font-size: calc(150 * var(--px)); color: rgba(230,190,133,0.9); letter-spacing: 0.02em; }
/* text testimonials */
.beat[data-style="quote"]::before { display: none; }
.beat[data-style="quote"] .hero { font-size: calc(64 * var(--px)); line-height: 1.24; padding-top: calc(10 * var(--px)); }
.pc-byline { display: flex; align-items: center; gap: calc(24 * var(--px)); opacity: 0; transform: translateY(calc(20 * var(--px))); }
.pc-byline.go { animation: pc-rise 900ms cubic-bezier(0.22,1,0.36,1) both; }
.pc-byline-av { width: calc(74 * var(--px)); height: calc(74 * var(--px)); border-radius: 50%; object-fit: cover; border: calc(3 * var(--px)) solid var(--sand); }
.pc-byline-name { font-size: calc(40 * var(--px)); font-weight: 500; color: var(--accent); }
.pc-byline-via { margin-top: calc(4 * var(--px)); font-size: calc(26 * var(--px)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
/* the one image of Oleg: his watercolor portrait, shown whole on a soft paper ground */
.scene[data-scene-id="founder"] .pc-contain { background: #0d0f13; }
.scene[data-scene-id="founder"] .pc-art-frame img.pc-contain-back { display: none; }
.scene[data-layout="ident"] .ident-logo { width: auto; }