/* Original motion design for PAP Lab. No remote libraries or new trackers. */
.hero{position:relative;isolation:isolate;overflow:hidden;max-width:1320px;padding-inline:clamp(22px,5vw,70px);gap:70px;padding-block:90px}
.hero>div{position:relative;z-index:1}
.motion-flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.65;mask-image:linear-gradient(90deg,#0003,#000)}
.motion-flow path{fill:none;stroke:#dedede;stroke-width:1;vector-effect:non-scaling-stroke}
.motion-flow .flow-pulse{stroke:#444;stroke-width:3;stroke-linecap:round;stroke-dasharray:.3 99.7;animation:flow-travel 9s linear infinite;animation-delay:calc(var(--i)*-1.2s)}
@keyframes flow-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.portrait-stage{perspective:1000px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease;align-self:center;padding:25px 10px 30px}
.hero .hero-photo{border-radius:18px;overflow:hidden;border:1px solid #dedede;box-shadow:0 25px 65px #00000012;transform:rotate(-2deg)}
.hero-photo figcaption{background:#fff}
.floating-card{position:absolute;z-index:2;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 12px 35px #00000012;padding:15px 19px;display:grid;grid-template-columns:10px 1fr;gap:3px 10px;max-width:290px;animation:card-drift 6s ease-in-out infinite;pointer-events:none}
.floating-card strong{font-size:14px}.floating-card>span:last-child{font-size:11px;color:#666;grid-column:2}
.float-0{top:0;right:-16px;transform:rotate(2deg)}.float-1{bottom:105px;left:-30px;animation-delay:-3s}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#222;align-self:center;box-shadow:0 0 0 4px #ededed}
@keyframes card-drift{0%,100%{translate:0 0}50%{translate:0 -12px}}
.framework-belt{overflow:hidden;border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;background:#fafafa;padding:25px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.framework-rail{display:flex;width:max-content;animation:rail-travel 32s linear infinite}
.framework-group{display:flex;align-items:center;gap:75px;padding-right:75px}
.framework-group>span{display:flex;align-items:center;gap:18px;font-size:26px;letter-spacing:-1px;font-weight:700;white-space:nowrap}
.framework-group small{font:11px monospace;letter-spacing:0;color:#888;border:1px solid #ddd;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
@keyframes rail-travel{to{transform:translateX(-50%)}}
.clinic-note{border:1px solid #ddd;border-radius:16px;box-shadow:0 24px 60px #0000000c;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s ease;overflow:hidden}
.clinic-chrome{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e5e5e5;margin:-8px 0 25px;padding-bottom:18px;font:9px monospace;letter-spacing:1px;color:#777}
.clinic-chrome>span:first-child{letter-spacing:3px;color:#ccc}
.clinic-note li{position:relative;border-radius:6px;padding-left:12px;padding-right:12px;animation:clinic-highlight 12s infinite;animation-delay:calc(var(--step)*3s)}
.clinic-note li::after{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;background:#111;transform:scaleY(0);transform-origin:top;animation:clinic-marker 12s infinite;animation-delay:calc(var(--step)*3s)}
@keyframes clinic-highlight{0%,24%{background:#f0f0f0}25%,100%{background:transparent}}
@keyframes clinic-marker{0%{transform:scaleY(0)}22%,24%{transform:scaleY(1)}25%,100%{transform:scaleY(0)}}
.clinic-pipeline{display:flex;justify-content:space-between;gap:5px;border-top:1px solid #eee;margin-top:22px;padding-top:18px;font:10px monospace;color:#777}
.clinic-pipeline span+span:before{content:'→';margin-right:8px;color:#aaa}
.plan{border-radius:12px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s,box-shadow .35s}
.tracks article{border-radius:10px;transition:transform .3s,box-shadow .3s}
.button{border-radius:6px;transition:transform .22s,box-shadow .22s,background .22s}.button-arrow{transition:transform .25s}
.workshop{border-radius:16px;overflow:hidden}
.motion-control{position:fixed;bottom:18px;left:18px;z-index:16;border:1px solid #ccc;background:#fff;color:#333;border-radius:30px;padding:10px 15px;font:12px Arial;cursor:pointer;box-shadow:0 4px 18px #0001;min-height:40px}
@media(hover:hover) and (pointer:fine){.button:hover{transform:translateY(-3px);box-shadow:0 10px 25px #0002}.button:hover .button-arrow{transform:translate(3px,-3px)}.tracks article:hover{transform:translateY(-7px);box-shadow:0 20px 40px #0001}.plan:hover{box-shadow:0 20px 45px #0001;translate:none}.framework-belt:hover .framework-rail{animation-play-state:paused}}
.hero:not(.motion-in-view) .flow-pulse,.portrait-stage:not(.motion-in-view) .floating-card,.framework-belt:not(.motion-in-view) .framework-rail,.clinic-note:not(.motion-in-view) li,.clinic-note:not(.motion-in-view) li::after{animation-play-state:paused}
html[data-motion=paused] .flow-pulse,html[data-motion=paused] .floating-card,html[data-motion=paused] .framework-rail,html[data-motion=paused] .clinic-note li,html[data-motion=paused] .clinic-note li::after,.tab-hidden *,.tab-hidden *::after{animation-play-state:paused!important}
html[data-motion=paused] [data-tilt]{transform:none!important}
@media(max-width:900px){.hero{gap:35px;padding-inline:28px}.floating-card{padding:12px;max-width:240px}.float-0{right:-8px}.float-1{left:-12px;bottom:85px}}
@media(max-width:680px){.hero{padding:36px 22px 45px;gap:32px}.portrait-stage{width:100%;max-width:400px;margin:auto;padding:28px 15px}.hero .hero-photo{transform:rotate(-1deg)}.float-0{right:0}.float-1{left:0;bottom:100px}.floating-card{max-width:230px}.framework-belt{padding:19px 0}.framework-group{gap:40px;padding-right:40px}.framework-group>span{font-size:21px}.motion-control{left:auto;right:12px;bottom:72px;font-size:11px;padding:8px 12px}.clinic-chrome{font-size:8px}.motion-flow{opacity:.4}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flow-pulse,.floating-card,.framework-rail,.clinic-note li,.clinic-note li::after{animation:none!important}.portrait-stage,.hero .hero-photo,.plan,.clinic-note{transform:none!important}.button,.button-arrow,.tracks article,[data-tilt]{transition:none!important}.framework-rail{width:100%}.framework-group{flex-wrap:wrap;justify-content:center;gap:18px;padding:0 20px}.framework-group+ .framework-group{display:none}.motion-control{display:none}}

/* Mobile track stack: the next opaque card covers the previous card. */
@media(max-width:900px){
  #inside .tracks{display:block}
  #inside .tracks article{margin-bottom:28px;font-size:16px;line-height:1.55;transform:none;translate:none;transition:none}
  #inside .tracks article:last-child{margin-bottom:0}
  #inside .tracks.stack-ready{position:relative;isolation:isolate;padding-bottom:18vh}
  #inside .tracks.stack-ready article{position:sticky;top:var(--track-top);min-height:var(--track-height);margin-bottom:22vh;background:#f3f3f3;border:1px solid #d1d1d1;border-top:2px solid #111;border-radius:14px;box-shadow:0 -10px 30px #0000000d;z-index:1}
  #inside .tracks.stack-ready article:nth-child(2){z-index:2;background:#ededed}
  #inside .tracks.stack-ready article:nth-child(3){z-index:3;background:#e7e7e7;margin-bottom:0}
}
/* Short decorative passes keep the page calm without a motion control. */
.motion-flow .flow-pulse{animation-duration:4.5s;animation-delay:0s;animation-iteration-count:1;animation-fill-mode:forwards}
.floating-card{animation-duration:4s;animation-iteration-count:1;animation-delay:0s}
.clinic-note li,.clinic-note li::after{animation-duration:1s;animation-iteration-count:1;animation-delay:calc(var(--step)*1s)}
@media(prefers-reduced-motion:reduce){#inside .tracks.stack-ready{padding-bottom:0}#inside .tracks.stack-ready article{position:static;min-height:0;margin-bottom:28px}}

/* Labels are anchored to the image itself, independently of its caption. */
.portrait-stage{display:block;padding:38px 10px 12px}
.hero .hero-photo{transform:none;overflow:visible}
.portrait-image-frame{position:relative;isolation:isolate}
.portrait-image-frame>img{border-radius:17px 17px 0 0}
.hero-photo figcaption{position:relative;border-radius:0 0 17px 17px}
.portrait-badges{display:contents}
.portrait-badges .floating-card{position:absolute;inset:auto;grid-column:auto;grid-row:auto;width:max-content;max-width:min(240px,78%);min-width:0;padding:12px 15px;transform:none;translate:none;box-shadow:0 12px 30px #00000018;animation:badge-float 4.8s ease-in-out infinite;overflow-wrap:anywhere;z-index:2}
.portrait-badges .float-0{top:-32px;right:-8px}
.portrait-badges .float-1{bottom:8%;right:-8px;left:auto;animation-delay:-2.4s}
@keyframes badge-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:680px){
 .portrait-stage{padding:38px 8px 12px}
 .portrait-badges .floating-card{max-width:min(220px,82%);padding:10px 12px}
 .portrait-badges .floating-card strong{font-size:13px}
 .portrait-badges .floating-card>span:last-child{font-size:10px}
 .portrait-badges .float-0{top:-30px;right:-6px}
 .portrait-badges .float-1{bottom:8%;right:-6px}
}
@media(prefers-reduced-motion:reduce){.portrait-badges .floating-card{animation:none!important}}
/* The same scroll-driven stack across the two other three-card sections. */
@media(max-width:900px){
  #problem .three,#start .three{display:block}
  #problem .three article,#start .three article{padding:24px;margin-bottom:28px;font-size:16px;line-height:1.55;transform:none;translate:none;transition:none;background:#f3f3f3;border-radius:14px}
  #problem .three article:last-child,#start .three article:last-child{margin-bottom:0}
  #problem .scroll-stack.stack-ready,#start .scroll-stack.stack-ready{position:relative;isolation:isolate;padding-bottom:18vh}
  #problem .scroll-stack.stack-ready article,#start .scroll-stack.stack-ready article{position:sticky;top:var(--track-top);min-height:var(--track-height);margin-bottom:22vh;background:#f3f3f3;border:1px solid #d1d1d1;border-top:2px solid #111;box-shadow:0 -10px 30px #0000000d;z-index:1}
  #problem .scroll-stack.stack-ready article:nth-child(2),#start .scroll-stack.stack-ready article:nth-child(2){z-index:2;background:#ededed}
  #problem .scroll-stack.stack-ready article:nth-child(3),#start .scroll-stack.stack-ready article:nth-child(3){z-index:3;background:#e7e7e7;margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  #problem .scroll-stack.stack-ready,#start .scroll-stack.stack-ready{padding-bottom:0}
  #problem .scroll-stack.stack-ready article,#start .scroll-stack.stack-ready article{position:static;min-height:0;margin-bottom:28px}
}

/* Audience cards follow the same native scroll stack as the learning tracks. */
@media(max-width:900px){
 #for-you .audience-grid{grid-template-columns:minmax(0,1fr)}
 #for-you .audience-grid.stack-ready{position:relative;isolation:isolate;padding-bottom:18vh;align-items:start}
 #for-you .audience-grid.stack-ready article{position:sticky;top:var(--track-top);min-height:var(--track-height);margin-bottom:22vh;background:#f3f3f3;border:1px solid #d1d1d1;border-top:2px solid #111;border-radius:14px;box-shadow:0 -10px 30px #0000000d;z-index:1;translate:none}
 #for-you .audience-grid.stack-ready article:nth-child(2){z-index:2;background:#ededed}
 #for-you .audience-grid.stack-ready article:nth-child(3){z-index:3;background:#e7e7e7}
 #for-you .audience-grid.stack-ready article:nth-child(4){z-index:4;background:#e1e1e1;margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){
 #for-you .audience-grid.stack-ready{padding-bottom:0}
 #for-you .audience-grid.stack-ready article{position:static;min-height:0;margin-bottom:0}
}