/* Potodesign hero (concept A): the lake and opening, then a shape loop.
   A lower-left label names each shape's capability.
   Scoped to .poto-a so O is never affected. */

/* Pinned hero: three quarters of an extra screen of scroll carries the viewer through the ring
   into the paper-white first line of the story. */
.a-hero-track { position: relative; height: calc(100dvh + 75vh); }
.a-hero-track > .loading-stage { position: sticky; top: 0; }
/* One white year sequence marks the opening; O keeps its original colors. */
.poto-a .career-years, .poto-a .year-window { color: var(--poto-paper); }
.a-pass-static .a-hero-track { height: auto; }
.a-pass-static .a-hero-track > .loading-stage { position: relative; }
.a-pass-veil { position: absolute; z-index: 9; inset: 0; pointer-events: none; background: var(--poto-paper);
  opacity: clamp(0, calc((var(--pass, 0) - .55) / .4), 1); }
.poto-a.is-passing :is(.poto-header, .a-hello) { opacity: clamp(0, calc(1 - var(--pass, 0) * 4), 1); transition: none; }
.poto-a.is-passing .intro-card { opacity: clamp(0, calc(1 - var(--pass, 0) * 3), 1); transform: translate(-50%, calc(var(--pass, 0) * -6rem)); transition: none; }
.poto-a.is-passing .a-title { opacity: clamp(0, calc(1 - var(--pass, 0) * 2.5), 1); transition: none; }

/* Lower-left label: like a gallery caption, one capability at a time. */
.a-label { position: absolute; z-index: 5; left: var(--poto-space-xl); bottom: var(--poto-space-xl); display: grid; gap: var(--poto-space-sm);
  color: var(--poto-paper); pointer-events: none; transition: opacity 400ms var(--poto-ease), filter 400ms var(--poto-ease); }
.a-label::before { content: ''; width: var(--poto-space-xl); height: 1px; margin-bottom: var(--poto-space-xs); background: currentColor; opacity: .6; }
.a-label-count { font: 600 .6875rem/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; font-variant-numeric: tabular-nums; opacity: .8; }
.a-label-word { font-family: 'Poto Reference Variable', Arial, Helvetica, sans-serif; font-weight: 200; font-size: clamp(2.25rem, 3.6vw, 4rem);
  line-height: 1; letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 0 1rem rgb(8 24 43 / .35); }
.a-label.is-changing { opacity: 0; filter: blur(4px); }
.is-opening .a-label { opacity: 0; }
.a-label.is-list .a-label-word { font-size: 1rem; font-weight: 300; }
.poto-a.is-passing .a-label { opacity: clamp(0, calc(1 - var(--pass, 0) * 3), 1); transition: none; }

/* Motion settings: lower right, leaving the lower left to the label. */
.poto-a .preview-controls { left: auto; right: var(--poto-space-xl); }
.poto-a .motion-settings-panel { left: auto; right: 0; }

/* Greeting on top; the card keeps only the scroll cue. */
.a-hello { position: absolute; z-index: 5; top: calc(var(--poto-space-lg) + .6rem); left: 50%; margin: 0; transform: translateX(-50%);
  color: var(--poto-paper); font: .9375rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .01em; white-space: nowrap;
  transition: opacity var(--poto-reveal) var(--poto-ease); }
.is-opening .a-hello { opacity: 0; }
.poto-a .conversation-glass { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.poto-a .intro-card { top: auto; bottom: var(--poto-space-xl); transform: translateX(-50%); }
.poto-a .intro-actions { margin-top: 0; }
.a-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: var(--poto-space-sm); min-height: var(--poto-control-height);
  padding: var(--poto-space-xs) var(--poto-space-md); color: var(--poto-paper); font: .8125rem/1.4 Arial, Helvetica, sans-serif; text-decoration: none; }
.a-scroll-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  animation: poto-scroll-cue 2.4s var(--poto-ease) infinite; }
@keyframes poto-scroll-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.3rem); } }
.reduce-motion .a-scroll-icon { animation: none; }
.poto-a.is-opening .intro-card { transform: translate(-50%, var(--poto-space-md)); }