/* Motion affects compositing only; document flow and native anchors stay stable. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-clearance, 155px); }
html, body { overflow-x: clip; }
.page-reading-progress{position:fixed;z-index:80;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,#8b70d1,#cf9ade 65%,#fff27e);transform:scaleX(0);transform-origin:left;pointer-events:none}
body:has(dialog[open]) .page-reading-progress{visibility:hidden}

.motion-arrive {
  animation: pp-arrive 850ms cubic-bezier(.16, .75, .2, 1) var(--enter-delay, 0ms) both;
}

@keyframes pp-arrive {
  from { opacity: .08; translate: 0 36px; }
  to { opacity: 1; translate: 0 0; }
}

.hero-copy-arrive {
  animation: pp-arrive 850ms cubic-bezier(.16, .75, .2, 1) var(--intro-delay, 0ms) both;
}

.hero-token { transform: rotate(var(--token-rotate, 0deg)); }

.portrait-arrive {
  animation: pp-portrait-arrive 1000ms cubic-bezier(.16, .75, .2, 1) both;
}
@keyframes pp-portrait-arrive {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

.token-arrive {
  animation: pp-token-arrive 800ms cubic-bezier(.16, .75, .2, 1) var(--token-delay, 0ms) both;
}

@keyframes pp-token-arrive {
  from {
    opacity: 0;
    translate: var(--token-entry-x, 0px) 30px;
    rotate: var(--token-entry-angle, 0deg);
    scale: .94;
  }
  to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}

/* Quiet, compositor-only accents keep the first screen alive after its intro. */
.motion-ready .token-hello .token-inner,
.motion-ready .token-voice .token-inner,
.motion-ready .token-skill .token-inner,
.motion-ready .token-mistakes .token-inner,
.motion-ready .token-play .token-inner {
  animation: pp-token-float 7s ease-in-out infinite;
  animation-play-state: var(--ambient-state, paused);
}
.motion-ready .token-voice .token-inner { animation-duration: 6s; animation-delay: -3.5s; }
.motion-ready .token-skill .token-inner { animation-duration: 8s; animation-delay: -1.4s; }
.motion-ready .token-mistakes .token-inner { animation-duration: 7.5s; animation-delay: -4.8s; }
.motion-ready .token-play .token-inner { animation-duration: 6.5s; animation-delay: -2.6s; }
.motion-ready .voice-wave i,
.motion-ready .voice-icon i {
  animation: pp-voice-wave 1300ms ease-in-out infinite;
  animation-play-state: var(--ambient-state, paused);
  transform-origin: center;
}
.motion-ready .voice-wave i:nth-child(2n),
.motion-ready .voice-icon i:nth-child(2n) { animation-delay: -700ms; }
.motion-ready .voice-wave i:nth-child(3n),
.motion-ready .voice-icon i:nth-child(3n) { animation-delay: -350ms; }
.motion-ready .token-spark .token-inner {
  animation: pp-spark-turn 10s ease-in-out infinite;
  animation-play-state: var(--ambient-state, paused);
}
html[data-motion="on"] .hero-portrait[data-motion-visible="true"] { --ambient-state: running; }

html[data-motion="on"] .hero-portrait[data-motion-visible="true"] .portrait-orbit {
  animation: pp-orbit-breathe 10s ease-in-out infinite;
}
html[data-motion="on"] .hero-portrait[data-motion-visible="true"] .portrait-circle::after {
  animation: pp-circle-breathe 8s ease-in-out infinite;
}

@keyframes pp-token-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px) rotate(1deg); }
}

@keyframes pp-voice-wave {
  0%, 100% { transform: scaleY(.45); }
  50% { transform: scaleY(1); }
}
@keyframes pp-spark-turn {
  0%, 100% { transform: rotate(-12deg) scale(.9); }
  50% { transform: rotate(35deg) scale(1.07); }
}

@keyframes pp-orbit-breathe {
  0%, 100% { transform: rotate(30deg) scaleX(1.04); }
  50% { transform: rotate(33deg) scaleX(1.06); }
}

@keyframes pp-circle-breathe {
  0%, 100% { opacity: .38; transform: rotate(15deg) scale(1); }
  50% { opacity: .58; transform: rotate(18deg) scale(1.015); }
}

.button > .arrow,
.button > span[aria-hidden="true"],
.text-link > span {
  display: inline-block;
  transition: transform .2s;
}
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .button:hover > .arrow,
  html[data-motion="on"] .button:hover > span[aria-hidden="true"],
  html[data-motion="on"] .text-link:hover > span { transform: translate(2px, -2px); }
}

html[data-motion="background"] .motion-arrive,
html[data-motion="background"] .hero-copy-arrive,
html[data-motion="background"] .portrait-arrive,
html[data-motion="background"] .token-arrive {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-arrive,
  .hero-copy-arrive,
  .portrait-arrive,
  .token-arrive,
  .motion-ready .token-hello .token-inner,
  .motion-ready .token-voice .token-inner,
  .motion-ready .token-skill .token-inner,
  .motion-ready .token-mistakes .token-inner,
  .motion-ready .token-play .token-inner,
  .motion-ready .token-spark .token-inner,
  .motion-ready .voice-wave i,
  .motion-ready .voice-icon i,
  .portrait-orbit,
  .portrait-circle::after {
    animation: none !important;
    opacity: 1;
    translate: none;
    rotate: none;
    scale: 1;
  }
}

