/* The intersection is a stage, not an illustration column.
   The supplied arc and its inverse share the same transforms as the clipping path. */
.pinwrap {
  --scrub: 1;
  --set-first: var(--intag-forest-750);
  --set-second: var(--intag-forest-600);
  --set-overlap: var(--intag-apricot-200);
  --stage-ground: var(--intag-color-surface-sunken);
  height: auto; padding: 0; background: var(--stage-ground);
}
.pin {
  position: relative; top: auto; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; grid-template-columns: 1fr;
  width: 100%; max-width: none; min-height: 760px; height: auto;
  padding-block: var(--intag-space-3xl); margin: 0;
}
.pin__field {
  z-index: -2; inset: -15%; opacity: 1;
  background-image: radial-gradient(ellipse at 25% 25%, var(--intag-forest-850), transparent 65%), radial-gradient(ellipse at 80% 75%, var(--intag-forest-900), transparent 65%);
  background-size: cover;
}
.pin__field::before {
  content: ""; position: absolute; inset: -10%;
  background-image: url('../patterns/INTAG_Pattern_Lattice_Overlay.svg');
  background-size: 96px 96px; opacity: .35;
}
.pin__art {
  position: absolute; inset: 0; z-index: -1; display: block;
  width: 100%; height: 100%; min-height: 0; order: 0;
  pointer-events: none;
}
.pin__cap { fill: var(--set-first); }
.pin__cup { fill: var(--set-second); }
.pin__x { fill: var(--set-overlap); }
.pin__scrub { transform-origin: 700px 450px; }
.pin__scrub--cap {
  transform: translate(calc(-400px + var(--scrub) * 470px), calc(-88px + var(--scrub) * 88px)) rotate(calc(-6deg + var(--scrub) * 6deg)) scale(calc(1.12 - var(--scrub) * .10));
}
.pin__scrub--cup {
  transform: translate(calc(400px - var(--scrub) * 470px), calc(88px - var(--scrub) * 88px)) rotate(calc(6deg - var(--scrub) * 6deg)) scale(calc(1.12 - var(--scrub) * .10));
}
.pin__track, .pin__clipmove { transition: transform calc(var(--intag-motion-expressive-ms) * 1.2) var(--intag-motion-ease-standard); }
.pin__track--cap, .pin__clipmove { transform: translate(calc(var(--px) * -84px), calc(var(--py) * -52px)); }
.pin__track--cup { transform: translate(calc(var(--px) * 84px), calc(var(--py) * 52px)); }
.pin__sway--a, .pin__sway--b, .pin__clipsway { transform-origin: 700px 450px; }

.pin__copy {
  --title-enter: clamp(0, (var(--scrub) - .10) * 3.6, 1);
  --body-enter: clamp(0, (var(--scrub) - .32) * 3.5, 1);
  --closing-enter: clamp(0, (var(--scrub) - .45) * 3.5, 1);
  position: relative; z-index: 1; isolation: isolate;
  width: 100%; padding: var(--intag-space-xl) var(--page-gutter);
  background: transparent; text-align: center;
}
.pin__copy::before {
  content: ""; position: absolute; inset: -90px 0; z-index: -1;
  background: linear-gradient(180deg, transparent, var(--stage-ground) 90px, var(--stage-ground) calc(100% - 90px), transparent);
  opacity: clamp(0, (var(--scrub) - .08) * 3, .96);
}
.pin__copy > * { margin-inline: auto; }
.pin__title {
  font-size: clamp(var(--intag-fs-en-h2), 4.2vw, var(--intag-fs-en-display));
  line-height: 1.15; font-weight: 200; max-width: 30ch;
  opacity: var(--title-enter); transform: translateY(calc((1 - var(--title-enter)) * var(--intag-space-xl)));
}
.pin__body {
  max-width: 72ch; margin-top: var(--intag-space-lg);
  font-size: var(--intag-fs-en-body-lg); line-height: 1.6;
  color: var(--intag-color-text-secondary);
  opacity: var(--body-enter); transform: translateY(calc((1 - var(--body-enter)) * var(--intag-space-xl)));
}
.pin__kicker {
  max-width: 65ch; margin-top: var(--intag-space-lg);
  font-size: var(--intag-fs-en-body-lg); line-height: 1.5;
  opacity: var(--closing-enter); transform: translateY(calc((1 - var(--closing-enter)) * var(--intag-space-lg)));
}

