/* «A TURMA INTEIRA» — the signature stage, in real WebGL2.
   A pinned viewport over a tall track: the page's opening statement, then one registro becoming
   twelve phones and twelve reminders. Every screen is a REAL capture uploaded as a texture, so a
   capture file stays a plain swappable file. The static column is the BASE state — no JS, no WebGL
   and reduced motion all land on it; the live stage is opt-in (`.is-live`). */

.palco { position: relative; height: 440vh; }
/* the release: the scene's haze is brighter than the page's ground, so the canvas's bottom edge
   used to cut a visible band where the pin lets go. A strip glued to the track's bottom ramps the
   scene into the page's own dark, and the stage dissolves into the page instead of ending at a
   line. It lives at the bottom of the 440vh track, so it only ever covers the final release. */
.palco::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32vh;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, rgba(8, 9, 12, .48) 52%, #08090c 94%);
}
/* the covered band must also carry the page's grain TOOTH, arriving on the same ramp — a flat
   fill against the page's textured ground is itself a seam, just a quieter one (measured: the
   page side sits ~+7 per channel of screened noise above the strip's flat #08090c) */
.palco::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32vh;
  pointer-events: none; z-index: 3;
  background-image: var(--grain); background-size: 180px 180px;
  opacity: .07; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .48) 52%, #000 94%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .48) 52%, #000 94%);
}
.palco__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.palco__gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: pan-y; cursor: grab;
}
.palco__gl.is-dragging { cursor: grabbing; }

/* honest fallback: no WebGL2 → the same real captures, statically composed */
.palco__fallback {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: flex-end; gap: 24px;
  padding: 0 5vw 0 0;
}
.palco__fallback[data-on] { display: flex; }
.palco__fallback img {
  width: clamp(110px, 15vw, 210px); height: auto; border-radius: 18px;
  border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
}
.palco__fallback img:nth-child(1) { transform: translateY(-26px); }
.palco__fallback img:nth-child(3) { transform: translateY(26px); }

/* the copy layer — base state is the STATIC column */
/* the static column: two columns under the statement, so five beats fit one pinned viewport
   without a single line being cut by its bottom edge */
.palco__copy {
  position: absolute; left: 0; top: 0; height: 100%; width: min(62vw, 830px);
  padding: 92px 190px 34px clamp(24px, var(--pad), 88px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center; gap: 22px 26px;
  /* the ground runs out under the text and then dissolves — a solid panel with a hard vertical
     edge reads as a rectangle pasted over the scene, which is the one thing a still may not do */
  background: linear-gradient(90deg, #08090c 0%, #08090c 83%, rgba(8, 9, 12, 0) 100%);
  pointer-events: none;
}
.palco__copy .beat--hero { grid-column: 1 / -1; }
.beat { position: relative; max-width: 100%; margin: 0; }
.beat h2, .beat h3 {
  margin: 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 680;
  font-variation-settings: "opsz" 32; color: var(--ink);
}
.beat .lede { font-size: 13.5px; line-height: 1.5; margin-top: 8px; max-width: 40ch; }
.beat .eyebrow { margin-bottom: 7px; }
.beat .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; pointer-events: auto; }

/* the live stage: one beat at a time, driven frame by frame.
   The copy carries its OWN scrim — a left-to-right ramp to the stage's own near-black. It is not
   decoration: the ring is allowed to be big and to bleed off the right edge (an object that fits
   politely inside the frame reads as a picture of an object), and the scrim is what keeps the type
   standing on a measured ground instead of on whatever screen happens to be behind it. */
.palco.is-live .palco__copy {
  display: flex; flex-direction: row; align-items: center; gap: 0;
  width: min(62vw, 860px); padding: 0 0 0 clamp(24px, var(--pad), 88px);
  background: linear-gradient(90deg,
    #08090c 0%, #08090c 34%, rgba(8, 9, 12, .93) 52%, rgba(8, 9, 12, .62) 72%, rgba(8, 9, 12, 0) 100%);
}
.palco.is-live .palco__copy .beat--hero { grid-column: auto; }
.palco.is-live .beat {
  position: absolute; opacity: 0; transform: translateY(14px);
  width: min(38vw, 470px);
  will-change: opacity, transform;
}
.palco.is-live .beat h2, .palco.is-live .beat h3 {
  font-size: clamp(30px, 3.1vw, 46px); line-height: 1.02; letter-spacing: -.038em;
}
.palco.is-live .beat .lede { font-size: 16.5px; line-height: 1.62; margin-top: 20px; max-width: 33ch; }
.palco.is-live .beat .eyebrow { margin-bottom: 20px; }

/* beat 0 — the page's opening statement, standing on the first frame of the scene */
.beat--hero h1 {
  margin: 0; font-size: clamp(26px, 2.7vw, 36px); line-height: 1; letter-spacing: -.038em;
  font-weight: 700; font-variation-settings: "opsz" 32; color: var(--ink);
}
.beat--hero .lede { font-size: 14.5px; line-height: 1.5; margin-top: 10px; max-width: 52ch; }
/* the statement is the biggest thing on the page and it is still smaller than it wants to be:
   at 1440 it lands ~62px, not 96px — poster scale is bought with air and tracking, not with kegel */
.palco.is-live .beat--hero h1 { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.0; letter-spacing: -.042em; }
.palco.is-live .beat--hero .lede { max-width: 31ch; margin-top: 24px; font-size: 17px; line-height: 1.6; }

/* pins — DOM annotations projected out of the 3D scene */
.palco__pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; left: 0; top: 0; will-change: transform, opacity; opacity: 0;
  font-weight: 560; font-size: 12px; letter-spacing: -.005em;
  color: #fff; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(16, 18, 24, .82);
}
#beatClock { font-variant-numeric: tabular-nums; }
/* R8: the pin whose lead time the pointer is holding steps into the light — a neutral lift,
   never an indigo fill (the purple pills were excised in r15.1) */
.pin--lead-time { transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.pin--lead-time.hot { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .08); }

/* R8: the four lead times in the beat copy are live handles — hovering one lights the phones of
   that wake group out in the scene. An enhancement for a pointer; touch simply reads them. */
.ltc { pointer-events: auto; cursor: default; transition: color .2s var(--ease); }
.ltc:hover { color: var(--accent-lift); }

/* the four lead times ride as projected pins on desktop; on a narrow frame they would land on the
   headline, so the copy says them instead — the fact survives, the clutter does not */
.leadtimes { display: none; }

.palco__hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  margin: 0; font-weight: 500;
  font-size: 12.5px; letter-spacing: -.005em; color: var(--muted);
  opacity: 0; transition: opacity .4s var(--ease);
}
.palco__hint[data-on] { opacity: 1; }

