/* =========================================================
   Alberto Panzera - Liquid Glass theme
   1. Token      2. Base        3. Sfondo vivo
   4. Vetro      5. Hero        6. Call to action
   7. Storia     8. Footer      9. Animazioni / responsive
   ========================================================= */

/* ---------- 1. Token ---------- */
:root{
  --ap-bg:#000;
  --ap-bg-soft:#050505;
  --ap-ink:#fcfcfc;
  --ap-ink-dim:rgba(252,252,252,.62);
  --ap-red:#b02b2c;
  --ap-green:#83a846;
  --ap-white:#fcfcfc;
  --ap-dark:#000;

  --glass-bg:rgba(255,255,255,.055);
  --glass-bg-strong:rgba(255,255,255,.085);
  --glass-border:rgba(255,255,255,.14);
  --glass-blur:22px;
  --glass-shadow:0 24px 60px -24px rgba(0,0,0,.9);

  --radius:20px;
  --radius-lg:28px;
  --shell:min(560px,calc(100vw - 36px));
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ap-body{
  margin:0;
  background:#000;
  color:var(--ap-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ap-white);outline-offset:3px;border-radius:12px}
.ap-skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:#fff;color:#000;z-index:99}
.ap-skip:focus{left:12px;top:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- 3. Sfondo vivo ---------- */
.ap-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#000}
/* riflessi morbidi, senza colore */
.ap-blob{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen;will-change:transform}
.ap-blob--red{width:66vmin;height:66vmin;left:-18vmin;top:2vmin;opacity:.24;background:radial-gradient(circle at 40% 38%,rgba(255,255,255,.6),rgba(255,255,255,0) 66%);animation:ap-drift-a 26s var(--ease) infinite alternate}
.ap-blob--green{width:58vmin;height:58vmin;right:-20vmin;top:34vmin;opacity:.16;background:radial-gradient(circle at 60% 42%,rgba(214,220,232,.5),rgba(214,220,232,0) 66%);animation:ap-drift-b 30s var(--ease) infinite alternate}
.ap-blob--white{width:52vmin;height:52vmin;left:18vmin;bottom:-18vmin;opacity:.14;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.45),rgba(255,255,255,0) 68%);animation:ap-drift-c 34s var(--ease) infinite alternate}
/* lama di luce che scivola sulla superficie lucida */
.ap-gloss{position:absolute;inset:-40% -70%;filter:blur(60px);opacity:.55;background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.05) 44%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.05) 56%,transparent 70%);animation:ap-sweep 20s ease-in-out infinite}
.ap-grain{position:absolute;inset:-50%;opacity:.11;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");animation:ap-grain 7s steps(6) infinite}
.ap-vignette{display:none}
.ap-spot{position:absolute;width:50vmin;height:50vmin;border-radius:50%;left:0;top:0;transform:translate3d(var(--px,50vw),var(--py,40vh),0) translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.08),transparent 64%);transition:opacity .6s var(--ease);opacity:0}
body.ap-pointer .ap-spot{opacity:1}

/* ---------- 4. Vetro liquido ---------- */
.ap-glass{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -18px 30px -26px rgba(255,255,255,.4);
  backdrop-filter:blur(var(--glass-blur)) saturate(175%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(175%);
  isolation:isolate;
  overflow:hidden;
}
/* riflesso speculare che insegue il puntatore */
.ap-glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 60%);
  opacity:0;transition:opacity .35s var(--ease);
}
.ap-glass:hover::before,.ap-glass:focus-visible::before{opacity:1}
/* bordo bagnato */
.ap-glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
  background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 32%,transparent 68%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:.55;
}
.ap-glass--strong{background:var(--glass-bg-strong);--glass-blur:30px}

/* ---------- 5. Hero ---------- */
.ap-shell{position:relative;z-index:1;max-width:100%;width:var(--shell);margin:0 auto;padding:clamp(48px,12vh,110px) 0 72px}
.ap-hero{text-align:center}
.ap-avatar{position:relative;width:clamp(132px,38vw,168px);margin:0 auto 26px;aspect-ratio:1;animation:ap-float 7s ease-in-out infinite}
.ap-avatar__ring{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.9),rgba(150,155,165,.35),rgba(255,255,255,.75),rgba(120,125,135,.3),rgba(255,255,255,.9));filter:blur(9px);opacity:.62;animation:ap-spin 12s linear infinite}
.ap-avatar__halo{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 2px 12px rgba(255,255,255,.28)}
.ap-avatar img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s var(--ease),transform .6s var(--ease)}
.ap-avatar:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.03)}

