/* phone2 hero (r94): the r77 screen, looping on a timer like the old hero.
   r94: at least the large phone screen tall (100lvh), so no strip of the next
   section shows when the toolbar hides; the words, the edge and the pixel sit
   in .p2h__view, the visible screen (hero.js keeps it at innerHeight).
   js/phone2/hero.js builds the DOM inside #hero. One phone screen tall, no
   pinning. The r76 hero parts stay in the page and are hidden here. */

.p2 #hero{height:var(--app-h,100svh);height:max(var(--app-h,100svh),100lvh);min-height:0;overflow:hidden;background:var(--p2-black);display:block;position:relative;
  -webkit-tap-highlight-color:transparent}
.p2 #hero > :not(.p2h){display:none}
.p2 .p2h{position:absolute;inset:0}
.p2 .p2h__stage{
  position:absolute;inset:0;overflow:hidden;background:var(--p2-black);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.p2 .p2h__view{position:absolute;left:0;right:0;top:0;height:var(--app-h,100svh);pointer-events:none}
.p2 .p2h__screen{position:absolute;inset:0;transition:opacity 500ms var(--p2-ease)}
.p2 .p2h__cv{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 50%;will-change:transform,opacity}

/* soft #FF9900 light behind the words: no edge, opacity only */
.p2 .p2h__glow{
  position:absolute;left:50%;top:50%;width:120vw;height:78vw;margin:-39vw 0 0 -60vw;border-radius:50%;
  pointer-events:none;opacity:0;display:none;mix-blend-mode:screen;   /* r93: removed, the shadow stays behind the words only */transition:opacity 500ms var(--p2-ease);
  background:radial-gradient(closest-side,rgba(255,153,0,.62) 0%,rgba(255,153,0,.3) 42%,rgba(255,153,0,.1) 70%,rgba(255,153,0,0) 100%);
}

/* the count: number and SCREENS, one lockup in the exact centre */
.p2 .p2h__lock{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--p2-gut);
  color:var(--p2-paper);font-stretch:64%;font-weight:800;text-transform:uppercase;pointer-events:none;
  text-shadow:none;   /* r101: no dark shadow behind the count */   /* r94: the PC shadow scaled to the phone type, it hugs the letters */
  transition:opacity 500ms var(--p2-ease);
}
.p2 .p2h__num{display:flex;align-items:center;justify-content:center;height:.86em;
  font-size:17vw;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p2 .p2h__inf{height:.52em;width:auto;overflow:visible}
.p2 .p2h__inf path{fill:none;stroke:currentColor;stroke-width:11;stroke-linejoin:round}
.p2 .p2h__lock .p2h__inf{filter:none}
.p2 .p2h__word{font-size:17vw;line-height:.92;letter-spacing:.02em;margin-top:0}   /* r93: same size as the number, like PC */

/* the end of each loop, as on PC: the wall and the count go dark... */
.p2 .p2h__stage.is-end .p2h__screen,.p2 .p2h__stage.is-end .p2h__lock{opacity:0}
.p2 .p2h__stage.is-end .p2h__glow{opacity:.3}

/* ...then "One platform." (content.js hero title), centred */
.p2 .p2h__plat{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--p2-gut);text-align:center;pointer-events:none;
  opacity:0;transition:opacity 1.5s var(--p2-ease)}
.p2 .p2h__platt{color:var(--p2-paper);font-stretch:64%;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;
  font-size:16vw;white-space:nowrap;display:block;width:max-content;text-shadow:none}
.p2 .p2h__stage.is-plat .p2h__plat{opacity:1}

/* ...then the L Squared logo: the mark first, then the full wordmark (PC hero.css) */
.p2 .p2h__logo{position:absolute;left:50%;top:50%;width:min(80vw,440px);transform:translate(-50%,-50%);pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--p2-ease)}
.p2 .p2h__logo img{display:block;width:100%;height:auto;clip-path:inset(0 84.6% 0 0);transform:translateX(42.4%);
  transition:clip-path 1.7s var(--p2-ease),transform 1.7s var(--p2-ease)}
.p2 .p2h__stage.is-logo .p2h__logo{opacity:1}
.p2 .p2h__stage.is-full .p2h__logo img{clip-path:inset(0 0 0 0);transform:translateX(0)}

/* the orange edge: 1px #FF9900 with its soft glow */
.p2 .p2h__edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity 500ms var(--p2-ease);
  filter:drop-shadow(0 0 3px rgba(255,153,0,.9)) drop-shadow(0 0 10px rgba(255,153,0,.45))}
.p2 .p2h__edge path{fill:none;stroke:var(--p2-orange);stroke-width:1.25;stroke-linecap:round}

/* r94: the edge shows only while there are screens (the phone, then the wall);
   it fades out with the wall for "One platform." and the logo */
.p2 .p2h__stage.is-edge .p2h__edge{opacity:1}
.p2 .p2h__stage.is-end .p2h__edge{opacity:0}

/* the boot pixel */
.p2 .p2h__px{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;opacity:0;
  background:var(--p2-orange);box-shadow:0 0 8px 2px rgba(255,153,0,.85),0 0 22px 6px rgba(255,153,0,.35)}
.p2 .p2h__stage.is-boot .p2h__screen,.p2 .p2h__stage.is-boot .p2h__lock{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .p2 .p2h__px{display:none}
  .p2 .p2h__screen,.p2 .p2h__lock,.p2 .p2h__glow,.p2 .p2h__edge,.p2 .p2h__plat,.p2 .p2h__logo,.p2 .p2h__logo img{transition:none}
}