@property --k{syntax:"<number>";inherits:true;initial-value:1}@property --br{syntax:"<number>";inherits:true;initial-value:0}.ph{container-type:inline-size}.ph-num{font:inherit;letter-spacing:inherit}.ph .ph-badge{z-index:5;width:clamp(56px,17cqw,104px);font-size:clamp(1.15rem,5.6cqw,2rem);top:0;right:0}.ph-ring-scene{perspective:1000px;perspective-origin:50% 30%;position:absolute;inset:0}.ph-ring{transform-style:preserve-3d;transform:rotateX(calc(-15deg - var(--sp,0) * 20deg - var(--my,0) * 6deg)) rotateZ(calc(-6deg + var(--mx,0) * 4deg)) rotateY(calc(var(--a,0deg) * -1));position:absolute;top:47%;left:50%}.ph-ring__card{--r:37cqw;--cw:calc(6.2832 * var(--r) / var(--n) * .9);--ch:33cqw;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch);transform-style:preserve-3d;transform:rotateY(calc(360deg / var(--n) * var(--i))) translateZ(var(--r));position:absolute}.ph-ring__face,.ph-ring__back{backface-visibility:hidden;background:var(--night-2);border-radius:12px;position:absolute;inset:0;overflow:hidden}.ph-ring__face{box-shadow:inset 0 0 0 1px #ffffff59,0 18px 30px -18px #0e124099}.ph-ring__back{transform:rotateY(180deg)}.ph-ring__back:after{content:"";background:linear-gradient(#0e124080,#5b21d659);position:absolute;inset:0}.ph-ring__face img,.ph-ring__back img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.ph-ring__floor{filter:blur(4px);background:radial-gradient(closest-side,#1e187852,#0000);border-radius:50%;height:16%;position:absolute;bottom:9%;left:14%;right:14%}.ph--anneau .ph-ring-scene{animation:ph-rise 1.4s var(--ease) both .15s}@keyframes ph-rise{0%{opacity:0;transform:translateY(8%)scale(.9)}}.ph-fan{transform:rotate(var(--a,0deg));animation:5.5s ease-in-out 2s infinite alternate ph-breathe;position:absolute;inset:0}@keyframes ph-breathe{to{--br:1}}.ph-fan__card{--r:calc(32cqw + var(--br) * 3cqw);width:15cqw;height:21cqw;transform:rotate(calc(360deg / var(--n) * var(--i) * var(--k))) translateY(calc(var(--r) * var(--k) * -1)) rotate(calc(var(--tw) * (1 - var(--k))));animation:1.6s cubic-bezier(.3,1.45,.55,1) both ph-burst;animation-delay:calc(.45s + var(--i) * 55ms);margin:-10.5cqw 0 0 -7.5cqw;position:absolute;top:50%;left:50%}@keyframes ph-burst{0%{--k:0}to{--k:1}}.ph-fan__card>span{width:100%;height:100%;transition:transform .45s var(--ease),box-shadow .45s;background:#f3f0ff;border-radius:11px;padding:3px;display:block;box-shadow:0 14px 28px -14px #0e12408c}.ph-fan__card img{-o-object-fit:cover;object-fit:cover;border-radius:8px;width:100%;height:100%}.ph-fan__card:hover>span{transform:translateY(-10%)scale(1.14);box-shadow:0 22px 40px -16px #5b21d6b3}.ph-fan__core{aspect-ratio:1;z-index:2;width:36cqw;box-shadow:0 0 0 8px #ece9ff99,0 0 0 9px #ffffffbf,var(--shadow);animation:ph-pop 1.1s var(--ease) both .1s;border-radius:50%;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ph-fan__core img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;animation:24s ease-in-out infinite alternate ph-kb}@keyframes ph-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}}@keyframes ph-kb{0%{transform:scale(1.06)}to{transform:scale(1.16)translate(-1.5%,-1%)}}.ph-words{position:absolute;inset:0}.ph-words svg{width:100%;height:100%;transform:translate(calc(var(--mx,0) * 4px),calc(var(--my,0) * 4px));opacity:calc(1 - var(--sp,0) * .5);position:absolute;inset:0;overflow:visible}.ph-words text{font-family:var(--display);letter-spacing:.02em;font-weight:600}.ph-words__ring{transform:rotate(calc(var(--a,0deg) * var(--k)));animation:ph-fade 1.1s var(--ease) both}.ph-words__ring--2{animation-delay:.15s}.ph-words__ring--2 text{fill:var(--ink);opacity:.62}.ph-words__ring--3{animation-delay:.3s}.ph-words__ring--3 text{fill:none;stroke:var(--violet);stroke-width:.7px;opacity:.85}.ph-words__ring--4{animation-delay:.45s}.ph-words__ring--4 text{fill:var(--ink-2);opacity:.5}.ph-words__img{aspect-ratio:1;width:42%;transform:translate(calc(-50% - var(--mx,0) * 4px),calc(-50% - var(--my,0) * 4px));box-shadow:0 0 0 7px #ece9ff99,0 0 0 8px #ffffffbf,var(--shadow);animation:ph-pop 1.2s var(--ease) both .2s;border-radius:50%;position:absolute;top:50%;left:50%;overflow:hidden}.ph-words__img img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;animation:24s ease-in-out infinite alternate ph-kb}@keyframes ph-fade{0%{opacity:0}}.ph-melt{background:var(--night-2);box-shadow:0 0 0 8px #ece9ff8c,0 0 0 9px #ffffffb3,var(--shadow);animation:ph-rise 1.3s var(--ease) both .1s;border-radius:999px 999px 34px 34px;position:absolute;inset:3% 8% 12%;overflow:hidden}.ph-melt img,.ph-melt canvas{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.ph-melt canvas{opacity:0;transition:opacity .6s}.ph-melt.is-gl canvas{opacity:1}.ph-caption{box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;font:500 .72rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:#ece9ffbf;border-radius:999px;align-items:center;gap:10px;padding:8px 16px;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.ph-caption:before{content:"";background:var(--violet);width:8px;height:8px;box-shadow:0 0 10px var(--violet);border-radius:50%}.ph-caption__txt{animation:ph-fade .6s var(--ease) both}html.no-motion .ph *,html.no-motion .ph :before,html.no-motion .ph :after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.ph *,.ph :before,.ph :after{transition:none!important;animation:none!important}}
