/* Become a Partner - homepage invitation. Uses the site's own tokens.
   Base styles ARE the final, fully readable composition. The animation only
   exists while .pinv-armed is set by script, and never for reduced motion. */
.pinv { background: var(--paper-2); scroll-margin-top: 84px; }
.pinv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "head stage" "ben stage" "cta stage"; column-gap: 56px; align-items: start; }
.pinv-head { grid-area: head; }
.pinv-ben { grid-area: ben; }
.pinv-cta { grid-area: cta; }
.pinv-fig { grid-area: stage; align-self: center; margin: 0; }
.pinv h2 { margin-bottom: 10px; }
.pinv-sub { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 25px); line-height: 1.3; color: var(--accent); margin-bottom: 14px; }
.pinv-intro { font-size: 17px; color: var(--ink-soft); max-width: 52ch; }

.pinv-list { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: pinv; border-top: 1px solid var(--line-strong); }
.pinv-list li { counter-increment: pinv; position: relative; padding: 13px 0 13px 46px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink); }
.pinv-list li::before { content: counter(pinv); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-serif); font-size: 15px; line-height: 30px; text-align: center; }

.pinv-cta { margin-top: 26px; }
.pinv-cta .btn { font-size: 16px; padding: 14px 28px; }
.pinv-line { margin-top: 12px; font-size: 14.5px; color: var(--ink-faint); }
.pinv-ctl { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 6px; }
.pinv-ctl[hidden], .pinv-ctl [hidden] { display: none !important; }
.pinv-link { background: none; border: 0; padding: 0 2px; min-height: 44px; font: inherit; font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pinv-link:hover { color: var(--accent); }

/* Stage */
.pinv-stage { position: relative; aspect-ratio: 1 / 1.02; border-radius: 16px; overflow: hidden; background: #1c1a17; border: 1px solid #33302b; box-shadow: 0 24px 50px rgba(28, 26, 23, .22); }
.pinv-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(12, 11, 9, .55) 100%); }
.pinv-view { position: absolute; inset: 0; perspective: 1200px; perspective-origin: 50% 36%; }
.pinv-plane { position: absolute; left: 50%; top: 52%; width: 94%; aspect-ratio: 700 / 640; margin: 0; transform-origin: 50% 55%; transform: translate(-50%, -50%) rotateX(30deg) rotateZ(-3deg) scale(1.1); transform-style: preserve-3d; will-change: transform; -webkit-mask-image: radial-gradient(ellipse 78% 74% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 78% 74% at 50% 50%, #000 62%, transparent 100%); }
.pinv-plane > img, .pinv-plane > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pinv-map .glow { fill: none; stroke: #c9a961; stroke-opacity: .18; stroke-width: 15; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pinv-map .rt { fill: none; stroke: #e0c27f; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pinv-map .m circle { fill: #8d8573; }
.pinv-map .m text { font: 500 15px var(--font-body); letter-spacing: .14em; text-transform: uppercase; fill: #a39a86; }
.pinv-map .c circle { fill: #e0c27f; stroke: #1c1a17; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.pinv-map .c text { font: 500 22px var(--font-serif); fill: #f1e8d6; paint-order: stroke; stroke: #0c0b09; stroke-width: 5px; stroke-linejoin: round; }

.pinv-card { position: absolute; left: 4.5%; top: 5%; width: 27%; margin: 0; background: #faf7f2; border-radius: 8px; padding: 6px 6px 7px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); z-index: 2; }
.pinv-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; display: block; }
.pinv-card figcaption { font-size: 11.5px; line-height: 1.3; color: var(--ink); margin-top: 5px; text-align: center; }
.pinv-card figcaption span { display: block; color: var(--ink-faint); font-size: 10.5px; }
.pinv-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); max-width: 62ch; }

/* Armed (script on, motion allowed): the pre-animation state */
.pinv-armed:not(.is-playing):not(.is-done) .pinv-plane { transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-9deg) scale(.84); }
.pinv-armed:not(.is-playing):not(.is-done) .pinv-map .rt, .pinv-armed:not(.is-playing):not(.is-done) .pinv-map .glow { stroke-dashoffset: 1; }
.pinv-armed:not(.is-playing):not(.is-done) .pinv-map .c > g { opacity: 0; }
.pinv-armed:not(.is-playing):not(.is-done) .pinv-map .c circle { transform: scale(0); }
.pinv-armed:not(.is-playing):not(.is-done) .pinv-list li { opacity: 0; transform: translateY(14px); }
.pinv-armed:not(.is-playing):not(.is-done) .pinv-card { opacity: 0; transform: translateY(18px) rotate(-2deg); }

/* Playing: about 18 seconds, then the base (final) state remains */
.pinv.is-playing .pinv-plane { animation: pinv-cam 18s cubic-bezier(.22, .61, .36, 1) both; }
.pinv.is-playing .rt, .pinv.is-playing .glow { animation: pinv-draw 3.2s ease-in-out var(--d, 0s) both; }
.pinv.is-playing .c > g { animation: pinv-fade .6s ease-out var(--d, 0s) both; }
.pinv.is-playing .c circle { animation: pinv-pop .7s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }
.pinv.is-playing .pinv-list li { animation: pinv-in .4s ease-out var(--d, 0s) both; }
.pinv.is-playing .pinv-card { animation: pinv-card 1.6s ease-out 15s both; }
.pinv.is-paused .c > g, .pinv.is-paused .pinv-plane, .pinv.is-paused .rt, .pinv.is-paused .glow, .pinv.is-paused .c circle, .pinv.is-paused .pinv-list li, .pinv.is-paused .pinv-card { animation-play-state: paused; }
@keyframes pinv-cam { from { transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-9deg) scale(.84); } to { transform: translate(-50%, -50%) rotateX(30deg) rotateZ(-3deg) scale(1.1); } }
@keyframes pinv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pinv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pinv-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pinv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pinv-card { from { opacity: 0; transform: translateY(18px) rotate(-2deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pinv *, .pinv *::before, .pinv *::after { animation: none !important; transition: none !important; }
  .pinv-plane { will-change: auto; }
}
@media (max-width: 920px) {
  .pinv-grid { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "ben" "cta"; }
  .pinv-fig { margin: 26px 0 4px; }
  .pinv-stage { aspect-ratio: 1 / .92; }
  .pinv-list { margin-top: 18px; }
  .pinv-cta .btn { width: 100%; justify-content: center; }
  .pinv-card { width: 30%; }
}