/* Landing-only motion; content stays visible without JavaScript. Off unless a root has .lp-motion / .lp-sticky
   (landing-variant.js assigns both per tab session). Only transform and opacity animate. */
@keyframes lp-rise{from{opacity:.6;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes lp-source{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* hero cover = page 1 of the flip: one small corner lift after the chips settle */
@keyframes lp-cover-hint{0%,100%{transform:perspective(320px) rotateY(0)}45%{transform:perspective(320px) rotateY(-34deg)}}
/* sample one 4.4s timeline, played once and kept on the last page (questions):
   cover lands (0-.6s), pages fan (.6-.9s), cover turns (1.2-2.1s), page 2 turns (3.0-3.9s), page 3 settles flat (3.9-4.4s) */
@keyframes lp-flip-cover{
 0%{opacity:.5;transform:translate(64px,-56px) scale(.36) rotateY(0)}
 13.6%,27.3%{opacity:1;transform:translate(0,0) scale(1) rotateY(0)}
 47.7%,100%{opacity:1;transform:translate(0,0) scale(1) rotateY(-180deg)}}
@keyframes lp-flip-p2{
 0%,13.6%{opacity:0;transform:translate(0,0) rotate(0) rotateY(0)}
 20.5%,68.2%{opacity:1;transform:translate(5px,6px) rotate(1.5deg) rotateY(0)}
 88.6%,100%{opacity:1;transform:translate(5px,6px) rotate(1.5deg) rotateY(-180deg)}}
@keyframes lp-flip-p3{
 0%,13.6%{opacity:0;transform:translate(0,0) rotate(0)}
 20.5%,88.6%{opacity:1;transform:translate(10px,12px) rotate(3deg)}
 100%{opacity:1;transform:translate(0,0) rotate(0)}}
/* Flip pages exist only after JS adds them; never shown outside the animated state (e.g. reduced motion turned on later). */
#deliverables .lp-flip-page{display:none}
@media (prefers-reduced-motion:no-preference){
 .lp-motion #hero-title,.lp-motion #outcome-title{animation:lp-rise .5s cubic-bezier(.22,1,.36,1) both}
 .lp-motion .persona-chip{animation:lp-rise .45s cubic-bezier(.22,1,.36,1) both}
 .lp-motion .persona-chip:nth-child(1){animation-delay:.5s}
 .lp-motion .persona-chip:nth-child(2){animation-delay:.8s}
 .lp-motion .persona-chip:nth-child(3){animation-delay:1.1s}
 .lp-motion .persona-chip:nth-child(4){animation-delay:1.4s}
 .lp-motion .persona-chip:nth-child(5){animation-delay:1.7s}
 .lp-motion #emotional-landing .lp-hero-cover{transform-origin:left center;animation:lp-cover-hint 1.1s cubic-bezier(.45,.05,.3,1) 2.2s both}
 /* sample answer: each card rises in as it enters, then its source line settles under it */
 .lp-motion #sample-answer .story-card.lp-entered{animation:lp-rise .55s cubic-bezier(.22,1,.36,1) both}
 .lp-motion #sample-answer .story-card.lp-entered .sample-source{animation:lp-source .4s ease-out .35s both}
 .lp-motion #reports .sample-one-page.lp-entered{animation:lp-rise .45s ease-out both}
 .lp-motion #deliverables{overflow-x:clip}
 .lp-motion #deliverables .sample-one-page.lp-flip{position:relative;perspective:900px;margin-bottom:38px}
 .lp-motion #deliverables .lp-flip img{display:block;background:#fff;transform-origin:left center;backface-visibility:hidden;box-shadow:0 6px 18px #0f172a14}
 .lp-motion #deliverables .lp-flip .lp-flip-page{display:block;position:absolute;left:0;top:0;width:100%;height:auto;opacity:0}
 .lp-motion #deliverables .lp-flip .lp-flip-cover{position:relative;z-index:3}
 .lp-motion #deliverables .lp-flip .lp-flip-p2{z-index:2}
 .lp-motion #deliverables .lp-flip .lp-flip-p3{z-index:1}
 .lp-motion #deliverables .lp-flip.lp-flipping .lp-flip-cover{animation:lp-flip-cover 4.4s cubic-bezier(.45,.05,.3,1) both}
 .lp-motion #deliverables .lp-flip.lp-flipping .lp-flip-p2{animation:lp-flip-p2 4.4s cubic-bezier(.45,.05,.3,1) both}
 .lp-motion #deliverables .lp-flip.lp-flipping .lp-flip-p3{animation:lp-flip-p3 4.4s cubic-bezier(.45,.05,.3,1) both}
}
/* big enough to read as a document (96px at 375). It hangs beside the paragraphs under the two-line title: the float
   starts 84px down (2 title lines + gap) and shape-outside lets the title use the full width above it.
   The hero-copy paragraph stays the LCP and the 5 chips stay on the first screen. */
#emotional-landing .lp-hero-cover{float:right;width:72px;height:auto;margin:84px 0 6px 10px;shape-outside:inset(84px 0 0 0)}
#emotional-landing .lp-sticky-cta{display:none}
.lp-sticky #emotional-landing .lp-sticky-cta:not([hidden]){display:block;position:fixed;z-index:100;left:16px;right:16px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 32px);min-height:46px;border:0;border-radius:12px;background:#6d28d9;color:#fff;font:700 16px Pretendard,sans-serif;box-shadow:0 4px 18px #0f172a33;cursor:pointer}
/* button 46px + 10px gap below + 12px air above. The page ends with #emotional-footer (outside the landing), so the
   room goes after the footer's last line; anchor/focus scrolling also stops above the button. */
html.lp-sticky:has(#emotional-landing:not([hidden])){scroll-padding-bottom:calc(68px + env(safe-area-inset-bottom))}
html.lp-sticky:has(#emotional-landing:not([hidden])) #emotional-footer::after{content:'';display:block;height:calc(68px + env(safe-area-inset-bottom))}
@supports not selector(:has(a)){.lp-sticky #emotional-landing:not([hidden]){padding-bottom:calc(68px + env(safe-area-inset-bottom))}}
@media(max-width:359px){#emotional-landing .lp-hero-cover{display:none}}