/* Kara Katz: the motion layer. Subtle, purposeful moves, all transform and opacity only.
   Everything here runs only when html has .motion (JavaScript on, reduced motion off). */

/* ---------- hero entrance: the page arrives like work coming out of the hoop ---------- */
.motion .hero2.intro .creds-line,.motion .hero2.intro .l1,.motion .hero2.intro .lede,.motion .hero2.intro .ctas,.motion .hero2.intro .avail-wrap{opacity:0;transform:translateY(22px);animation:riseIn .9s cubic-bezier(.2,.8,.2,1) forwards}
.motion .hero2.intro .creds-line{animation-delay:.05s}
.motion .hero2.intro .l1{animation-delay:.12s}
.motion .hero2.intro .lede{animation-delay:1.1s}
.motion .hero2.intro .ctas{animation-delay:1.25s}
.motion .hero2.intro .avail-wrap{animation-delay:1.4s}
.motion .hero2.intro .avail li{opacity:0;animation:tagDrop .7s cubic-bezier(.3,1.5,.5,1) forwards}
.motion .hero2.intro .avail li:nth-child(1){animation-delay:1.55s}.motion .hero2.intro .avail li:nth-child(2){animation-delay:1.65s}.motion .hero2.intro .avail li:nth-child(3){animation-delay:1.75s}
.motion .hero2.intro .stage .hoopf{animation:hoopIn 1.4s .1s cubic-bezier(.2,.9,.25,1) both}
.motion .hero2.intro .stage .tag-k{opacity:0;animation:tagSwing 1.1s 1.3s cubic-bezier(.3,1.4,.5,1) forwards;transform-origin:50% -20px}
@keyframes riseIn{to{opacity:1;transform:none}}
@keyframes tagDrop{from{opacity:0;transform:translateY(-16px) rotate(-6deg)}to{opacity:1}}
@keyframes hoopIn{from{opacity:0;transform:rotate(-24deg) scale(.86)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
@keyframes tagSwing{0%{opacity:0;transform:rotate(-30deg)}60%{opacity:1;transform:rotate(8deg)}100%{opacity:1;transform:rotate(0)}}

/* hero hoop leans toward the cursor (set by JS as --rx/--ry) */
.hero2 .stage{perspective:1100px}
.hero2 .stage .tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}

/* ---------- hoop doors roll in, one after another ---------- */
.motion .hoops4 .hdoor .hoopf{opacity:0;transform:translateX(-40px) rotate(-120deg)}
.motion .hoops4.in .hdoor .hoopf{opacity:1;transform:none;transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.9,.25,1);transition-delay:calc(var(--i,0) * 140ms)}
.motion .hoops4.in .hdoor:hover .hoopf,.motion .hoops4.in .hdoor:focus-visible .hoopf{transform:rotate(-8deg) translateY(-6px);transition-delay:0s}
.hdoor .cloth svg{transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.hdoor:hover .cloth svg{transform:scale(1.08) rotate(8deg)}

/* ---------- the portrait switch: each chapter swaps the photo in the hoop with a circular stitch ---------- */
.switcher .cloth .sw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(0% at 50% 50%);transition:clip-path 1s cubic-bezier(.65,0,.25,1)}
.switcher .cloth .sw-img.is-on{clip-path:circle(75% at 50% 50%);z-index:1}
.switcher .cloth .sw-img.was-on{clip-path:circle(75% at 50% 50%);z-index:0}
.switcher .sw-ring{position:absolute;inset:7%;width:86%;height:86%;transform:rotate(-90deg);pointer-events:none;z-index:2}
.switcher .sw-ring circle{fill:none;stroke:var(--pink);stroke-width:1.2;stroke-dasharray:3 2.2;opacity:0}
.motion .switcher.switching .sw-ring circle{animation:ringSew 1s cubic-bezier(.65,0,.25,1)}
@keyframes ringSew{0%{opacity:1;stroke-dashoffset:300;clip-path:none}100%{opacity:0;stroke-dashoffset:0}}
.chapters li{transition:opacity .5s ease}
.motion .path.live .chapters li{opacity:.38}
.motion .path.live .chapters li.is-current{opacity:1}
.chapters li.is-current .knot{background:var(--thread)}
.chapters li.is-current .knot::after{background:#fff}
.path .held .chap-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.path .held .chap-dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--thread);transition:background .3s,transform .3s}
.path .held .chap-dots i.on{background:var(--thread);transform:scale(1.25)}