@keyframes intersection-drive { from { --scrub: 0; } to { --scrub: 1; } }
@keyframes set-breathe-first { from { transform: translate(-10px, 8px) rotate(-.5deg); } to { transform: translate(10px, -8px) rotate(.5deg); } }
@keyframes set-breathe-second { from { transform: translate(10px, -8px) rotate(.5deg); } to { transform: translate(-10px, 8px) rotate(-.5deg); } }
@keyframes stage-field { from { transform: translate3d(-2%, -1%, 0) scale(1.02); } to { transform: translate3d(2%, 1%, 0) scale(1.08); } }
@keyframes stage-lattice { from { transform: translate(0, 0); } to { transform: translate(96px, 96px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .pin__sway--a, .js .pin__clipsway { animation: set-breathe-first calc(var(--intag-motion-expressive-ms) * 24) ease-in-out infinite alternate; }
  .js .pin__sway--b { animation: set-breathe-second calc(var(--intag-motion-expressive-ms) * 24) ease-in-out infinite alternate; }
  .js .pin__field { animation: stage-field calc(var(--intag-motion-expressive-ms) * 46) ease-in-out infinite alternate; }
  .js .pin__field::before { animation: stage-lattice calc(var(--intag-motion-expressive-ms) * 78) linear infinite alternate; }
  @supports (animation-timeline: view()) {
    @media (min-width: 1100px) and (min-height: 760px) and (pointer: fine) {
      .pinwrap { height: 260svh; animation: intersection-drive linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
      .pin { position: sticky; top: var(--head-h); height: calc(100svh - var(--head-h)); min-height: 0; padding-block: 0; }
    }
  }
}

[data-theme="light"] .pinwrap {
  --set-first: var(--intag-sand-300);
  --set-second: var(--intag-sand-200);
  --set-overlap: var(--intag-apricot-400);
  --stage-ground: var(--intag-color-surface-raised);
  background: var(--stage-ground);
}
[data-theme="light"] .pin__copy { background: transparent; }
[data-theme="light"] .pin__field { background-image: radial-gradient(ellipse at 25% 25%, var(--intag-apricot-200), transparent 65%), radial-gradient(ellipse at 80% 75%, var(--intag-sand-200), transparent 65%); }
[data-theme="light"] .pin__field::before { background-image: url('../patterns/INTAG_Pattern_Lattice_Light_Overlay.svg'); opacity: .45; }

/* The scene retains its full width on touch screens, with ordinary document scrolling. */
@media (max-width: 1099px), (pointer: coarse) {
  .pinwrap { height: auto; animation: none; --scrub: 1; }
  .pin { position: relative; top: auto; display: block; height: auto; min-height: 0; padding: 360px 0 0; }
  .pin__art { height: 420px; }
  .pin__copy { padding: var(--intag-space-2xl) var(--page-gutter); background: var(--stage-ground); }
  .pin__title { font-size: var(--intag-fs-en-h1); max-width: 28ch; }
}
@media (max-width: 699px) {
  .pin { padding-top: 280px; }
  .pin__art { height: 320px; }
  .pin__copy { text-align: start; padding-block: var(--intag-space-xl) var(--intag-space-2xl); }
  .pin__title { font-size: var(--intag-fs-en-h3); font-weight: 300; max-width: none; }
  .pin__body { margin-top: var(--intag-space-md); }
  .pin__kicker { font-size: var(--intag-fs-en-body); }
}
@media (max-height: 759px) and (min-width: 1100px) {
  .pinwrap { height: auto; animation: none; --scrub: 1; }
  .pin { position: relative; top: auto; height: auto; min-height: 700px; padding-block: var(--intag-space-3xl); }
}
/* Explicit alternatives stay composed and readable; they never leave a tall empty pin. */
.motion-stopped .pinwrap { height: auto; animation: none; --scrub: 1; }
.motion-stopped .pin { position: relative; top: auto; height: auto; min-height: 760px; padding-block: var(--intag-space-3xl); }
.motion-stopped .pin__track, .motion-stopped .pin__clipmove { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pinwrap { height: auto; animation: none; --scrub: 1; }
  .pin { position: relative; top: auto; height: auto; min-height: 760px; padding-block: var(--intag-space-3xl); }
  .pin__track, .pin__clipmove { transform: none; }
}
@media (max-width: 1099px), (pointer: coarse) {
  .motion-stopped .pin { min-height: 0; padding: 360px 0 0; }
  @media (prefers-reduced-motion: reduce) { .pin { min-height: 0; padding: 360px 0 0; } }
}
@media (max-width: 699px) {
  .motion-stopped .pin { padding-top: 280px; }
  @media (prefers-reduced-motion: reduce) { .pin { padding-top: 280px; } }
}
.pin.motion-paused *, .pin.motion-paused::before, .pin.motion-paused *::before { animation-play-state: paused !important; }
@media print {
  .pinwrap { height: auto !important; --scrub: 1; }
  .pin { display: block; position: static; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  .pin__copy { padding: var(--intag-space-lg) var(--page-gutter); }
  .pin__copy::before { display: none; }
  .pin__title, .pin__body, .pin__kicker { opacity: 1; transform: none; }
}