/* Studio 02 — compositions keep their own space at every viewport. */
.home-hero{height:auto;min-height:760px;grid-template-columns:.95fr 1.05fr;gap:4vw}
.portal{max-width:680px;min-width:0}
.portal:before{display:none}
.portal-frame{position:relative;margin:16px 12px 0}
.portal-frame:before{content:"";position:absolute;inset:-15px -12px -12px 12px;border:1px solid #c4b97d77;border-radius:48% 48% 0 0;pointer-events:none}
.portal-picture{aspect-ratio:1.4;border-radius:48% 48% 0 0}
.portal-picture>img{animation:none;transform:none;object-fit:contain;object-position:center bottom}
.portal figcaption{padding:32px 12px 0;gap:12px;flex-wrap:wrap;line-height:1.5}
.portal .caption-number{padding-left:12px}
.cover-stage,.book-hero .cover-stage{min-height:0;display:block;width:100%;max-width:590px;margin:auto}
.cover-stage:before{display:none}
.cover-art{position:relative;isolation:isolate;display:grid;place-items:center;padding:48px 36px;min-width:0}
.cover-art:before{content:"";position:absolute;inset:0;background:#e9e3d5;border-radius:50% 50% 0 0;z-index:-1}
.cover-art>img{width:min(78%,280px);height:auto;max-height:440px;object-fit:contain;transform:rotate(-5deg);box-shadow:12px 20px 25px #13202d30}
.cover-art .orbit{inset:32px 25px;transform:rotate(-12deg)}
.stage-note{display:block;text-align:center;padding:26px 12px 0;line-height:1.5}
.interior figure{max-width:1100px;margin:auto}
.interior img{width:100%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:normal}
.friends-grid .friend-portrait{height:245px}
.friend-portrait{display:flex;align-items:flex-end;justify-content:center;padding:20px 15px 8px;min-width:0}
.friend-portrait img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;border-radius:0;transform:scale(var(--friend-scale,.88));transform-origin:center bottom}
[data-friend="Bruno"]{--friend-scale:.88}[data-friend="Lilla"]{--friend-scale:.77}
[data-friend="Luce"]{--friend-scale:.92}[data-friend="Milo"]{--friend-scale:.65}
[data-friend="Nocciola"]{--friend-scale:.78}[data-friend="Pina"]{--friend-scale:.67}
[data-friend="Stella"]{--friend-scale:.76}[data-friend="Timo"]{--friend-scale:.84}
.character-choice{padding:8px 8px 16px;transition:background .2s,border-color .2s,transform .2s}
.character-choice .friend-portrait{height:180px;padding:15px 10px 4px}
.character-choice:has(input:checked){padding:7px 7px 15px}
.character-choice>span{padding-top:14px}
.chosen-friend img,.greeting-character{object-fit:contain;border-radius:0;padding:18px;transform:scale(var(--friend-scale,.88));transform-origin:center bottom}
.gift-portrait{width:100%;max-width:245px;padding:22px 20px 16px;overflow:visible;align-self:center}
.gift-portrait img{width:100%;height:auto;max-height:280px;object-fit:contain;object-position:center bottom}
.entry-art>img{width:100%;object-position:center 62%;animation:none;transform:none;mask-image:none}
.entry-art:after{background:linear-gradient(90deg,#1c2c3ce8 3%,#1c2c3c99 43%,#1c2c3c15 80%),linear-gradient(0deg,#1c2c3c66,transparent 45%)}
/* One shared coordinate system for the three registered illustration planes. */
.wide-story{height:clamp(490px,45vw,900px);text-align:left;display:block;place-items:normal;background:var(--night);isolation:isolate}
.depth-scene,.depth-art,.depth-layer{position:absolute;inset:0}
.depth-scene{overflow:hidden;z-index:-2}
.depth-art{isolation:isolate}
.depth-layer{display:block;pointer-events:none}
.depth-layer img{width:100%;height:100%;object-fit:cover;object-position:right bottom;max-width:none}
.depth-back{transform:translate(var(--depth-back-x,0px),var(--depth-back-y,0px)) scale(1.16);transform-origin:center center;transition:transform .24s ease-out}
.depth-front{transform:translate(var(--depth-front-x,0px),var(--depth-front-y,0px)) scale(1.12);transform-origin:center bottom;transition:transform .24s ease-out}
.wide-story:after{background:linear-gradient(180deg,#13202d66 0%,#13202d22 42%,transparent 62%);pointer-events:none}
.story-copy{position:relative;width:100%;padding:clamp(42px,6vw,105px) 6vw 0;max-width:1100px;z-index:1}
.story-copy h2{font-size:clamp(39px,4.4vw,70px)}
/* Light points have an autonomous inner motion and a mouse-only outer offset. */
.fireflies{contain:layout paint;z-index:2;opacity:1}
.fireflies>span{position:absolute;width:5px;height:5px;transform:translate(var(--drift-x,0px),var(--drift-y,0px));transition:transform .65s ease-out}
.fireflies>span>i{position:absolute;inset:0;width:var(--spark-size,4px);height:var(--spark-size,4px);border-radius:50%;background:#fff2bf;box-shadow:var(--spark-glow,0 0 7px 2px #f9e3a880);animation:lantern-drift var(--spark-time,8s) ease-in-out infinite;animation-delay:var(--spark-delay,0s);opacity:.15}
.fireflies>span>i:nth-child(n){left:0;top:0}
@keyframes lantern-drift{0%,100%{opacity:var(--spark-low,.15);transform:translate(-4px,9px)}30%{opacity:var(--spark-high,.9)}60%{opacity:var(--spark-mid,.6);transform:translate(10px,-15px)}80%{opacity:var(--spark-rest,.22)}}
@media(min-width:681px){.fireflies{--spark-low:.32;--spark-high:1;--spark-mid:.85;--spark-rest:.5;--spark-glow:0 0 8px 2px #ffe6a6aa}}
@keyframes arrive{from{opacity:.15;transform:translateY(18px)}to{opacity:1;transform:none}}
html:not(.motion-paused) .hero-copy,html:not(.motion-paused) .reader-heading{animation:arrive .8s ease-out both}
html:not(.motion-paused) .portal-frame{animation:arrive 1s .12s ease-out both}
.scene-offscreen .fireflies i,.page-idle .fireflies i{animation-play-state:paused!important}
.motion-paused .fireflies{display:none}
.motion-paused .depth-back,.motion-paused .depth-front{transform:none}
.motion-paused .hero-copy,.motion-paused .reader-heading,.motion-paused .portal-frame{animation:none!important;opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){.character-choice:hover{transform:translateY(-3px);background:var(--ivory)}.text-link:hover span{transform:translate(4px,-3px)}}
@media(max-width:1100px){.home-hero{grid-template-columns:1fr;min-height:0;padding-top:135px;gap:44px}.hero-copy{text-align:center;max-width:680px;margin:auto}.hero-copy .intro{margin-left:auto;margin-right:auto}.desktop-break{display:none}.portal{justify-self:center;max-width:620px;width:90%}.hero-copy h1{font-size:clamp(48px,6.5vw,70px)}}
@media(max-width:680px){
 .home-hero{padding:108px 24px 85px;gap:28px}.hero-copy h1{font-size:clamp(36px,10.4vw,60px)}
 .portal{width:100%;max-width:440px}.portal-picture{aspect-ratio:1.4}.portal-frame{margin:12px 9px 0}.portal-frame:before{inset:-10px -8px -9px 10px}.portal figcaption{padding:27px 4px 0;font-size:12px}
 .cover-stage,.book-hero .cover-stage{max-width:380px}.cover-art{padding:36px 30px}.cover-art>img{width:78%;max-height:none}.cover-art .orbit{inset:25px 20px}.stage-note{padding-top:24px}
 .interior figure{margin:0}.interior img{height:auto}.interior figcaption{margin:20px 12px 0}
 .friends-grid .friend-portrait{height:200px;padding:16px 8px 4px}.friends-grid{gap:26px 14px}.friends-grid figcaption{margin-top:12px}
 .character-choice .friend-portrait{height:165px;padding:12px 6px 4px}
 .gift-entry{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px 18px;padding:32px 22px}
 .gift-entry>div:last-child{display:contents}.gift-portrait{position:static;grid-column:2;grid-row:1/3;width:100%;max-width:100%;padding:10px 8px;align-self:center}
 .gift-portrait img{height:auto;max-height:none}.gift-entry>div:last-child>.eyebrow{grid-column:1;grid-row:1;min-height:0;padding:0;max-width:none;font-size:8px;align-self:end}
 .gift-entry h2{grid-column:1;grid-row:2;min-height:0;padding:0;margin:0;font-size:32px;overflow-wrap:normal}
 .gift-entry p:not(.eyebrow),.gift-entry .button{grid-column:1/-1;margin-top:8px}.gift-entry .button{margin-top:12px}
 .entry-art>img{object-position:73% center}.entry-art:after{background:linear-gradient(90deg,#1c2c3ce8,#1c2c3c80 65%,#1c2c3c22),linear-gradient(0deg,#1c2c3c66,transparent 45%)}
 .wide-story{height:clamp(400px,120vw,560px)}.story-copy{padding:35px 24px 0;max-width:none}.story-copy h2{font-size:clamp(30px,8.6vw,43px)}.wide-story .eyebrow{font-size:8px;margin-bottom:18px}
 .fireflies>span:nth-child(n+15){display:none}
}
@media(max-width:360px){.gift-entry{grid-template-columns:minmax(0,1fr) 80px;gap:12px}.gift-entry h2{font-size:29px}.friends-grid .friend-portrait{height:172px}.character-choice .friend-portrait{height:145px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-opt-in) .depth-back,html:not(.motion-opt-in) .depth-front{transform:none}html:not(.motion-opt-in) .hero-copy,html:not(.motion-opt-in) .portal-frame,html:not(.motion-opt-in) .reader-heading{animation:none;opacity:1;transform:none}}

/* Studio 04: the arc keeps the approved frame and a complete flat fallback.
   Four registered planes load only when fine mouse motion is enabled. */
.arc-depth{position:absolute;inset:0;display:none;pointer-events:none;z-index:1}
.arc-active .arc-depth{display:block}
.portal-picture.arc-active>img{opacity:0}
.arc-layer{position:absolute;inset:0;pointer-events:none;transition:transform .3s ease-out}
.arc-layer img{width:100%;height:100%;object-fit:contain;max-width:none}
.arc-back{transform:translate(var(--arc-back-x,0px),var(--arc-back-y,0px)) scale(1.10);transform-origin:center}
.arc-far{transform:translate(var(--arc-far-x,0px),var(--arc-far-y,0px)) scale(1.06);transform-origin:center}
.arc-front{transform:translate(var(--arc-front-x,0px),var(--arc-front-y,0px)) scale(1.10);transform-origin:center bottom}
.motion-paused .arc-depth{display:none}.motion-paused .portal-picture>img{opacity:1}
@media(prefers-reduced-motion:reduce){html:not(.motion-opt-in) .arc-depth{display:none}html:not(.motion-opt-in) .portal-picture>img{opacity:1}}