/* ---------- the sampler folds up into view, then the beliefs are highlighted in step with the scroll ---------- */
.motion .sampler{transform:perspective(1400px) rotateX(8deg) translateY(30px);opacity:.4;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1s ease,box-shadow .8s ease}
.motion .sampler.in{transform:none;opacity:1}
.motion .sampler.scrub li{opacity:min(1,calc(.3 + var(--f,0) * 2.2));transition:opacity .2s linear}
.motion .sampler.scrub li::before{display:inline-block;transform:translateY(-2px) scale(calc(.25 + var(--f,0) * .75)) rotate(calc((1 - var(--f,0)) * -180deg));opacity:min(1,calc(.35 + var(--f,0) * 2))}
.motion .sampler.scrub .hlt{background:linear-gradient(transparent 58%,rgba(240,139,184,.48) 58%,rgba(240,139,184,.48) 90%,transparent 90%) no-repeat 0 0/calc(var(--f,0) * 100%) 100%;padding:0 2px}
.motion .sampler.scrub li.hl-on em{text-shadow:0 0 18px rgba(214,51,125,.35)}
.motion .sampler.scrub li.hl-done::before{color:var(--magenta)}

/* ---------- the floss box: grows as you scroll, and each skein turns over to show its label ---------- */
.motion .fscene.pin .fs-stage{position:sticky;z-index:1}
.motion .fscene .fs-run{pointer-events:none}
.motion .flossbox{transform-origin:50% 40%;will-change:transform;transition:box-shadow .8s ease,border-color .8s ease}
.motion .flossbox.flip .skein{height:auto;padding:0;background:none;box-shadow:none;perspective:800px}
.motion .flossbox.flip .skein:hover{transform:none}
.motion .flossbox.flip .sk-in{position:relative;display:block;transform-style:preserve-3d;transform:translateY(calc(var(--z,0) * -10px)) rotateX(calc(var(--k,0) * 180deg)) scale(calc(1 + var(--z,0) * .1))}
.motion .flossbox.flip .sk-f,.motion .flossbox.flip .sk-b{display:flex;align-items:center;justify-content:center;height:58px;padding:0 64px;border-radius:30px;background:radial-gradient(120% 70% at 50% 15%,rgba(255,255,255,.35),transparent 55%),repeating-linear-gradient(118deg,var(--c1) 0 4px,var(--c2) 4px 7px);box-shadow:0 14px 24px -14px rgba(0,0,0,.8),inset 0 -6px 10px rgba(0,0,0,.22);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.motion .flossbox.flip .sk-f{position:absolute;inset:0;padding:0}
.motion .flossbox.flip .sk-f i{font:700 14px/1 var(--body);font-style:normal;color:var(--magenta);background:#fffaf2;padding:9px 11px;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.motion .flossbox.flip .sk-b{transform:rotateX(180deg)}
.motion .flossbox.flip .sk-in{background:none;padding:0;box-shadow:none;border-radius:0}
.motion .flossbox.flip .sk-in::before,.motion .flossbox.flip .sk-f::before,.motion .flossbox.flip .sk-b::before{content:none}
.fs-bar{display:none}
.motion .fs-bar{display:flex;align-items:center;gap:14px;max-width:420px;margin:26px auto 0}
.motion .fs-bar span{flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--thread) 0 10px,transparent 10px 16px);transform-origin:0 50%;transform:scaleX(0)}
.motion .fs-bar b{font:700 13px/1 var(--body);letter-spacing:.08em;color:rgba(251,247,242,.7);min-width:4.5em;text-align:right}
@media (max-width:560px){.motion .flossbox.flip .sk-f,.motion .flossbox.flip .sk-b{height:50px;padding:0 34px}.motion .flossbox.flip .sk-f{padding:0}}