.ap-hand{position:absolute;right:calc(100% - 42px);bottom:4%;font-size:clamp(44px,12vw,58px);line-height:1;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.7));animation:ap-hand-show 4s var(--ease) 1s forwards}
.ap-hand__inner{display:inline-block;transform-origin:30% 90%;animation:ap-hand-wave 1.1s ease-in-out 1.35s 2 both}
@keyframes ap-hand-show{
  0%{opacity:0;transform:translate(16px,16px) scale(.4)}
  12%{opacity:1;transform:translate(0,0) scale(1)}
  76%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(-10px,12px) scale(.72)}
}
@keyframes ap-hand-wave{
  0%,100%{transform:rotate(0deg)}
  14%{transform:rotate(-18deg)}
  30%{transform:rotate(16deg)}
  46%{transform:rotate(-14deg)}
  62%{transform:rotate(12deg)}
  80%{transform:rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){.ap-hand{display:none}}

.ap-name{margin:0;font-size:clamp(26px,7.2vw,40px);line-height:1.08;font-weight:800;letter-spacing:.038em;text-transform:uppercase;overflow-wrap:break-word}
.ap-name .ap-char{display:inline-block;opacity:0;transform:translateY(22px) rotateX(45deg);animation:ap-char .7s var(--ease) forwards;animation-delay:calc(var(--i) * 34ms)}
.ap-name .ap-char--space{width:.34em}
.ap-role{margin:14px 0 0;font-size:15px;color:var(--ap-ink-dim);letter-spacing:.02em}
.ap-role strong{color:var(--ap-white);font-weight:700}
.ap-badge{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:9px 16px;border-radius:999px;font-size:13.5px;letter-spacing:.01em}
.ap-badge svg{width:14px;height:14px;flex:none;fill:currentColor;opacity:.9}

/* ---------- 6. Call to action ---------- */
.ap-actions{display:flex;flex-direction:column;gap:14px;margin-top:38px}
.ap-cta{
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:19px 24px;border-radius:var(--radius);text-align:center;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  overflow:hidden;isolation:isolate;
  transform:translate3d(var(--tx,0),var(--ty,0),0);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.ap-cta__label{font-weight:700;font-size:clamp(14px,3.6vw,16px);letter-spacing:.02em;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;text-align:center}
.ap-cta__label svg{width:17px;height:17px;fill:currentColor;flex:none}
.ap-cta__logo{width:auto;max-width:min(72%,240px);object-fit:contain;display:block;transition:transform .5s var(--ease)}
.ap-cta:hover .ap-cta__logo{transform:scale(1.04)}
.ap-cta--red .ap-cta__logo{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.ap-cta--white .ap-cta__logo{filter:drop-shadow(0 1px 6px rgba(0,0,0,.18))}
.ap-cta:has(.ap-cta__logo){padding-top:17px;padding-bottom:17px;gap:7px}
.ap-cta__desc{font-size:clamp(11.5px,3vw,12.5px);opacity:.82;font-weight:400;letter-spacing:.01em}
.ap-cta:hover{box-shadow:0 32px 60px -24px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.4);border-color:rgba(255,255,255,.3)}
.ap-cta:active{transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.985)}
/* lucido che attraversa il pulsante */
.ap-cta__shine{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);transform:translateX(-120%);}
.ap-cta:hover .ap-cta__shine{animation:ap-shine .9s var(--ease)}
/* alone che segue il dito */
.ap-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 62%);opacity:0;transition:opacity .35s var(--ease)}
.ap-cta:hover::before{opacity:1}
.ap-cta>*{position:relative;z-index:2}

