/* Aimlink | Hero, the analysis (assets/film/analyse.js): between the ten shots and the pellets the camera pulls back, GO tracks
   the series on the target and the shots fly into the phone as cards of the target's own paper.
   Only in the live film (.film.is-live); the static page has no analysis. Layers, bottom up: a dim floor over the landscape,
   the target (one canvas), the clip's shading (so the drawn target matches the clip at the cut), the legend, the phone, the cards. */

@layer sections {
  .film-analyse { display: none; }
  .film.is-live .film-analyse {
    --app-bg: var(--color-night); --app-tile: var(--color-grey-2); --app-text: var(--color-snow); --app-muted: var(--color-snow-2); --app-lime: var(--color-lime);
    display: block; position: absolute; inset: 0; z-index: 1; overflow: clip; pointer-events: none; visibility: hidden; contain: strict;   /* its own layout root (polish 2026-10-15) */
  }
  .an-floor { position: absolute; inset: 0; background: var(--color-night); opacity: 0; }
  .an-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
  /* the same shading as over the clip (film.css, .film-screen::after), faded as the camera pulls back */
  .an-shade {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 90% at 50% 45%, transparent 55%, color-mix(in srgb, var(--color-night) 55%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-night) 45%, transparent) 0%, transparent 20%, transparent 52%, color-mix(in srgb, var(--color-night) 88%, transparent) 100%);
  }

  /* The four lines along the analysis (analyse.js, AT.say): one at a time, over the band of the stage the target and the phone leave
     free (analyse.js sets --say-t, --say-h and --say-fs from where they stand). Real type, not part of the picture. */
  .an-say { position: absolute; left: 0; right: 0; top: var(--say-t, 0px); height: var(--say-h, 18%); z-index: 3; display: grid; place-items: center; padding-inline: var(--gutter); pointer-events: none; }
  .an-say p {
    grid-area: 1 / 1; margin: 0; max-width: 16ch; text-align: center; opacity: 0; text-wrap: balance;
    font-size: var(--say-fs, 4rem); line-height: 0.88; color: var(--color-snow); text-shadow: 0 2px 30px color-mix(in srgb, var(--color-night) 75%, transparent);
  }
  .an-say em { font-style: italic; color: var(--color-lime); }
  @media (min-width: 700px) { .an-say p { max-width: none; white-space: nowrap; } }

  /* the two circles, named once the series is in (analyse.js places it with a transform) */
  .an-legend {
    position: absolute; left: 0; top: 0; display: flex; gap: var(--space-4); translate: -50% 0; opacity: 0; white-space: nowrap;
    font: 500 clamp(0.95rem, 0.8rem + 0.35vw, 1.2rem)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-snow);
  }
  .an-legend span { display: inline-flex; align-items: center; gap: 0.5em; }
  .an-legend i { display: block; width: 1.4em; height: 0; border-top: 2px solid var(--color-lime); }
  .an-legend span + span i { border-top-width: 1.5px; border-color: color-mix(in srgb, var(--color-lime) 50%, transparent); }
  .an-legend b { font-weight: 500; color: var(--color-lime); }

  /* One perspective for the target and the phone (analyse.js sets --persp): they stand turned to each other, seen from the side */
  .an-scene { position: absolute; inset: 0; perspective: var(--persp, 1800px); perspective-origin: 50% 50%; }
  /* layers only while the analysis plays (analyse.js sets .is-on on .film-analyse while it is on screen) */
  .film-analyse.is-on .an-canvas, .film-analyse.is-on .an-card { will-change: transform; }

  /* the board the target is mounted on: its edge (pressed card) and its shadow; the face is the canvas, laid over it */
  .an-board { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 50% 50%; visibility: hidden; }
  .an-board i { position: absolute; display: block; }
  /* the edge: 64 faces round the disc, each a strip as deep as the board, lit once by analyse.js (--l); the card's paper on
     top (a light band), the backing board under it */
  .an-bf {
    left: 50%; top: 50%; backface-visibility: hidden; opacity: var(--bo, 1);
    width: calc(var(--chord) * var(--br) + 1.5px); height: var(--t);
    margin: calc(var(--t) / -2) 0 0 calc((var(--chord) * var(--br) + 1.5px) / -2);
    transform: translate3d(calc(var(--cx) * var(--br)), calc(var(--cy) * var(--br)), calc(var(--t) / -2)) rotateZ(var(--fa)) rotateX(90deg);
    --k: calc(var(--l, 0.5) * 70% + 22%);
    background: linear-gradient(0deg, hsl(42 62% calc(var(--k) * 1.12)) 0%, hsl(42 62% calc(var(--k) * 1.12)) 16%, hsl(36 26% calc(var(--k) * 0.62)) 22%, hsl(34 22% calc(var(--k) * 0.55)) 100%);
  }
  .an-bshadow {
    inset: 0; border-radius: 50%; background: rgb(0 0 0 / 0.66); filter: blur(28px); opacity: calc(var(--tk, 0) * var(--bo, 1));
    transform: translateZ(calc(var(--t) * -1 - 46px)) translate(5%, 7%);
  }

  /* The GO page's target, in 3D (apps/go/, "Read the series", app-page.css .r3d-disc): a white card, its body stepped back along Z
     and a shadow on the last step, light falling off across the paper. --u is its "1cqw": the card is 108 of them wide. The faces
     fade with --bo, never opacity on the solid. */
  .an-go3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 50% 50%; visibility: hidden; }
  .an-gd { position: absolute; inset: 0; transform-style: preserve-3d; }
  .an-gd .target { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: var(--bo, 1); }
  .an-gd .t-paper { fill: #EEF1F4; }
  .an-gd i { position: absolute; inset: 1.4%; border-radius: 50%; background: #b9c0c7; transform: translateZ(calc(var(--k) * var(--u) * -0.28)); opacity: var(--bo, 1); }
  .an-gd i:last-of-type { background: #7f8891; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 9) rgb(0 0 0 / 0.55); }
  .an-gd::after {
    content: ""; position: absolute; inset: 1.4%; border-radius: 50%; pointer-events: none; transform: translateZ(calc(var(--u) * 0.05));
    background: linear-gradient(112deg, transparent 38%, rgb(12 20 28 / 0.2) 100%); opacity: var(--bo, 1);
  }

  /* the photographic renders of the target (on its board) and the phone, at rest (analyse.js places them) */
  .an-render { position: absolute; display: block; max-width: none; opacity: 0; pointer-events: none; user-select: none; filter: drop-shadow(0 28px 36px rgb(0 0 0 / 0.55)); }
  /* with the phone's render in, the 3D phone is only its live screen */
  .film-analyse.has-rphone .an-phone .phone, .film-analyse.has-rphone .an-phone .phone-bezel { background: transparent; box-shadow: none; }
  .film-analyse.has-rphone .an-edge, .film-analyse.has-rphone .an-back, .film-analyse.has-rphone .an-pshadow { display: none; }

  /* the phone: the site's iPhone frame (site.css .phone) made a solid (placed with a transform by analyse.js) (a titanium edge of lit faces and a back, as on the
     Built for shooters page), standing as on the GO page; analyse.js places it. Never opacity on the solid or above it in the
     3D chain (it would flatten it): its faces fade with --po. */
  .an-phone { position: absolute; left: 0; top: 0; width: var(--pw); translate: -50% -50%; transform-style: preserve-3d; visibility: hidden; }
  .an-tilt { position: relative; transform-style: preserve-3d; transform-origin: 50% 50%; }
  .an-phone .phone { --pw: inherit; transform: translateZ(calc(var(--pw) * 0.0575)); backface-visibility: hidden; opacity: var(--po, 1); box-shadow: inset 0 0 0 calc(var(--pw) * 0.003) rgb(255 255 255 / 0.12); }
  .an-phone .phone::before, .an-phone .phone::after { display: none; }   /* the side buttons belong to the edge now */
  .an-edge, .an-back { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
  .an-edge i {
    position: absolute; left: 50%; top: 50%; backface-visibility: hidden; opacity: var(--po, 1);
    width: calc(var(--fw) * var(--pw) + 1.5px); height: calc(var(--pw) * 0.115);
    margin: calc(var(--pw) * -0.0575) 0 0 calc((var(--fw) * var(--pw) + 1.5px) / -2);
    transform: translate3d(calc(var(--fx) * var(--pw)), calc(var(--fy) * var(--pw)), 0) rotateZ(var(--fa)) rotateX(90deg);
    --c: calc(var(--l, 0.4) * 62% + 12%);
    background: linear-gradient(180deg, hsl(212 6% calc(var(--c) * 0.62)) 0%, hsl(212 7% var(--c)) 18%, hsl(212 6% calc(var(--c) * 0.86)) 52%, hsl(212 7% var(--c)) 84%, hsl(212 6% calc(var(--c) * 0.6)) 100%);
  }
  .an-pshadow {
    position: absolute; inset: 3% 5%; border-radius: calc(var(--pw) * 0.17); background: rgb(0 0 0 / 0.7); filter: blur(30px);
    transform: translateZ(calc(var(--pw) * -0.55)) translate(9%, 7%); opacity: calc(var(--po, 1) * 0.85); pointer-events: none;
  }
  .an-back {
    transform: translateZ(calc(var(--pw) * -0.0575)) rotateY(180deg); backface-visibility: hidden; opacity: var(--po, 1);
    border-radius: calc(var(--pw) * 0.17); background: linear-gradient(155deg, #3a3d42 0%, #24262a 46%, #303338 100%);
  }
  .an-phone .phone-screen { container-type: size; background: #05080B; }
  .an-phone .phone-island { left: 34.48%; top: 1.41%; width: 31.04%; height: 4.23%; }
  /* the screen: GO's look (devices.css .go, in Figma pixels, --u), a series as it comes in */
  .an-go { opacity: 0; }
  .an-go-k { flex: none; margin-top: calc(-4 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: var(--app-muted); }
  .an-go-total { flex: none; display: grid; justify-items: center; gap: calc(2 * var(--u)); padding: calc(10 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--app-tile); }
  .an-go-total b { font: 500 calc(64 * var(--u))/0.9 var(--font-numeric); color: var(--app-lime); font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(10 * var(--u)) rgb(160 224 32 / 0.3); }
  .an-go-total span { font: 700 calc(11 * var(--u))/calc(14 * var(--u)) var(--font-text); letter-spacing: 0.055em; text-transform: uppercase; color: var(--color-grey-7); }
  .an-go-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(5 * var(--u)); }
  .an-go-list li {
    --flash: 0;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(10 * var(--u));
    height: calc(39 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(6 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--color-line-dark);
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgb(160 224 32 / calc(var(--flash) * 0.9)), 0 0 calc(14 * var(--u)) rgb(160 224 32 / calc(var(--flash) * 0.35));
    opacity: 0;
  }
  .an-chip { display: grid; place-items: center; min-width: calc(46 * var(--u)); height: calc(27 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)) 0; border-radius: calc(8 * var(--u)); background: var(--color-cream); color: var(--color-ink); font: 500 calc(19 * var(--u))/1 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .an-n { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--app-muted); }
  .an-run { font: 500 calc(20 * var(--u))/1 var(--font-numeric); color: var(--app-text); font-variant-numeric: tabular-nums; padding-top: calc(2 * var(--u)); }
  .an-go .go-tabs .is-on { color: var(--app-lime); }
  /* The end of the series (analyse.js, AT.share): a scrim over the last rows, Share (GO's lime pill) pressed by a fingertip, then the
     series stands in the club's feed (GO's own feed card) and the likes come in. Everything is a function of the one number. */
  .an-scrim { position: absolute; left: 0; right: 0; top: calc(622 * var(--u)); height: calc(152 * var(--u)); opacity: var(--sc, 0); pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--app-bg) 62%); }
  .an-dock { position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); top: calc(702 * var(--u)); height: calc(60 * var(--u)); translate: 0 calc((1 - var(--di, 0)) * 22 * var(--u)); opacity: var(--di, 0); }
  .an-share {
    position: absolute; inset: calc(4 * var(--u)) 0; display: grid; place-items: center; border-radius: calc(26 * var(--u)); background: var(--app-lime); color: var(--color-moss);
    font: 500 calc(26 * var(--u))/calc(30 * var(--u)) var(--font-numeric); letter-spacing: 0.05em; text-transform: uppercase;
    scale: calc(1 - var(--pr, 0) * 0.045); opacity: calc(1 - var(--so, 0));
    box-shadow: 0 0 calc(18 * var(--u)) rgb(160 224 32 / calc(0.25 + var(--pr, 0) * 0.3));
  }
  .an-share > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding-top: calc(3 * var(--u)); }
  .an-share-a { opacity: calc(1 - var(--sd, 0)); }
  .an-share-b { opacity: var(--sd, 0); }
  .an-share-b .ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin-top: calc(-4 * var(--u)); }
  .an-post { left: 0; top: calc(2 * var(--u)); width: 100%; opacity: var(--pd, 0); translate: 0 calc((1 - var(--pd, 0)) * 12 * var(--u)); }
  .an-post .go-like { color: #1a1a1a; }
  .an-post .go-like i { font-style: normal; min-width: 0.6em; font-variant-numeric: tabular-nums; }
  .an-post .go-like svg { scale: var(--lk, 1); transform-origin: 50% 70%; }
  .an-post { box-shadow: 0 0 calc(22 * var(--u) * var(--gl, 0)) calc(2 * var(--u) * var(--gl, 0)) rgb(160 224 32 / calc(var(--gl, 0) * 0.75)); }
  .an-post .go-like { font-size: calc(13 * var(--u) * (1 + (var(--lk, 1) - 1) * 0.5)); }
  /* the fx: lime dots from Share, thumbs up out of the card's like (analyse.js makes them, one per particle) */
  .an-fx { position: absolute; inset: 0; pointer-events: none; }
  .an-fx i { position: absolute; left: 0; top: 0; display: block; visibility: hidden; opacity: 0; }
  .an-fx-d { border-radius: 50%; background: var(--app-lime); }
  .an-fx-d[data-tone="snow"] { background: var(--color-snow); }
  .an-fx-t svg { display: block; width: 100%; height: 100%; fill: var(--app-lime); stroke: var(--app-bg); stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 0 calc(5 * var(--u)) rgb(160 224 32 / 0.55)); }
  .an-fx-t[data-tone="snow"] svg { fill: var(--color-snow); filter: drop-shadow(0 0 calc(5 * var(--u)) rgb(244 246 248 / 0.4)); }
  /* the fingertip: a soft disc that lands on the button, and the ring it leaves */
  .an-touch {
    position: absolute; left: calc(196.5 * var(--u) - 24 * var(--u)); top: calc(731 * var(--u) - 24 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; pointer-events: none;
    background: rgb(244 246 248 / 0.62); box-shadow: 0 0 0 calc(1.5 * var(--u)) rgb(244 246 248 / 0.85), 0 0 calc(10 * var(--u)) rgb(12 20 28 / 0.35); opacity: var(--ta, 0); scale: var(--ts, 1);
  }
  /* measuring where the chips are: the rows as they will stand */
  .film-analyse.is-measure .an-go-list li { transform: none !important; }

  /* the cards: the target's paper, a score in Teko and the shot's number; analyse.js flies them */
  .an-cards { position: absolute; inset: 0; }
  .an-card {
    --lift: 0;
    position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); visibility: hidden; transform-style: preserve-3d;
    border-radius: 9%;
    box-shadow: 0 calc(var(--lift) * 18px) calc(var(--lift) * 30px + 2px) rgb(0 0 0 / calc(0.2 + var(--lift) * 0.3));
  }
  .an-card-f, .an-card-b {
    position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: linear-gradient(160deg, #FFFFFF 0%, #EEF1F4 55%, #D9DFE5 100%);   /* the GO target's paper */
    box-shadow: inset 0 0 0 1px rgb(12 20 28 / 0.55);
  }
  .an-card-f { display: grid; place-content: center; justify-items: center; gap: 0.1em; color: var(--color-ink); }
  .an-card-f b { font: 500 calc(var(--cw) * 0.5)/0.9 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .an-card-f span { font: 700 calc(var(--cw) * 0.17)/1 var(--font-text); color: var(--color-grey-4); }
  .an-card-b { transform: rotateY(180deg); background: linear-gradient(200deg, #E4E9EE 0%, #C3CBD3 100%); }
}