/* ---------- numbered hoops spin in ---------- */
.motion .start3 .st .hoopf{transform:rotate(-200deg) scale(.7);opacity:0}
.motion .start3 .st.in .hoopf{transform:none;opacity:1;transition:transform 1.3s cubic-bezier(.2,.9,.25,1),opacity .6s ease}
.motion .start3 .st.in .cloth b{animation:numIn .8s .5s cubic-bezier(.3,1.5,.5,1) both}
/* and a band of light sweeps across each one in turn as you scroll */
.start3 .cloth .sheen,.start3 .cloth .glint{display:none}
.motion .start3 .cloth .sheen{display:block;position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.0) 42%,rgba(255,250,235,.85) 50%,rgba(255,255,255,0) 58%,transparent 62%);transform:translateX(calc(-80% + var(--s,0) * 160%));opacity:var(--g,0);pointer-events:none;z-index:2}
.motion .start3 .cloth .glint{display:block;position:absolute;right:24%;top:20%;width:22px;height:22px;background:radial-gradient(circle,#fff 0 18%,transparent 19%),linear-gradient(0deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(90deg,transparent 46%,#fff 46% 54%,transparent 54%);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);transform:scale(calc(var(--g,0) * 1.2)) rotate(calc(var(--s,0) * 90deg));pointer-events:none;z-index:3}
.motion .start3 .cloth b{position:relative;z-index:1;text-shadow:0 0 calc(var(--g,0) * 26px) rgba(240,139,184,calc(var(--g,0) * .9))}
.motion .start3 .st .hoopf{filter:brightness(calc(1 + var(--g,0) * .12))}
.motion .start3 .st.shone .cloth b{color:var(--magenta)}
@keyframes numIn{from{opacity:0;transform:translateY(20px) scale(.6)}to{opacity:1;transform:none}}

/* ---------- pinned papers drop onto the board ---------- */
.motion .pinned .paper{opacity:0;translate:0 -50px}
.motion .pinned .paper.in{opacity:1;translate:0 0;transition:opacity .5s ease,translate .9s cubic-bezier(.3,1.4,.5,1)}
.motion .pinned .paper:nth-child(2).in{transition-delay:.15s}
.motion .pinned .paper .pin{transform:translateX(-50%) scale(0)}
.motion .pinned .paper.in .pin{transform:translateX(-50%) scale(1);transition:transform .5s .6s cubic-bezier(.3,1.8,.5,1)}
.motion .pinned .paper.in:nth-child(2) .pin{transition-delay:.75s}
.pinned .paper.rv{transform:none}

/* ---------- photo bands drift as you scroll ---------- */
[data-parallax]{overflow:hidden}
[data-parallax] img{will-change:transform}

/* ---------- final hoop: a slow breathing tilt ---------- */
.motion .bighoop>.hoopf{animation:none;transform:rotate(var(--hr,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- inner pages ---------- */
.motion .p-hero .media.hoop-media .hoopf{animation:hoopIn2 1.3s .15s cubic-bezier(.2,.9,.25,1) both}
@keyframes hoopIn2{from{opacity:0;transform:rotate(-30deg) scale(.85)}to{opacity:1;transform:rotate(3deg) scale(1)}}
.motion .p-hero .crumb,.motion .p-hero .kicker,.motion .p-hero .h1,.motion .p-hero .lede,.motion .p-hero .ctas{opacity:0;transform:translateY(18px);animation:riseIn .8s cubic-bezier(.2,.8,.2,1) forwards}
.motion .p-hero .kicker{animation-delay:.08s}.motion .p-hero .h1{animation-delay:.16s}.motion .p-hero .lede{animation-delay:.3s}.motion .p-hero .ctas{animation-delay:.42s}
/* first-visit polaroids flip down onto the linen */
.motion .route figure{transform-origin:50% 0;opacity:0;transform:perspective(900px) rotateX(-70deg)}
.motion .route li.in figure{opacity:1;transform:perspective(900px) rotateX(0);transition:transform 1s cubic-bezier(.2,1.2,.3,1),opacity .4s ease}
/* the six couples questions stack like cards as you scroll (desktop) */
@media (min-width:900px){
  .patches.stack{display:block;max-width:620px}
  .patches.stack li{position:sticky;top:calc(130px + var(--i,0) * 18px);margin-bottom:26px;padding:34px 30px 30px;font-size:24px;min-height:150px;rotate:none!important;box-shadow:0 -14px 30px -18px rgba(27,35,48,.35),0 18px 30px -22px rgba(27,35,48,.6)}
  .patches.stack li:nth-child(odd){background:#fffaf2}.patches.stack li:nth-child(even){background:#fbeff2}
}
/* group card lifts */
.motion .group-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.motion .group-card:hover{transform:translateY(-4px)}
@media (min-width:900px){
  .patches.stack li{padding-left:84px}
  .patches.stack li::before{top:30px;left:28px}
}

/* ---------- the thread lights each card as the needle passes it (desktop only; there is no thread on phones) ---------- */
.motion .tlit{transition:filter .5s ease,box-shadow .5s ease}
.motion .hdoor .hoopf,.motion .path .held .hoopf,.motion .bighoop>.hoopf,.motion .chapters li{transition-property:transform,opacity,filter;transition-duration:1.2s,.6s,1.2s}
.motion .hdoor .hoopf.tlit,.motion .path .held .hoopf.tlit,.motion .start3 .st .hoopf.tlit,.motion .bighoop>.hoopf.tlit{filter:drop-shadow(0 0 22px rgba(214,51,125,.5)) brightness(1.05)}
.motion .chapters li.tlit .knot{box-shadow:0 0 0 6px rgba(214,51,125,.18),0 0 22px rgba(214,51,125,.7)}
.motion .chapters li .knot{transition:box-shadow .8s ease}
.motion .sampler.tlit{box-shadow:0 50px 90px -40px rgba(27,35,48,.7),0 0 0 2px rgba(214,51,125,.35),0 0 70px -12px rgba(214,51,125,.45)}
.motion .flossbox.tlit{border-color:rgba(240,139,184,.45);box-shadow:0 0 80px -20px rgba(214,51,125,.55),inset 0 0 40px -20px rgba(240,139,184,.3)}
.motion .pinned .paper.tlit{box-shadow:0 0 0 2px rgba(214,51,125,.3),0 30px 60px -30px rgba(27,35,48,.55),0 0 50px -14px rgba(214,51,125,.5)}