.photo-intro>.example-fan{isolation:isolate;justify-self:center;width:100%;max-width:520px;height:330px;margin:0;position:relative}.example-fan:before{content:"";z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--text) 9%,transparent),transparent);filter:blur(18px);pointer-events:none;border-radius:50%;position:absolute;inset:18% 12% 10%}.example-fan-card{--fan-rest:translateX(-50%);--fan-spread:var(--fan-rest);--fan-active:var(--fan-rest);border-radius:var(--radius-xl);background:var(--surface);width:138px;height:184px;transform:var(--fan-rest);transform-origin:50% 90%;transition:transform .26s var(--ease-out),opacity .2s var(--ease-out);animation:fan-arrive .42s var(--ease-out) var(--fan-delay,0s) backwards;-webkit-tap-highlight-color:transparent;border:1px solid #ffffff38;padding:0;display:block;position:absolute;top:34px;left:50%;overflow:hidden;box-shadow:0 18px 36px -12px #00000040,0 2px 6px #0000001a}.example-fan-card>img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.example-fan-card:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px #ffffff59,inset 0 0 0 1px #ffffff14}.example-fan-card[data-centre]{width:172px;height:230px;top:10px;box-shadow:0 28px 50px -16px #00000059,0 3px 10px #00000024}.fan-position-0{--fan-delay:.12s;--fan-rest:translateX(calc(-50% - 168px)) translateY(34px) rotate(-14deg) scale(.9);--fan-spread:translateX(calc(-50% - 186px)) translateY(32px) rotate(-14deg) scale(.9);--fan-active:translateX(calc(-50% - 186px)) translateY(18px) rotate(-9deg) scale(.95);z-index:1}.fan-position-1{--fan-delay:60ms;--fan-rest:translateX(calc(-50% - 92px)) translateY(10px) rotate(-7deg);--fan-spread:translateX(calc(-50% - 104px)) translateY(8px) rotate(-7deg);--fan-active:translateX(calc(-50% - 104px)) translateY(-6px) rotate(-4deg) scale(1.04);z-index:2}.fan-position-2{--fan-delay:0s;--fan-rest:translateX(-50%);--fan-spread:translateX(-50%) translateY(-4px);--fan-active:translateX(-50%) translateY(-10px) scale(1.03);z-index:5}.fan-position-3{--fan-delay:60ms;--fan-rest:translateX(calc(-50% + 92px)) translateY(10px) rotate(7deg);--fan-spread:translateX(calc(-50% + 104px)) translateY(8px) rotate(7deg);--fan-active:translateX(calc(-50% + 104px)) translateY(-6px) rotate(4deg) scale(1.04);z-index:2}.fan-position-4{--fan-delay:.12s;--fan-rest:translateX(calc(-50% + 168px)) translateY(34px) rotate(14deg) scale(.9);--fan-spread:translateX(calc(-50% + 186px)) translateY(32px) rotate(14deg) scale(.9);--fan-active:translateX(calc(-50% + 186px)) translateY(18px) rotate(9deg) scale(.95);z-index:1}.fan-prompt{z-index:7;border:1px solid var(--glass-line,#ffffff2e);background:var(--glass-pill,color-mix(in srgb,var(--surface) 72%,transparent));-webkit-backdrop-filter:blur(18px)saturate(1.4);backdrop-filter:blur(18px)saturate(1.4);max-width:calc(100% - 32px);box-shadow:0 10px 28px -10px #00000047,inset 0 1px 0 var(--glass-edge,#ffffff24);color:var(--text);white-space:nowrap;pointer-events:none;animation:fan-prompt-in .42s var(--ease-out) .2s backwards;border-radius:999px;align-items:center;gap:7px;padding:8px 14px 8px 11px;font-size:13px;line-height:1.2;display:inline-flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.fan-prompt>.icon{color:var(--muted);flex:none}.fan-prompt>span{text-overflow:ellipsis;animation:fan-prompt-swap .22s var(--ease-out);overflow:hidden}.example-fan-card:focus-visible{z-index:6;outline:2px solid var(--text);outline-offset:4px}@media (min-width:761px) and (hover:hover) and (pointer:fine){:root:not([data-input=keyboard]):not([data-motion=reduced]) .example-fan:hover .example-fan-card{transform:var(--fan-spread)}:root:not([data-input=keyboard]):not([data-motion=reduced]) .example-fan .example-fan-card:hover{z-index:6;transform:var(--fan-active)}}@media (max-width:1100px) and (min-width:761px){.photo-intro>.example-fan{max-width:420px;height:290px}.example-fan-card{width:116px;height:156px;top:32px}.example-fan-card[data-centre]{width:148px;height:198px;top:10px}.fan-position-0{--fan-rest:translateX(calc(-50% - 136px)) translateY(28px) rotate(-14deg) scale(.9);--fan-spread:var(--fan-rest);--fan-active:translateX(calc(-50% - 136px)) translateY(16px) rotate(-9deg) scale(.95)}.fan-position-1{--fan-rest:translateX(calc(-50% - 76px)) translateY(8px) rotate(-7deg);--fan-spread:var(--fan-rest)}.fan-position-3{--fan-rest:translateX(calc(-50% + 76px)) translateY(8px) rotate(7deg);--fan-spread:var(--fan-rest)}.fan-position-4{--fan-rest:translateX(calc(-50% + 136px)) translateY(28px) rotate(14deg) scale(.9);--fan-spread:var(--fan-rest);--fan-active:translateX(calc(-50% + 136px)) translateY(16px) rotate(9deg) scale(.95)}}@media (max-width:760px){.photo-intro>.example-fan{order:1;justify-self:center;max-width:340px;height:250px}.example-fan:before{display:none}.example-fan-card{border-radius:var(--radius-md);width:96px;height:128px;top:26px;box-shadow:0 10px 24px -8px #00000038}.example-fan-card[data-centre]{border-radius:var(--radius-lg);width:124px;height:166px;top:8px}.fan-position-0{--fan-rest:translateX(calc(-50% - 112px)) translateY(22px) rotate(-14deg) scale(.9)}.fan-position-1{--fan-rest:translateX(calc(-50% - 62px)) translateY(6px) rotate(-7deg)}.fan-position-3{--fan-rest:translateX(calc(-50% + 62px)) translateY(6px) rotate(7deg)}.fan-position-4{--fan-rest:translateX(calc(-50% + 112px)) translateY(22px) rotate(14deg) scale(.9)}.fan-prompt{padding:7px 12px 7px 10px;font-size:12px;bottom:10px}}@media (forced-colors:active){.fan-prompt{border-color:canvastext}}@keyframes fan-arrive{0%{opacity:0;transform:var(--fan-rest) translateY(22px) scale(.94)}to{opacity:1;transform:var(--fan-rest)}}@keyframes fan-prompt-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}}@keyframes fan-prompt-swap{0%{opacity:0}}:root[data-input=keyboard] .example-fan-card{transition:none}:root[data-input=keyboard] .example-fan .example-fan-card:hover{transform:var(--fan-rest)}:root[data-input=keyboard] .example-fan-card,:root[data-motion=reduced] :is(.example-fan-card,.fan-prompt,.fan-prompt>span){animation:none}:root[data-motion=reduced] .example-fan-card{transition:none}:root[data-motion=reduced] .example-fan .example-fan-card:hover{transform:var(--fan-rest)!important}@media (prefers-reduced-motion:reduce){.example-fan-card{transition:none}:is(.example-fan-card,.fan-prompt,.fan-prompt>span){animation:none}.example-fan .example-fan-card:hover{transform:var(--fan-rest)!important}}