/* Homepage-only story sections. The collection and product design stay independent. */
.story-home { --chapter-yellow: #f8e6a9; --chapter-blue: #cfeced; --chapter-pink: #f4d1c3; }
.story-home .hero { position: relative; }
.story-home .hero-art { isolation: isolate; }
.story-home .art-disc { overflow: hidden; background: #d6eef0 url('../assets/character-scenes/flow-sky.jpg') center 20% / cover; }
.story-home .art-disc::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#d7f3f086,#d7f3f022 60%,#e4edd47a); }
.story-home .art-disc::after { width: 110px; height: 55px; right: 9%; top: 9%; border: 0; background: #fffdf6b0; border-radius: 70% 45% 60% 35%; }
.story-home .hero-book { animation: book-bob 6s ease-in-out infinite; }
.story-home .hero-flow { animation: friend-bob 5.5s ease-in-out infinite; }
.story-home .hello-label { animation: note-sway 6s ease-in-out infinite; }
.story-home .art-spark { animation: story-spark 8s ease-in-out infinite; }
.story-home .hero-facts a { color: var(--coral); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.story-cloud { position: absolute; background: #fffdf6e6; width: 88px; height: 30px; border-radius: 60px; z-index: -1; animation: cloud-wander 10s ease-in-out infinite alternate; }
.story-cloud::before { content: ''; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: inherit; top: -20px; left: 15px; }
.cloud-a { top: 22%; left: 12%; }
.cloud-b { top: 43%; right: -2%; width: 65px; animation-delay: -4s; }
.story-home .story-band { background: #eaf3e9; position: relative; overflow: hidden; }
.story-home .story-band::before { content: ''; position: absolute; width: 430px; height: 430px; right: -190px; top: -190px; border: 1px solid #bfd8ba; border-radius: 50%; box-shadow: 0 0 0 45px #bfd8ba22,0 0 0 90px #bfd8ba15; }
.story-home .story-layout { position: relative; }
.story-home .story-layout h2 { font-size: clamp(35px,3.8vw,52px); }
.story-home .story-art { height: 505px; }
.story-home .reading-flow { animation: friend-bob 7s ease-in-out infinite; }
.journey-invitation { display: flex; align-items: center; gap: 15px; margin-top: 27px; }
.invitation-icon { display: grid; place-items: center; width: 47px; height: 47px; flex: none; border-radius: 50%; background: var(--ink); color: white; font-size: 23px; }
.journey-invitation strong { display: block; font-size: 14px; }
.journey-invitation small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.discovery-journey { position: relative; padding-block: 85px 70px; overflow: hidden; background: var(--paper); }
.journey-heading { text-align: center; position: relative; z-index: 1; }
.journey-heading .eyebrow { color: var(--coral); }
.journey-heading h2 { font-size: clamp(37px,4.7vw,65px); }
.journey-heading h2 span { color: var(--coral); }
.journey-heading>p:last-child { font-size: 15px; line-height: 1.8; margin-top: 22px; }
.journey-heading-spark { display: block; color: var(--sun); font-size: 49px; line-height: 1; margin-bottom: 20px; }
.journey-chapters { position: relative; margin-top: 64px; }
.journey-trail { position: absolute; top: 190px; bottom: 190px; left: calc(50% - 43px); width: 86px; border-left: 2px dashed #c5cfc2; border-right: 2px dashed #c5cfc2; border-radius: 100%; opacity: .6; transform: rotate(-5deg); }
.journey-trail span { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: repeating-linear-gradient(to bottom,#b7c9b4 0 9px,transparent 9px 23px); }
.journey-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(65px,10vw,150px); align-items: center; position: relative; margin-bottom: 75px; }
.journey-chapter:last-child { margin-bottom: 0; }
.chapter-stage { position: relative; height: 445px; isolation: isolate; background: var(--chapter-yellow); border-radius: 46% 48% 28px 28px; }
.chapter-stage::before { content: ''; position: absolute; inset: 12px; border: 1px solid #fffdf6b0; border-radius: inherit; z-index: -1; }
.chapter-stage>img { width: 86%; height: 88%; object-fit: contain; position: absolute; bottom: 10px; left: 7%; animation: friend-bob 6s ease-in-out infinite; transform-origin: center bottom; }
.chapter-orbit { position: absolute; width: 220px; height: 220px; border: 1px dashed #a8875c50; border-radius: 50%; top: 14%; left: 17%; z-index: -1; animation: orbit-turn 50s linear infinite; }
.chapter-orbit::after { content: ''; width: 11px; height: 11px; background: var(--coral); border-radius: 50%; position: absolute; top: 22px; right: 20px; }
.character-caption { position: absolute; z-index: 3; bottom: -15px; left: 22px; padding: 9px 18px; border: 1px solid var(--ink); border-radius: 999px; font-size: 11px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.chapter-spark { position: absolute; color: var(--coral); font-size: 43px; z-index: 2; animation: story-spark 7s ease-in-out infinite; }
.spark-left { top: 20%; left: -17px; }
.spark-right { bottom: 14%; right: -10px; color: #386c70; font-size: 58px; }
.chapter-cloud { position: absolute; top: 18%; left: 13%; width: 110px; height: 38px; background: #fffdf68c; border-radius: 60% 60% 30% 45%; animation: cloud-wander 8s ease-in-out infinite alternate; }
.chapter-sticker { position: absolute; z-index: 3; right: -22px; top: 18%; border-radius: 50%; background: var(--coral); color: var(--paper); display: grid; place-content: center; width: 99px; height: 99px; font-size: 14px; font-family: var(--display); line-height: 1.3; text-align: center; transform: rotate(11deg); box-shadow: 0 0 0 5px var(--paper); animation: note-sway 6s ease-in-out infinite; }
.chapter-copy { position: relative; padding-block: 20px; }
.chapter-number { font-family: var(--display); font-size: 73px; color: #d8dfd3; line-height: 1; display: block; margin-bottom: 17px; letter-spacing: -.05em; }
.chapter-copy .eyebrow { font-size: 10px; color: #7f744d; margin-bottom: 14px; }
.chapter-copy h3 { font-size: clamp(32px,3.5vw,48px); letter-spacing: -.045em; line-height: 1.08; margin-bottom: 23px; }
.chapter-copy>p:not(.eyebrow) { font-size: 15px; line-height: 1.8; margin-top: 13px; }
.try-together { display: flex; gap: 14px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.try-together>span { font-size: 24px; line-height: 1.3; color: var(--coral); min-width: 31px; }
.try-together strong { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.try-together p { font-size: 13px; margin-top: 4px; color: var(--ink); }
.chapter-flow .chapter-stage { grid-column: 2; grid-row: 1; background: var(--chapter-blue); border-radius: 44% 48% 44% 25px; }
.chapter-flow .chapter-copy { grid-column: 1; grid-row: 1; }
.chapter-flow .chapter-stage>img { height: 89%; animation-delay: -1.8s; }
.chapter-flow .chapter-copy .eyebrow { color: #4d8585; }
.word-cloud { position: absolute; z-index: 2; background: var(--paper); padding: 7px 13px; border-radius: 12px 12px 12px 2px; font-size: 13px; box-shadow: 0 4px 14px #163e4710; animation: book-bob 7s ease-in-out infinite; }
.word-one { left: -7px; top: 23%; transform: rotate(-9deg); }
.word-two { right: -8px; top: 12%; transform: rotate(8deg); animation-delay: -2s; }
.word-three { right: -12px; bottom: 30%; transform: rotate(-5deg); animation-delay: -4s; }
.chapter-roo .chapter-stage { background: var(--chapter-pink); border-radius: 47% 47% 25px 47%; }
.chapter-roo .chapter-stage>img { animation-delay: -3.1s; }
.chapter-roo .chapter-sticker { background: var(--ink); top: 12%; }
.chapter-roo .chapter-copy .eyebrow { color: #ac6854; }
.little-crossing { position: absolute; left: 16%; right: 14%; height: 70px; bottom: 15px; background: repeating-linear-gradient(90deg,#fffdf6 0 17px,transparent 17px 36px); transform: perspective(200px) rotateX(43deg) rotate(-8deg); opacity: .7; }
.journey-ending { position: relative; display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 70px; padding-top: 40px; border-top: 1px solid var(--line); }
.journey-ending>span { font-size: 44px; color: var(--coral); }
.journey-ending p { font-size: 16px; line-height: 1.5; }
.journey-ending strong { color: var(--ink); }
.journey-ending .button { margin-left: 35px; }
.story-home .friends-section { padding-top: 65px; padding-bottom: 75px; }
.story-home .friends-grid { grid-template-columns: repeat(4,1fr); gap: 26px 18px; }
.story-home .friend-card { position: relative; text-align: left; background: #eef4eb; border-radius: 17px; padding-bottom: 20px; transition: transform .25s,box-shadow .25s; }
.story-home .friend-card:hover { transform: translateY(-5px); box-shadow: 0 13px 25px #163e4710; }
.story-home .friend-art { height: 245px; border-radius: 17px 17px 0 0; isolation: isolate; background: var(--friend-color); }
.story-home .friend-art::before { content: ''; position: absolute; inset: 0; background: var(--friend-scene) center 20% / cover; z-index: -1; opacity: .85; }
.story-home .friend-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%,#eef4eb); z-index: -1; }
.story-home .friend-art img { padding: 15px 12px 5px; animation: friend-bob 6s ease-in-out infinite; animation-delay: var(--friend-delay,0s); }
.story-home .friend-card h3 { font-size: 25px; margin: 4px 20px 0; }
.story-home .friend-card p { font-size: 12px; margin: 4px 20px 0; display: block; }
.friend-open { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 40px); margin: 14px 20px 0; background: none; border-top: 1px solid #cedacf; padding: 12px 0 0; font-size: 11px; font-weight: 700; text-align: left; }
.friend-open span { font-size: 20px; font-weight: 400; }
.friend-open::after { content: ''; position: absolute; inset: 0; border-radius: 17px; }
.friend-open:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 4px; }
.story-home .reading-band { overflow: hidden; background: #173f48; padding-block: 65px; }
.story-home .reading-layout { gap: 7%; grid-template-columns: 1fr 1fr; }
.cosy-scene { position: relative; min-height: 440px; border-radius: 46% 46% 18px 18px; isolation: isolate; background: #8fc8cd url('../assets/character-scenes/flow-sky.jpg') center / cover; }
.cosy-scene::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#102e4677,#1e5c6a11 65%); z-index: -1; }
.cosy-scene>img { position: absolute; height: 92%; width: 94%; bottom: 0; left: 3%; object-fit: contain; animation: friend-bob 8s ease-in-out infinite; }
.cosy-moon { position: absolute; top: 30px; right: 50px; height: 54px; width: 54px; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 15px #f9cd6818,0 0 0 30px #f9cd680a; }
.cosy-note { position: absolute; left: -13px; bottom: 20px; z-index: 2; padding: 14px 19px; font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--ink); background: var(--sun); border-radius: 5px; transform: rotate(-5deg); }
.motion-control { background: none; font-size: inherit; padding: 7px 10px; }
.motion-control[aria-pressed=true] { background: var(--aqua); }
.friend-dialog { padding: 0; border: 0; border-radius: 25px; background: var(--paper); color: var(--ink); width: min(810px,calc(100% - 28px)); max-height: 90dvh; }
.friend-dialog::backdrop { background: #102d36bb; backdrop-filter: blur(5px); }
.friend-dialog-close { position: absolute; top: 13px; right: 13px; z-index: 3; }
.friend-profile { display: grid; grid-template-columns: 1fr 1fr; }
.friend-profile-art { height: 430px; background: var(--profile-scene) center / cover; position: relative; }
.friend-profile-art img { height: 100%; width: 100%; object-fit: contain; padding: 22px 10px; }
.friend-profile-copy { padding: 50px 32px 30px; align-self: center; }
.friend-profile-copy h2 { font-size: 55px; }
.friend-profile-copy>p:not(.eyebrow) { font-size: 14px; margin-top: 16px; }
.friend-profile-copy .try-together { margin-top: 22px; }
.friend-profile-copy .text-link { margin-top: 22px; }
.story-home [data-story-reveal] { opacity: 1; transform: none; }
.story-home .reveal-ready:not(.has-appeared) { opacity: 0; transform: translateY(24px); }
.story-home .reveal-ready { transition: opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1); }
.story-home [data-story-motion]:not(.motion-in-view) *, .story-home.motion-paused *, .story-home.motion-paused *::before, .story-home.motion-paused *::after { animation-play-state: paused !important; }
@keyframes friend-bob { 0%,100% { translate: 0 0; rotate: -.3deg; } 50% { translate: 0 -8px; rotate: .5deg; } }
@keyframes book-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes note-sway { 0%,100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes cloud-wander { from { translate: -9px 0; } to { translate: 13px -4px; } }
@keyframes story-spark { 0%,100% { scale: .9; rotate: -6deg; } 50% { scale: 1.06; rotate: 9deg; } }
@keyframes orbit-turn { to { rotate: 360deg; } }
@media(max-width:1100px) {
  .journey-chapter { gap: 8%; }
  .chapter-stage { height: 400px; }
  .chapter-sticker { width: 82px; height: 82px; right: -10px; font-size: 12px; }
  .chapter-number { font-size: 60px; }
  .chapter-copy h3 { font-size: 36px; }
  .chapter-copy>p:not(.eyebrow) { font-size: 14px; }
  .story-home .friend-art { height: 210px; }
  .story-home .friend-card h3 { font-size: 23px; }
  .cosy-scene { min-height: 395px; }
}
@media(max-width:760px) {
  .story-home .hero { padding-top: 10px; padding-bottom: 15px; }
  .story-home .hero-art { height: 240px; }
  .story-home .hero .lead { margin-block: 14px 17px; }
  .story-home .hero .actions { gap: 10px; }
  .story-home .hero-facts { margin-top: 13px; }
  .story-home .cloud-b { right: 5%; }
  .story-home .story-layout h2 { font-size: 38px; }
  .story-home .story-art { height: 355px; }
  .story-home .story-layout { gap: 40px; }
  .story-home .story-layout .body-large { max-width: 530px; }
  .journey-invitation { margin-top: 22px; }
  .journey-invitation strong { font-size: 13px; }
  .journey-invitation small { font-size: 11px; }
  .discovery-journey { padding-block: 50px; }
  .journey-heading h2 { font-size: clamp(33px,7.7vw,48px); }
  .journey-heading>p:last-child { font-size: 13px; margin-top: 18px; }
  .journey-heading>p:last-child br { display: none; }
  .journey-heading-spark { font-size: 38px; margin-bottom: 16px; }
  .journey-chapters { margin-top: 42px; }
  .journey-chapter { grid-template-columns: 1fr; gap: 25px; margin-bottom: 58px; }
  .chapter-stage { height: 355px; width: min(420px,calc(100% - 16px)); margin-inline: auto; }
  .chapter-flow .chapter-stage, .chapter-flow .chapter-copy { grid-column: auto; grid-row: auto; }
  .chapter-copy { padding: 12px 0 0 26px; border-left: 2px dashed #d0dbcb; margin-left: 8px; }
  .chapter-number { font-size: 43px; margin-bottom: 12px; }
  .chapter-copy .eyebrow { font-size: 9px; }
  .chapter-copy h3 { font-size: 33px; margin-bottom: 17px; }
  .chapter-copy>p:not(.eyebrow) { font-size: 14px; }
  .character-caption { font-size: 10px; left: 16px; padding: 7px 13px; bottom: -11px; }
  .chapter-sticker { width: 79px; height: 79px; font-size: 12px; right: -9px; top: 12%; }
  .chapter-orbit { width: 175px; height: 175px; }
  .chapter-spark { font-size: 32px; left: -8px; }
  .spark-right { left: auto; right: 0; font-size: 45px; }
  .word-cloud { font-size: 11px; padding: 7px 11px; }
  .word-one { left: -8px; }
  .word-two { right: -5px; }
  .word-three { right: 0; }
  .journey-trail { display: none; }
  .try-together { margin-top: 20px; padding-top: 15px; }
  .try-together p { font-size: 12px; }
  .journey-ending { flex-wrap: wrap; gap: 18px; margin-top: 35px; padding-top: 30px; }
  .journey-ending p { font-size: 15px; }
  .journey-ending .button { margin: 0; font-size: 12px; }
  .story-home .friends-section { padding-block: 45px 50px; }
  .story-home .friends-grid { grid-template-columns: repeat(2,1fr); gap: 18px 13px; }
  .story-home .friend-art { height: 205px; }
  .story-home .friend-art img { padding: 13px 3px 4px; }
  .story-home .friend-card { padding-bottom: 14px; }
  .story-home .friend-card h3 { font-size: 23px; margin-inline: 13px; }
  .story-home .friend-card p { margin-inline: 13px; font-size: 10px; }
  .friend-open { width: calc(100% - 26px); margin: 10px 13px 0; font-size: 10px; padding-top: 8px; }
  .friend-open span { font-size: 16px; }
  .story-home .reading-band { padding-block: 45px; }
  .story-home .reading-layout { grid-template-columns: 1fr; gap: 35px; }
  .cosy-scene { min-height: 355px; max-width: 440px; width: 100%; margin-inline: auto; }
  .cosy-note { left: 4px; font-size: 11px; padding: 11px 15px; }
  .cosy-moon { height: 44px; width: 44px; top: 25px; right: 40px; }
  .story-home .comparison { font-size: 9px; }
  .story-home .comparison>* { padding: 7px 8px; }
  .friend-profile { grid-template-columns: 1fr; }
  .friend-profile-art { height: 300px; }
  .friend-profile-copy { padding: 25px; }
  .friend-profile-copy h2 { font-size: 40px; }
  .friend-profile-copy .eyebrow { margin-bottom: 10px; }
  .friend-profile-copy>p:not(.eyebrow) { font-size: 13px; }
}
@media(max-width:380px) {
  .story-home .hero-art { height: 235px; }
  .story-home .hero-facts { column-gap: 8px; }
  .story-home .friend-art { height: 175px; }
  .chapter-stage { height: 310px; }
  .chapter-copy { padding-left: 19px; }
  .chapter-copy h3 { font-size: 30px; }
  .story-home .comparison>* { padding: 7px 6px; }
}
@media(prefers-reduced-motion:reduce) {
  .story-home *, .story-home *::before, .story-home *::after { animation: none !important; transition: none !important; }
  .story-home .reveal-ready { opacity: 1; transform: none; }
}