/* Distinct entrances make each part of the story feel composed. */
.motion-arrive[data-motion-entry="card"]{animation-name:pp-card-arrive}
.motion-arrive[data-motion-entry="left"]{animation-name:pp-left-arrive}
.motion-arrive[data-motion-entry="right"]{animation-name:pp-right-arrive;animation-duration:1050ms}
.motion-arrive[data-motion-entry="signature"]{animation-name:pp-signature-arrive;animation-duration:1100ms}
@keyframes pp-card-arrive{from{opacity:.08;translate:0 44px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes pp-left-arrive{from{opacity:.08;translate:-34px 16px}to{opacity:1;translate:0 0}}
@keyframes pp-right-arrive{from{opacity:.08;translate:38px 24px;rotate:2deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes pp-signature-arrive{from{opacity:0;translate:0 48px;rotate:3deg}to{opacity:1;translate:0 0;rotate:0deg}}

/* Keep the original sticky strips, with room for the current responsive header. */
@media(min-width:681px) and (min-height:560px){
  .method-stack{padding-bottom:112px}
  .method-stack-card{top:calc(var(--method-stack-top,180px) + var(--card-index,0)*28px)}
}
@media(max-width:680px) and (min-height:540px){
  .method-stack{padding-bottom:80px}
  .method-stack-card{top:calc(var(--method-stack-top,195px) + var(--card-index,0)*20px)}
}

/* The pointer moves only the decoration layer, independently of its idle float. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .hero-token:not(.token-arrive){translate:var(--pointer-x,0px) var(--pointer-y,0px);transition:translate .45s cubic-bezier(.2,.7,.2,1)}
}

/* Reusable ambient scope: off-screen and background sections never keep running. */
[data-motion-visible]{--ambient-state:paused}
html[data-motion="on"] [data-motion-visible="true"]{--ambient-state:running}
@media(prefers-reduced-motion:no-preference){
  .motion-ready .method-art img{animation:pp-art-drift 9s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .strategy .method-art img{animation-delay:-3s;animation-duration:11s}
  .motion-ready .communication .method-art img{animation-delay:-6s}
  .motion-ready .pp-plan-sun{animation:pp-sun-turn 28s linear infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .pp-plan-art>span{animation:pp-sticker-float 8s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .chat-sticker{animation:pp-chat-wiggle 7s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .trial-ticket-price>i{animation:pp-ticket-turn 9s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .gift-band:before{animation:pp-petals-drift 16s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .gift-sheet:before{animation:pp-tape-wiggle 9s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .footer-dot:before{animation:pp-dot-breathe 6s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .group-bubble,.motion-ready .kids-word,.motion-ready .art-sticker,.motion-ready .discussion-stamp,.motion-ready .continuing-note,.motion-ready .zero-level{animation:pp-sticker-float 8s ease-in-out infinite;animation-play-state:var(--ambient-state,paused)}
  .motion-ready .bubble-two,.motion-ready .word-hello{animation-delay:-4s;animation-duration:10s}
  .motion-ready .kids-spark{animation:pp-sun-turn 24s linear infinite;animation-play-state:var(--ambient-state,paused)}
}
@keyframes pp-art-drift{0%,100%{translate:0 0;scale:1.015}50%{translate:0 -6px;scale:1.025}}
@keyframes pp-sun-turn{from{rotate:0deg}to{rotate:360deg}}
@keyframes pp-sticker-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -7px;rotate:2deg}}
@keyframes pp-chat-wiggle{0%,100%{translate:0 0;rotate:-3deg}45%{translate:0 -9px;rotate:4deg}65%{translate:0 -6px;rotate:1deg}}
@keyframes pp-ticket-turn{0%,100%{rotate:-9deg}50%{rotate:9deg}}
@keyframes pp-petals-drift{0%,100%{translate:0 9px;rotate:0deg}50%{translate:-12px -6px;rotate:1deg}}
@keyframes pp-tape-wiggle{0%,100%{rotate:-2deg}50%{rotate:3deg}}
@keyframes pp-dot-breathe{0%,100%{scale:.92}50%{scale:1.08}}
.pp-plan-point{transform-box:fill-box;transform-origin:center}

@media(max-width:680px){
  .motion-arrive{animation-duration:700ms}
  .motion-arrive[data-motion-entry="right"],.motion-arrive[data-motion-entry="left"]{animation-name:pp-arrive;animation-duration:800ms}
}
@media(prefers-reduced-motion:reduce){
  .method-stack{padding-bottom:0}
  .method-stack-card{top:auto}
  .hero-token{translate:none!important;transition:none!important}
  .method-art img,.pp-plan-sun,.pp-plan-art>span,.chat-sticker,.trial-ticket-price>i,
  .gift-band:before,.gift-sheet:before,.footer-dot:before,.group-bubble,.kids-word,
  .art-sticker,.discussion-stamp,.continuing-note,.zero-level,.kids-spark{animation:none!important;translate:none;rotate:none;scale:1}
}