.palco__anchor { position: absolute; left: 0; top: 20%; width: 1px; height: 1px; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .palco { height: 420vh; }
  /* the class sits in the upper frame; the copy owns the lower one and brings its own ground, so a
     headline is never measured against whatever product screen happens to be behind it */
  .palco__copy {
    top: auto; bottom: 0; height: auto; width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding: 46px var(--pad) calc(env(safe-area-inset-bottom, 0px) + 82px);
    gap: 14px; border-top: 0;
    /* on a narrow frame the copy is anchored to the BOTTOM, so its ground has to fade upward, not
       to the right — the desktop's side scrim would leave text standing on a product screen. The
       fade is short and the padding clears it, so no line is ever measured against a capture. */
    background: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, #08090c 5%, #08090c 100%);
  }
  .beat h2, .beat h3 { font-size: 17px; }
  .beat .eyebrow { margin-bottom: 5px; }
  .beat--hero h1 { font-size: 24px; }
  .beat .lede { display: none; }
  .beat--hero .lede { display: block; font-size: 13.5px; margin-top: 8px; }
  .beat .hero-actions { gap: 8px; margin-top: 14px; }
  .beat .hero-actions .btn { padding: 11px 18px; font-size: 14px; }
  .palco.is-live .palco__copy {
    top: auto; bottom: 0; height: 52%; width: 100%;
    padding: 96px var(--pad) calc(env(safe-area-inset-bottom, 0px) + 84px);
    align-items: flex-end; border-top: 0;
    background: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, #08090c 18%);
  }
  .palco.is-live .beat { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); width: calc(100vw - var(--pad) * 2); }
  .palco.is-live .beat h2, .palco.is-live .beat h3 { font-size: clamp(26px, 7vw, 34px); letter-spacing: -.038em; }
  .palco.is-live .beat--hero h1 { font-size: clamp(29px, 7.8vw, 38px); letter-spacing: -.04em; }
  .palco.is-live .beat .lede { display: block; font-size: 15px; line-height: 1.55; max-width: 100%; margin-top: 14px; }
  .palco.is-live .beat--hero .lede { font-size: 15px; margin-top: 14px; }
  .palco__hint { display: none; }
  /* the stage now fills the upper frame, so the domain in the top bar would sit ON a product screen */
  .top .site { display: none; }
  .palco__fallback { gap: 12px; }
  .palco__fallback img:nth-child(3), .palco__fallback img:nth-child(4) { display: none; }
  .leadtimes {
    display: block; margin: 14px 0 0;
    font-weight: 550; font-size: 12.5px; letter-spacing: -.005em; color: var(--accent-lift);
  }
}

/* ---------- the dignified static (prefers-reduced-motion) ----------
   The stage keeps its track and its sticky pin — that is layout, not motion — so nothing travels
   while the page is scrolled. The scene renders ONE composed frame, and the five beats stop taking
   turns: they stand together as a read-at-once column on a solid panel, which is also what keeps
   every line's contrast measured against the stage and not against a product screen behind it. */
@media (prefers-reduced-motion: reduce) {
  .palco { height: 200vh; }
  .palco__gl { cursor: default; }
  .palco__hint, .palco__pins { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .palco { height: 210vh; }
}