/* ABOUT PHOTO STACK - works with 1 to 8 photos; the 3 on top are visible, the others wait behind */
#aboutImg{translate:none!important}
.astack{--mx:0;--my:0;position:relative;width:100%;max-width:440px;margin:0 auto 46px;aspect-ratio:3/4;perspective:1100px;cursor:pointer;-webkit-tap-highlight-color:transparent;translate:0 calc(var(--sy,0)*1px);outline:none}
.astack.solo{cursor:default}
.astk{position:absolute;inset:0;transform:rotateY(calc(var(--mx)*9deg)) rotateX(calc(var(--my)*-9deg))}

.acard{position:absolute;inset:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s}
.acard[data-p="0"]{--x:0%;--y:0%;--r:0deg;--s:1;--d:16;z-index:4}
.acard[data-p="1"]{--x:11%;--y:-3%;--r:7deg;--s:.95;--d:30;z-index:3}
.acard[data-p="2"]{--x:-11%;--y:3%;--r:-8deg;--s:.9;--d:46;z-index:2}
.acard:not([data-p="0"]):not([data-p="1"]):not([data-p="2"]){--x:0%;--y:0%;--r:0deg;--s:.85;--d:0;z-index:1;opacity:0;pointer-events:none}
.astack .acard.toss{--x:62%;--y:-6%;--r:14deg;--s:.97}
.astack:not(.in) .acard{--x:0%;--y:0%;--r:0deg;--s:.9;opacity:0}
.astack:not(.ready) .acard[data-p="1"]{transition-delay:.18s}
.astack:not(.ready) .acard[data-p="2"]{transition-delay:.36s}

.ain{position:absolute;inset:0;border-radius:22px;overflow:hidden;translate:calc(var(--mx)*var(--d)*1px) calc(var(--my)*var(--d)*.7px);box-shadow:0 24px 60px rgba(0,0,0,.4);border:1px solid var(--line);transition:filter .7s}
.acard[data-p="1"] .ain{filter:brightness(.8) saturate(.9)}
.acard[data-p="2"] .ain{filter:brightness(.62) saturate(.85)}
.ain img{width:100%;height:100%;object-fit:cover;border-radius:0;border:0;aspect-ratio:auto;display:block}
.aglare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.3),transparent 55%);mix-blend-mode:overlay;opacity:0;transition:opacity .4s}
.astack:hover .acard[data-p="0"] .aglare{opacity:1}

.aframe{position:absolute;inset:-5% -6% -4% -6%;border:1px solid color-mix(in srgb,var(--glow) 38%,transparent);border-radius:30px;rotate:-3deg;translate:calc(var(--mx)*-12px) calc(var(--my)*-10px);pointer-events:none;transition:opacity 1.2s .6s}

.abadge{position:absolute;inset-inline-end:-9%;top:-6%;width:112px;height:112px;z-index:6;display:grid;place-items:center;border-radius:50%;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line);translate:calc(var(--mx)*-20px) calc(var(--my)*-16px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.abadge svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--text);font-size:9.5px;letter-spacing:.06em;font-family:'Inter',sans-serif;font-weight:600}
.abadge b{color:var(--glow);font-size:1.5rem;text-shadow:0 0 14px var(--glow)}

.achip{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:50px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.25);translate:calc(var(--mx)*-18px) calc(var(--my)*-14px);animation:afloat 7s ease-in-out infinite}
.achip b{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--glow);line-height:1}
.achip span{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.achip.c1{inset-inline-start:-8%;bottom:14%}
.achip.c2{inset-inline-end:-6%;bottom:34%;animation-delay:-3s}
.achip.c2 span:first-child{text-transform:none;font-size:.9rem}
@keyframes afloat{50%{transform:translateY(-10px)}}

.ahint{position:absolute;left:0;right:0;bottom:-40px;display:flex;justify-content:center;align-items:center;gap:14px;font-size:.78rem;color:var(--muted)}
.astack.solo .ahint{display:none}
.adots{display:flex;gap:7px}
.adots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:var(--line);cursor:pointer;transition:.4s}
.adots button.on{width:24px;background:var(--glow)}

.abadge,.achip,.ahint{transition:opacity 1s .9s}
.astack:not(.in) .abadge,.astack:not(.in) .achip,.astack:not(.in) .ahint,.astack:not(.in) .aframe{opacity:0}

@media(max-width:860px){
  .astack{max-width:340px}
  .abadge{width:92px;height:92px;inset-inline-end:-4%}
  .achip.c1{inset-inline-start:-3%}
  .achip.c2{inset-inline-end:-3%}
}