/* Phonido: small, blissful touches, page by page. Gentle, transform and opacity only.
   Everything runs only while on screen (.bliss-on). Calm view and reduced motion show finished stills. */

/* section headings: a short butter line draws itself as they arrive */
.bliss-h{position:relative}
.bliss-h::after{content:"";position:absolute;left:0;bottom:-.2em;width:clamp(44px,5vw,64px);height:4px;border-radius:4px;background:var(--butter,#e7c478);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.8,.2,1) .3s;pointer-events:none}
.bliss-h.bliss-c::after{left:50%;margin-left:calc(clamp(44px,5vw,64px)/-2);transform-origin:50% 50%}
.bliss-h.bliss-in::after{transform:scaleX(1)}

/* picture strips on the pages */
.bliss-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:3}
.bliss-breath{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 28%,rgba(255,238,196,.62),rgba(255,238,196,0) 62%);opacity:.12;animation:bliss-breathe 9s ease-in-out infinite alternate;animation-play-state:paused}
.bliss-sun{position:absolute;top:-30%;left:-45%;width:42%;height:160%;background:linear-gradient(100deg,rgba(255,236,190,0),rgba(255,236,190,.30) 50%,rgba(255,236,190,0));transform:rotate(14deg) translateX(0);animation:bliss-sun 30s ease-in-out infinite alternate;animation-play-state:paused}
.bliss-fl{position:absolute;left:var(--x);top:0;width:var(--s,5px);height:var(--s,5px);margin:0;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);opacity:0;animation:bliss-snow var(--d,16s) linear infinite;animation-delay:var(--dl,0s);animation-play-state:paused}
.bliss-bird{position:absolute;left:0;top:0;width:clamp(30px,4vw,52px);opacity:0;will-change:transform,opacity}
.bliss-bird svg{display:block;width:100%;height:auto;overflow:visible}
.bliss-bird .wing{transform-box:fill-box;transform-origin:50% 100%;animation:bliss-flap .9s ease-in-out infinite alternate}
.bliss-on .bliss-breath,.bliss-on .bliss-sun,.bliss-on .bliss-fl{animation-play-state:running}
@keyframes bliss-breathe{to{opacity:.5}}
@keyframes bliss-sun{to{transform:rotate(14deg) translateX(330%)}}
@keyframes bliss-snow{0%{opacity:0;transform:translate3d(0,-8px,0)}10%{opacity:.85}90%{opacity:.7}100%{opacity:0;transform:translate3d(var(--dx,14px),var(--h,300px),0)}}
@keyframes bliss-flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}

/* motifs beside headings */
.bliss-m{display:inline-block;vertical-align:-.12em;width:1.05em;height:1.05em;margin-left:.45em}
.bliss-m svg{display:block;width:100%;height:100%;overflow:visible}
.bliss-m .sp{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);transition:transform 1.8s cubic-bezier(.2,.8,.2,1) .4s}
.bliss-m.bliss-in .sp{transform:scale(1)}
.bliss-m .gl{opacity:.25;animation:bliss-glow 4s ease-in-out infinite alternate;animation-play-state:paused;transform-box:fill-box;transform-origin:50% 50%}
.bliss-on .bliss-m .gl,.bliss-m.bliss-on .gl{animation-play-state:running}
.bliss-m .wn{opacity:.15;transition:opacity 1.2s ease}
.bliss-m.bliss-in .wn{opacity:1}
.bliss-m.bliss-in .wn:nth-of-type(2){transition-delay:.7s}.bliss-m.bliss-in .wn:nth-of-type(3){transition-delay:1.4s}
@keyframes bliss-glow{to{opacity:.95;transform:scale(1.25)}}

/* one-to-one: a lantern that brightens as you scroll; enrol: a paper boat that bobs */
.bliss-anchor{position:relative}
.bliss-lantern,.bliss-boat{position:absolute;right:var(--gut,16px);width:46px;pointer-events:none}
.bliss-lantern svg,.bliss-boat svg{display:block;width:100%;height:auto;overflow:visible}
.bliss-lantern .glow{opacity:var(--lit,.3)}
.bliss-boat{animation:bliss-bob 5.5s ease-in-out infinite alternate;animation-play-state:paused}
.bliss-boat.bliss-on{animation-play-state:running}
@keyframes bliss-bob{from{transform:translateY(-3px) rotate(-2deg)}to{transform:translateY(3px) rotate(2deg)}}
@media (max-width:760px){.bliss-lantern,.bliss-boat{display:none}}

/* the stones light along the path; a star rises at the award */
.stones li{--lit:0}
.bliss-glow{position:absolute;left:-12px;top:-12px;width:80px;height:68px;border-radius:50%;background:radial-gradient(ellipse,rgba(231,196,120,.85),rgba(231,196,120,0) 68%);opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.stones li.bliss-lit .bliss-glow{opacity:1}
.stones li.bliss-lit::before{background:#f6e5bd;border-color:var(--clay,#b9785a)}
.bliss-star{position:absolute;left:14px;top:4px;width:26px;opacity:0;pointer-events:none}
.bliss-star svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(231,196,120,.9))}

