/* Three motion moments; the original layout remains the baseline. */
.hero-one h1 .hero-line{display:block}
.hero-one h1 .hero-line:first-child{color:var(--ink)}
.hero-one .hero-visual{width:108%;aspect-ratio:1;margin-inline:-4%;flex:none}
.hero-tilt,.hero-float{width:100%;height:100%}
.hero-one .hero-visual .art{width:100%;height:100%;margin:0}
.hero-tilt{transform:none}
.steps li{position:relative}
.motion-control{display:inline-flex;align-items:center;gap:8px;padding:7px 0;margin-top:7px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;text-align:left}
.motion-control[hidden]{display:none}
.motion-control::before{content:'';width:6px;height:6px;background:var(--orange-dark);border-radius:50%}
.motion-control[aria-pressed='true']::before{background:#8c8177}
.motion-control:focus-visible{outline:3px solid #26788a;outline-offset:5px}
.motion-control:disabled{cursor:default}

/* 01. A short, staggered arrival. No blur or layout animation. */
.motion-enabled [data-intro]{animation:privychno-arrive .72s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--intro-delay,0ms)}
@keyframes privychno-arrive{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}

/* 02. A finite float plus pointer tilt. No perpetual render loop. */
.motion-enabled .hero-active .hero-float{animation:privychno-float 4.5s ease-in-out .5s 1 both}
.motion-enabled .hero-tilt{transition:transform .42s cubic-bezier(.2,.75,.25,1);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
@keyframes privychno-float{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-11px) rotate(-.65deg)}70%{transform:translateY(-3px) rotate(.3deg)}}
.motion-paused [data-intro],.motion-paused .hero-active .hero-float{animation-play-state:paused}
html.motion-reduced{scroll-behavior:auto}
.motion-reduced .button,.motion-reduced .questions summary span{transition:none}
.motion-reduced .button:hover{transform:none}

/* 03. Each step enters once; its orange rule draws from left to right. */
.motion-enabled .steps li{transition:opacity .6s ease,transform .65s cubic-bezier(.2,.75,.2,1);transition-delay:var(--step-delay,0ms)}
.motion-enabled .steps .reveal-pending{opacity:0;transform:translateY(24px)}
.motion-enabled .steps .is-revealed{opacity:1;transform:none}
.motion-enabled .steps li::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .82s cubic-bezier(.22,.7,.2,1);transition-delay:calc(var(--step-delay,0ms) + 120ms)}
.motion-enabled .steps .is-revealed::before{transform:scaleX(1)}
@media(min-width:761px){.steps li:nth-child(2){--step-delay:120ms}.steps li:nth-child(3){--step-delay:240ms}}
@media(max-width:760px){.hero-one .hero-visual{width:calc(100% + 24px);height:115%;aspect-ratio:auto;margin:0}.hero-one .hero-visual .art{width:100%;height:100%;margin:0}.motion-control{font-size:12px;min-height:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-enabled [data-intro],.motion-enabled .hero-active .hero-float{animation:none!important}.hero-tilt,.motion-enabled .hero-tilt{transform:none!important;transition:none!important}.motion-enabled .steps li,.motion-enabled .steps .reveal-pending{opacity:1!important;transform:none!important;transition:none!important}.motion-enabled .steps li::before{transition:none!important;transform:scaleX(1)}}