.ap-cta--red{background:linear-gradient(160deg,rgba(176,43,44,.94),rgba(133,26,27,.9));color:#fff}
.ap-cta--white{background:linear-gradient(160deg,rgba(252,252,252,.95),rgba(228,228,228,.88));color:#101010;border-color:rgba(255,255,255,.65)}
.ap-cta--white .ap-cta__desc{opacity:.68}
.ap-cta--green{background:linear-gradient(160deg,rgba(131,168,70,.95),rgba(99,131,49,.9));color:#fff}
.ap-cta--dark{background:linear-gradient(160deg,rgba(10,10,10,.85),rgba(0,0,0,.75));color:#fff}
.ap-cta--outline{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.55)}

.ap-social{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ap-social .ap-cta{padding:16px 18px}
.ap-social .ap-cta__label{font-size:clamp(13.5px,3.4vw,14.5px);letter-spacing:.01em}
.ap-cta--outline{padding:16px 18px}
.ap-cta--outline .ap-cta__label{font-weight:600;letter-spacing:.005em}

/* ---------- 7. Storia ---------- */
.ap-story{margin-top:34px;border-radius:var(--radius-lg)}
.ap-story summary{list-style:none;cursor:pointer}
.ap-story summary::-webkit-details-marker{display:none}
.ap-story__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;text-align:left}
.ap-story__title{font-size:17px;font-weight:600;letter-spacing:.01em}
.ap-story__sub{display:block;font-size:12.5px;color:var(--ap-ink-dim);margin-top:3px;font-weight:400}
.ap-story__plus{position:relative;width:34px;height:34px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.35);transition:transform .5s var(--ease),background .5s var(--ease)}
.ap-story__plus::before,.ap-story__plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.ap-story__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ap-story[open] .ap-story__plus{transform:rotate(135deg);background:rgba(255,255,255,.12)}
.ap-story__body{padding:0 24px 26px;font-size:15.5px;color:rgba(252,252,252,.86)}
.ap-story__body p{margin:0 0 16px}
.ap-story__body p:last-child{margin-bottom:0}
.ap-story__body strong{color:#fff}
.ap-story__body em{font-style:normal;color:var(--ap-red);font-weight:700}
.ap-story__rule{height:1px;margin:0 24px 22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}

/* ---------- Linea del tempo ---------- */
.ap-tl{position:relative;list-style:none;margin:0;padding:6px 0 2px 34px}
.ap-tl::before{content:"";position:absolute;left:11px;top:12px;bottom:16px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 10%,rgba(255,255,255,.22) 88%,transparent);transform:scaleY(1);transform-origin:50% 0}
.ap-story--js .ap-tl::before{transform:scaleY(0);transition:transform 1.1s var(--ease) .08s}
.ap-story--open .ap-tl::before{transform:scaleY(1)}
.ap-tl__item{position:relative;padding:0 0 26px}
.ap-tl__item:last-child{padding-bottom:2px}
.ap-story--js .ap-tl__item{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--s,0ms)}
.ap-story--open .ap-tl__item{opacity:1;transform:none}
.ap-tl__dot{position:absolute;left:-28px;top:5px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.07),0 0 16px rgba(255,255,255,.45)}
.ap-tl__item:last-child .ap-tl__dot{background:var(--ap-red);box-shadow:0 0 0 4px rgba(176,43,44,.2),0 0 18px rgba(176,43,44,.8)}
.ap-tl__year{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,252,252,.5)}
.ap-tl__title{margin:6px 0 0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:.005em}
.ap-tl__text{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:rgba(252,252,252,.66)}
@media (min-width:720px){.ap-tl__title{font-size:18px}.ap-tl__text{font-size:15px}}
@media (prefers-reduced-motion:reduce){
  .ap-story--js .ap-tl__item{opacity:1;transform:none}
  .ap-story--js .ap-tl::before{transform:scaleY(1)}
}

/* ---------- 8. Footer ---------- */
.ap-footer{position:relative;z-index:1;padding:40px 0 46px;text-align:center;font-size:12.5px;color:rgba(252,252,252,.42);letter-spacing:.02em}
.ap-footer a:hover{color:#fff}
.ap-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,var(--ap-red),var(--ap-green),#fff);z-index:50}

/* ---------- 9. Animazioni ---------- */
@keyframes ap-drift-a{to{transform:translate3d(16vmin,12vmin,0) scale(1.18)}}
@keyframes ap-drift-b{to{transform:translate3d(-14vmin,-10vmin,0) scale(1.12)}}
@keyframes ap-drift-c{to{transform:translate3d(10vmin,-14vmin,0) scale(1.22)}}
@keyframes ap-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}
@keyframes ap-spin{to{transform:rotate(360deg)}}
@keyframes ap-sweep{0%,100%{transform:translateX(-18%)}50%{transform:translateX(18%)}}
@keyframes ap-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ap-char{to{opacity:1;transform:none}}
@keyframes ap-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

.ap-reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.ap-reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (min-width:720px){
  :root{--shell:min(640px,calc(100vw - 64px))}
  .ap-cta__label{font-size:17px}
  .ap-story__body{font-size:16px}
}
@media (max-width:400px){
  .ap-social{grid-template-columns:1fr}
}

/* ---------- Fallback senza backdrop-filter ---------- */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .ap-glass,.ap-cta{background-color:rgba(22,22,22,.92)}
  .ap-cta--white{background-color:#fcfcfc}
}

/* ---------- Meno movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ap-name .ap-char{opacity:1;transform:none}
  .ap-reveal{opacity:1;transform:none}
}

/* ---------- Barra admin ---------- */
body.admin-bar .ap-progress{top:32px}
@media (max-width:782px){body.admin-bar .ap-progress{top:46px}}