/* Know the Business (PURP Reports): one number, followed all the way down. The product pages' chrome,
   type, colour, hero and finale come from point-of-sale.css; this file is Reports' own: a hero film,
   the dive (a lens pinned above three steps that goes from the report into the product's stock history
   and on into the sale behind it, driven by the lock-on controller in run-the-floor.mjs) and the
   any-angle moment. It takes the page's colour names from there too (the light Mist page, the stage
   palette on the dive) and only sets its own components on them. */

/* ---- Hero: the whole board ---- */
/* No PURP light here: the headline opens the page and the board settles into view beneath it. This
   opening wide shot is the page's only outward move before the dive. */
.know-hero h1 { animation-delay: .15s; }
.know-hero .pos-hero__lede { animation-delay: 1.3s; }
/* The headline, the whole film and the line under it share the first screen: the navigation and bar
   (140), the headline (95), the gaps (54), the line (63) and 16px to spare leave 100svh - 388px for
   the 16:9 film. */
.know-hero__film { width: min(var(--content), max(440px, calc((100svh - 388px) * 16 / 9))); margin: 28px auto 0; aspect-ratio: 16 / 9; box-shadow: var(--film-shadow); animation: pull-back 1.4s var(--ease) .35s both; }
@keyframes pull-back { from { opacity: 0; transform: scale(1.06); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- The dive ---- */
/* A stage (point-of-sale.css): the hero fades into it at dusk, and it fades back out into any angle.
   It clips sideways only, so the outer ring never widens the page and the lens still pins. */
.dive {
  --section-top: 110px;
  --fade-in: 110px;
  --fade-out: 150px;
  padding: var(--section-top) var(--gutter) 180px;
  scroll-margin-top: calc(-1 * var(--section-top));
  overflow-x: clip;
  background:
    linear-gradient(to bottom, var(--dusk-2), var(--dusk-3) calc(var(--fade-in) / 2), transparent var(--fade-in)),
    linear-gradient(to top, var(--dusk-2), var(--dusk-3) calc(var(--fade-out) / 2), transparent var(--fade-out)),
    var(--ground);
  text-align: center;
}
.dive h2 { padding-bottom: .06em; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; font-weight: 600; letter-spacing: -.02em; background: var(--headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dive__body { width: var(--content); margin: 44px auto 0; overflow-anchor: none; }
.dive__steps { margin: 0; padding: 0; list-style: none; }

/* The lens rides pinned under the bar while the steps' words scroll beneath it. Its film leaves about
   244px under it for the lit step: --bar-space, the padding (54), the path (32) and those 244px leave
   100svh - --bar-space - 330px for the 16:9 film, 486px high in a 900px window. */
.dive__stage {
  --film-width: min(100%, max(420px, calc((100svh - var(--bar-space) - 330px) * 16 / 9)));
  position: sticky;
  z-index: 2;
  top: var(--bar-space);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Room above and below for the outermost ring. */
  padding: 24px 0 30px;
  overflow-anchor: none;
  /* It hides the words passing under it, and its foot fades so they come out from beneath softly. */
  background: linear-gradient(180deg, var(--ground) calc(100% - 30px), transparent);
}
/* Pinned, it also covers the space above it, where the words would show through the bar's veil. */
.dive__stage::before { content: ""; position: absolute; z-index: -1; right: 0; bottom: 100%; left: 0; height: var(--bar-space); background: var(--ground); opacity: 0; }
.dive__stage.is-pinned::before { opacity: 1; }
.dive__lens, .dive__caption { width: var(--film-width); }
.dive__lens { position: relative; }

/* The films: each step's film comes in over the last from the spot the last one pointed at, which is
   where its own pointer starts (--zoom-x and --zoom-y, set from the recordings), so the pointer holds
   still through the zoom. The controller lets the old film go only once it is covered. */
.dive__screen { position: relative; z-index: 1; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--surface); box-shadow: var(--film-shadow); }
.dive__feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); outline: 2px solid transparent; outline-offset: -2px; }
.dive__feed.is-shown { opacity: 1; }
.dive__lens > .video-toggle { z-index: 2; right: 12px; bottom: 12px; }

/* The rings: one for each level the reader has come down through, the oldest furthest out and
   faintest. --lock-at is the step's index, so the first step already has one: the company board the
   reader came in from. */
.dive__rings i {
  --d: calc(var(--lock-at, 0) + 1 - var(--ring));
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pdb-purp-lavender, #d9cbff) 38%, transparent);
  transform: scale(calc(1 + (var(--d) + 1) * .022));
  opacity: calc(clamp(0, (var(--d) + 1) * 100, 1) * (.55 - var(--d) * .16));
  pointer-events: none;
}

/* The path: one line under the lens, from the company down to where the reader is, with what the film
   shows at its end. It grows to the right as the reader goes down and never shows the next level
   before the reader gets there. */
.dive__caption { display: flex; align-items: baseline; margin-top: 14px; overflow: hidden; white-space: nowrap; color: var(--type-quiet); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; }
.dive__path { display: flex; margin: 0; padding: 0; list-style: none; }
.dive__path li { overflow: hidden; max-width: 16em; }
.dive__path li + li::before, .dive__readout::before { content: "›"; padding: 0 .55em; color: var(--type-quiet); }
.dive__path .dive__origin, .dive__path .is-passed { color: var(--type-muted); }
.dive__path .is-active { color: var(--type); }
/* The readout names what the film shows; the old words fade as the new ones arrive. */
.dive__readout { display: inline-grid; color: var(--soft); }
.dive__readout::before { grid-area: 1 / 1; }
.dive__readout > span { grid-area: 1 / 2; transition: opacity .4s var(--ease); }
.dive__readout > span.is-entering, .dive__readout > span.is-leaving { opacity: 0; }

/* The steps' words: the one at the reader's line is lit. They sit about the lens's leftover space
   apart (about 250px), so the next line rises into view as the last one slides under the lens and
   the film changes only once its words are up. */
.dive__step { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 250px; color: var(--type-quiet); transition: color .42s var(--ease); }
.dive__step.is-active { color: var(--type); }
.dive__step h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -.015em; }
.dive__step p { max-width: 44ch; margin-top: 10px; font-size: 19px; line-height: 1.35; color: var(--type-quiet); transition: color .42s var(--ease); }
.dive__step.is-active p { color: var(--type-muted); }