/* cards lift softly */
.opt-card,.chooser label{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.opt-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(31,59,58,.12)}
.opt-card:has(input:checked):hover{box-shadow:inset 0 0 0 1px var(--pine),0 12px 26px rgba(31,59,58,.12)}

/* covers and posters float gently; a sparkle on hover */
.bliss-float{animation:bliss-float 7s ease-in-out infinite alternate;animation-play-state:paused}
.bliss-on .bliss-float,.bliss-float.bliss-on{animation-play-state:running}
@keyframes bliss-float{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.look-shelf li:nth-child(2n) .bliss-float,.gallery li:nth-child(2n) .bliss-float{animation-delay:-2.3s}
.look-shelf li:nth-child(3n) .bliss-float,.gallery li:nth-child(3n) .bliss-float{animation-delay:-4.6s}
.gallery li{position:relative}
.gallery li::after{content:"";position:absolute;right:10px;top:10px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23e7c478' d='M20 0c1.2 11 3.5 16.3 20 20-16.5 3.7-18.8 9-20 20-1.2-11-3.5-16.3-20-20C16.5 16.3 18.8 11 20 0z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:scale(.3) rotate(0);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.gallery li:hover::after,.gallery li:focus-within::after{opacity:1;transform:scale(1) rotate(45deg)}

/* meet the sounds: tiles sway very softly until one is tapped */
.ms-picker li{animation:bliss-sway 6s ease-in-out infinite alternate;animation-play-state:paused}
.ms-picker.bliss-on li{animation-play-state:running}
.ms-picker li:nth-child(2n){animation-delay:-1.5s}.ms-picker li:nth-child(3n){animation-delay:-3s}.ms-picker li:nth-child(5n){animation-delay:-4.5s}
.ms-picker.bliss-still li{animation:none}
@keyframes bliss-sway{from{transform:rotate(-1.1deg) translateY(0)}to{transform:rotate(1.1deg) translateY(-2px)}}

/* reading: the sound arc pulses beside the digraph */
.t.wide{position:relative}
.bliss-arc{position:absolute;right:6px;top:4px;width:22px;height:22px;pointer-events:none}
.bliss-arc path{fill:none;stroke:var(--fjord,#4f7486);stroke-width:2.6;stroke-linecap:round;opacity:.2;animation:bliss-arc 2.8s ease-in-out infinite;animation-play-state:paused}
.bliss-arc path:nth-child(2){animation-delay:.35s}.bliss-arc path:nth-child(3){animation-delay:.7s}
.bliss-on .bliss-arc path,.bliss-arc.bliss-on path{animation-play-state:running}
@keyframes bliss-arc{40%{opacity:.95}}

/* home: snow over the painting strip in the enrol band */
.bliss-strip{position:absolute;left:0;right:0;bottom:0;height:clamp(140px,18vw,240px);pointer-events:none;overflow:hidden}
.bliss-num{font-variant-numeric:tabular-nums}
.bliss-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Calm view and reduced motion: finished stills */
html.calm .bliss-h::after{transform:scaleX(1);transition:none}
html.calm .bliss-breath{opacity:.3;animation:none}
html.calm .bliss-sun{display:none}
html.calm .bliss-fl,html.calm .bliss-bird,html.calm .bliss-star{display:none}
html.calm .bliss-m .sp{transform:none;transition:none}
html.calm .bliss-m .gl{animation:none;opacity:.7}
html.calm .bliss-m .wn{opacity:1;transition:none}
html.calm .bliss-boat,html.calm .bliss-float{animation:none}
html.calm .bliss-lantern .glow{opacity:1}
html.calm .bliss-glow{opacity:1;transition:none}
html.calm .stones li::before{background:#f6e5bd}
html.calm .ms-picker li{animation:none}
html.calm .bliss-arc path{animation:none;opacity:.7}
html.calm .gallery li::after{transition:none}
html.calm .opt-card,html.calm .chooser label{transition:none}
@media (prefers-reduced-motion:reduce){
  .bliss-h::after{transform:scaleX(1);transition:none}
  .bliss-breath{opacity:.3;animation:none}.bliss-sun,.bliss-fl,.bliss-bird,.bliss-star{display:none}
  .bliss-m .sp{transform:none;transition:none}.bliss-m .gl{animation:none;opacity:.7}.bliss-m .wn{opacity:1;transition:none}
  .bliss-boat,.bliss-float,.ms-picker li{animation:none}.bliss-lantern .glow{opacity:1}
  .bliss-glow{opacity:1;transition:none}.stones li::before{background:#f6e5bd}.bliss-arc path{animation:none;opacity:.7}
}