/* ---- Any angle ---- */
/* Back on the light page between two stages: dawn above, dusk below into the finale. A reader carried
   here from the dive lands with the section's top at the window's top, so the heading sits well below
   the bar. */
.angle {
  --fade-in: 112px;
  --fade-out: 180px;
  padding: 150px var(--gutter) 130px;
  background:
    linear-gradient(to bottom, var(--dusk-2), var(--dusk-1) calc(var(--fade-in) / 2), transparent var(--fade-in)),
    linear-gradient(to top, var(--dusk-2), var(--dusk-1) calc(var(--fade-out) / 2), transparent var(--fade-out)),
    radial-gradient(ellipse 60% 40% at 50% 46%, var(--glow), transparent 72%),
    var(--ground);
  text-align: center;
}
.angle h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.018em; }
/* The heading, the whole film and the line under it fit one screen from where the carry lands, with
   the line clear of the bottom band where reveals wait: the padding (150), the heading (67), the gaps
   (52), the line (31) and 80px to spare. */
.angle__film { width: min(var(--content), max(520px, calc((100svh - 380px) * 16 / 9))); margin: 28px auto 0; aspect-ratio: 16 / 9; box-shadow: var(--film-shadow); }
.angle__line { --reveal-order: 1; margin-top: 24px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 600; }

/* Down: the film grows out of the spot, a pearl edge showing where it came from, then the edge fades. */
@keyframes dive-in {
  from { opacity: 0; transform: scale(.12); outline-color: color-mix(in srgb, var(--pdb-purp-pearl, #f8f5ff) 85%, transparent); }
  35% { opacity: 1; }
  70% { outline-color: color-mix(in srgb, var(--pdb-purp-pearl, #f8f5ff) 85%, transparent); }
  to { opacity: 1; transform: none; outline-color: transparent; }
}
/* Back up: the level above settles back over the deeper one. */
@keyframes dive-out { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }

@media (max-width: 734px) {
  .know-hero__film { width: var(--content); margin-top: 30px; }
  .dive { --section-top: 76px; --fade-in: 94px; --fade-out: 130px; padding-bottom: 150px; }
  .dive__body { margin-top: 32px; }
  /* The lens takes the whole width; its outermost ring (1.066 × 358px) stays inside the gutter. */
  .dive__screen { border-radius: 12px; }
  .dive__rings i { border-radius: 15px; }
  .dive__lens > .video-toggle { right: 8px; bottom: 8px; }
  /* The path keeps only where the reader is and what the film shows: "Kush Mints · 7g › Stock history". */
  .dive__caption { font-size: 12px; }
  .dive__path .dive__origin, .dive__path li[data-lock-cell]:not(.is-active) { display: none; }
  .dive__path li.is-active::before { content: none; }
  .dive__step { min-height: max(40svh, 220px); }
  .dive__step h3 { font-size: 24px; }
  .dive__step p { font-size: 16px; }
  .angle { padding: 120px var(--gutter) 88px; }
  .angle__film { width: var(--content); margin-top: 30px; }
}

/* With motion, a film zooms in from its spot going down and settles back out going up. It is an
   animation, not a transition: a transition starts from the style the film had last, so after a change
   of direction a film already loaded would start from the old direction's scale. The animation starts
   from its own first frame every time, and it ends on the film's resting style, so the film it
   replaces never flashes when it is let go. The rings ease out a level, the path's next level opens,
   and any angle's film settles back to full size as it arrives: the zoom back out. */
@media (prefers-reduced-motion: no-preference) {
  .dive[data-lock-dir="in"] .dive__feed.is-active.is-shown { animation: dive-in .52s cubic-bezier(.2, .8, .2, 1) both; }
  .dive[data-lock-dir="out"] .dive__feed.is-active.is-shown { transform-origin: 50% 50%; animation: dive-out .52s cubic-bezier(.2, .8, .2, 1) both; }
  .dive__rings i { transition: transform .9s var(--ease), opacity .9s var(--ease); }
  .js .dive__path li[data-lock-cell]:not(.is-active):not(.is-passed) { max-width: 0; opacity: 0; }
  .dive__path li { transition: max-width .6s var(--ease), opacity .6s var(--ease), color .5s var(--ease); }
  .dive__stage::before { transition: opacity .2s linear; }
  .js .angle__film[data-reveal]:not(.is-visible) { transform: scale(1.06); }
}

/* Reduced motion: no pull-back, zoom, ring or path motion; the films change at once and every level of
   the path shows, the reader's own lit. */
@media (prefers-reduced-motion: reduce) {
  .know-hero__film { animation: none; }
  .dive__step, .dive__step p, .dive__readout > span { transition: none; }
}