/* ============================================================
   wow.css — effetti aggiunti al sito originale (novembre 2026)
   Non cambia struttura né testi: solo la scena del lago nella
   prima schermata, icone disegnate e animazioni curate.
   ============================================================ */

/* ---------- Scena "Specchio del lago" nella prima schermata ---------- */
.bigHero.hasScene{background:#f4f1ec}
.heroScene{position:absolute;top:0;left:0;right:0;height:max(calc(100svh - 76px),560px);z-index:0;overflow:hidden}
.heroScene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bigHero.hasScene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,253,249,.9) 0%,rgba(255,253,249,.78) 40%,rgba(255,253,249,.25) 62%,rgba(255,253,249,0) 78%)}
.bigHero.hasScene .bigHeroInner{z-index:2}

.hsLayer{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hsCloud{animation:hsDrift 60s ease-in-out infinite alternate}
.hsCloud.c2{animation-duration:80s;animation-direction:alternate-reverse}
.hsSun{animation:hsBreath 9s ease-in-out infinite alternate}
.hsGlint{animation:hsGlint 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes hsDrift{from{transform:translateX(-60px)}to{transform:translateX(90px)}}
@keyframes hsBreath{from{opacity:.75}to{opacity:1}}
@keyframes hsGlint{from{opacity:.35;transform:scaleX(.85)}to{opacity:.8;transform:scaleX(1.1)}}

/* entrata: le montagne salgono dal lago, il riflesso compare, la linea dell'acqua si disegna */
@media (prefers-reduced-motion:no-preference){
  .heroScene .hsL1>use,.heroScene .hsL2>use,.heroScene .hsL3>use{animation:hsRise 1.6s cubic-bezier(.2,.75,.2,1) both}
  .heroScene .hsL2>use{animation-delay:.18s}
  .heroScene .hsL3>use{animation-delay:.36s}
  .heroScene .hsReflection{animation:hsFadeIn 2.2s .6s ease both}
  .heroScene .hsHorizon{transform-box:fill-box;transform-origin:center;animation:hsLine 1.4s .2s cubic-bezier(.2,.7,.2,1) both}
  .bigHero.hasScene .bigHeroInner>*{animation:hsText .9s cubic-bezier(.2,.7,.2,1) both}
  .bigHero.hasScene .bigHeroInner>*:nth-child(2){animation-delay:.12s}
  .bigHero.hasScene .bigHeroInner>*:nth-child(3){animation-delay:.22s}
  .bigHero.hasScene .bigHeroInner>*:nth-child(4){animation-delay:.32s}
  .bigHero.hasScene .bigHeroInner>*:nth-child(5){animation-delay:.42s}
  .bigHero.hasScene .bigHeroInner>*:nth-child(6){animation-delay:.52s}
}
@keyframes hsRise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
@keyframes hsFadeIn{from{opacity:0}to{opacity:.75}}
@keyframes hsLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hsText{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* il logo nella prima schermata: un lieve respiro della luce attorno (il logo resta identico) */
@media (prefers-reduced-motion:no-preference){
  .bigHero.hasScene .bigHeroLogo{animation:hsText .9s cubic-bezier(.2,.7,.2,1) both, hsHalo 5s 1.2s ease-in-out infinite alternate}
}
@keyframes hsHalo{from{box-shadow:0 14px 38px rgba(0,0,0,.18),0 0 0 7px rgba(217,178,95,.10)}to{box-shadow:0 14px 38px rgba(0,0,0,.18),0 0 0 12px rgba(217,178,95,.28)}}

/* ---------- Icone disegnate al posto delle emoji ---------- */
.iconRound.ico{display:grid;place-items:center;color:#a07a2a}
.iconRound.ico svg{width:28px;height:28px}

/* ---------- Schede: sollevamento e bordo oro al passaggio ---------- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pillar,.givingCard,.howStep,.actionCard{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
  .pillar:hover,.givingCard:hover,.howStep:hover,.actionCard:hover{transform:translateY(-6px);border-color:rgba(217,178,95,.75);box-shadow:0 22px 48px rgba(7,63,43,.12)}
  .pillar:hover .iconRound.ico{animation:icoPop .5s ease}
}
@keyframes icoPop{40%{transform:scale(1.15) rotate(-6deg)}100%{transform:none}}

/* ---------- Entrate a cascata delle schede ---------- */
@media (prefers-reduced-motion:no-preference){
  .pillarGrid>[data-reveal]:nth-child(2),.givingGrid>[data-reveal]:nth-child(2),.howSteps>[data-reveal]:nth-child(2),.actionCards>[data-reveal]:nth-child(2){transition-delay:.1s}
  .pillarGrid>[data-reveal]:nth-child(3),.givingGrid>[data-reveal]:nth-child(3),.howSteps>[data-reveal]:nth-child(3),.actionCards>[data-reveal]:nth-child(3){transition-delay:.2s}
  .pillarGrid>[data-reveal]:nth-child(4){transition-delay:.3s}
}

/* ---------- Fascia "promessa": luce che passa lentamente ---------- */
.promiseBand{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .promiseBand::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-45%;pointer-events:none;
    background:linear-gradient(100deg,rgba(255,255,255,0),rgba(217,178,95,.10),rgba(255,255,255,0));animation:sheen 9s ease-in-out infinite}
}
@keyframes sheen{0%{left:-45%}60%,100%{left:110%}}

/* ---------- Avviso "IBAN copiato" ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:1200;background:#073f2b;color:#fff;
  padding:14px 20px;border-radius:14px;font:600 15px/1.4 Inter,sans-serif;max-width:min(420px,calc(100vw - 32px));box-shadow:0 12px 32px rgba(0,0,0,.25);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{color:#d9b25f}


/* computer: scena più vicina, montagne e paese grandi a destra del testo */
@media (min-width:821px){
  .heroScene svg{width:128%;left:-4%}
  .bigHero.hasScene::before{background:linear-gradient(100deg,rgba(255,253,249,.92) 0%,rgba(255,253,249,.8) 36%,rgba(255,253,249,.3) 54%,rgba(255,253,249,0) 66%)}
}

/* telefono: la scena diventa una cartolina in alto, il logo si appoggia sul lago */
@media (max-width:820px){
  .heroScene{height:300px}
  .heroScene svg{width:200%;left:-62%}
  .bigHero.hasScene{align-items:flex-start}
  .bigHero.hasScene::before{background:linear-gradient(180deg,rgba(255,253,249,0) 0,rgba(255,253,249,0) 235px,rgba(255,253,249,.75) 290px,#fffdf9 330px)}
  .bigHero.hasScene .bigHeroInner{padding-top:236px}
  .bigHero.hasScene .bigHeroLogo{position:relative;z-index:3}
}

/* ---------- Computer: Home più ordinata (stessi contenuti) ---------- */
h1,h2,h3{text-wrap:balance}
@media (min-width:1024px){
  .bigHero.hasScene .bigHeroInner{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:stretch;padding-bottom:72px}
  .bigHero.hasScene .bigHeroInner>*{grid-column:1/-1;max-width:760px}
  .bigHero.hasScene .bigHeroInner>p{max-width:600px}
  .bigHero.hasScene .bigHeroInner>.actions{margin-bottom:clamp(40px,8vh,96px)}
  .bigHero.hasScene .quickDonate{grid-column:1;max-width:none;margin:0}
  .bigHero.hasScene .heroVerse{grid-column:2;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;
    padding:34px 40px;border-radius:22px;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .bigHero.hasScene .heroVerse p{font-family:Prata,Georgia,serif;font-size:clamp(20px,1.7vw,25px);line-height:1.5;color:#0d2b3e;max-width:none}
}


/* ---------- Alba sopra le nuvole (montagne del sito ufficiale, animate) ---------- */
.hsAlba .hsSea{animation:hsSeaMove 60s linear infinite}
.hsAlba .hsSea.s1,.hsAlba .hsSea.s3{animation-direction:reverse}
@keyframes hsSeaMove{from{transform:translateX(0)}to{transform:translateX(-1600px)}}
@media (prefers-reduced-motion:no-preference){
  .hsAlba .hsSunRise{animation:hsSunUp 5s .2s cubic-bezier(.2,.7,.2,1) both, hsBreath 8s 5s ease-in-out infinite alternate}
  .hsAlba .hsRays{transform-box:view-box;transform-origin:1180px 470px;animation:hsRays 40s linear infinite}
}
@media (prefers-reduced-motion:reduce){.hsAlba .hsSea{animation:none}}
@keyframes hsSunUp{from{transform:translateY(140px);opacity:.2}to{transform:none;opacity:1}}
@keyframes hsRays{from{transform:rotate(-4deg)}50%{transform:rotate(4deg)}to{transform:rotate(-4deg)}}

/* ---------- Foto del sito ufficiale con nuvole che si muovono ---------- */
.bigHero.hasScene:has(.hsFotoNuvole){background:#e9eef3}
.hsFotoNuvole .hsPhotoBg{position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat,url('hero-montagne.svg') center bottom/cover no-repeat,#e9eef3}
.heroScene.hsFotoNuvole svg{width:100%;left:0}
@media (min-width:821px){.heroScene.hsFotoNuvole{height:auto;bottom:0}}
.bigHero.hasScene:has(.hsFotoNuvole)::before{background:linear-gradient(100deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.46) 52%,rgba(255,255,255,.14) 100%)}
.hsNube{animation:hsNubeMove 60s linear infinite}
.hsNube.n2{animation-duration:40s}
.hsNube.n3{animation-duration:28s}
@keyframes hsNubeMove{from{transform:translateX(0)}to{transform:translateX(-1600px)}}
@media (prefers-reduced-motion:no-preference){
  .hsFotoNuvole .hsPhotoBg{animation:hsKenB 40s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){.hsNube{animation:none}}
@keyframes hsKenB{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (max-width:820px){
  .heroScene.hsFotoNuvole svg{width:100%;left:0}
  .bigHero.hasScene:has(.hsFotoNuvole)::before{background:linear-gradient(180deg,rgba(255,253,249,0) 0,rgba(255,253,249,0) 235px,rgba(255,253,249,.75) 290px,#fffdf9 330px)}
}

/* ---------- Video del hero (alba sopra le nuvole) ---------- */
.hsConVideo .hsPhotoBg{background:url('assets/hero/alba-poster.jpg') center/cover no-repeat,#2b3346;animation:none}
.hsConVideo .hsVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.bigHero.hasScene:has(.hsConVideo){background:#f4f1ec}
@media (min-width:821px){.heroScene.hsFotoNuvole.hsConVideo{height:max(calc(100svh - 76px),560px);bottom:auto}}
.hsConVideo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,rgba(244,241,236,0),#f4f1ec);pointer-events:none}
@media (max-width:820px){.hsConVideo .hsVideo{object-position:30% 50%}}
@media (min-width:821px){.hsConVideo .hsVideo,.hsConVideo .hsPhotoBg{transform:scaleX(-1)}}

/* ---------- Tutte le pagine: stesso tocco della Home ---------- */
@media (prefers-reduced-motion:no-preference){
  .pageHero .wrap>*{animation:hsText .9s cubic-bezier(.2,.7,.2,1) both}
  .pageHero .wrap>*:nth-child(2){animation-delay:.1s}
  .pageHero .wrap>*:nth-child(3){animation-delay:.2s}
  .pageHero h1:after{transform-origin:left;animation:hsLine 1.2s .35s cubic-bezier(.2,.7,.2,1) both}
  .pageHero:before{animation:wowStar 7s ease-in-out infinite alternate}
  .wowR{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .wowR.wowIn{opacity:1;transform:none}
}
@keyframes wowStar{from{opacity:.6;transform:translateY(-50%) rotate(-6deg) scale(.96)}to{opacity:1;transform:translateY(-50%) rotate(6deg) scale(1.04)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .programmeItem,.transparencyCards .card,.bankBox,.galleryGrid>*{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
  .programmeItem:hover,.transparencyCards .card:hover{transform:translateY(-5px);border-color:rgba(217,178,95,.75);box-shadow:0 22px 48px rgba(7,63,43,.12)}
  .programmeItem:hover .programmeIcon,.transparencyCards .card:hover .iconRound.ico{animation:icoPop .5s ease}
  .galleryGrid>*:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,63,43,.18)}
}

/* ---------- "Dona ora": PayPal subito in cima ---------- */
.payBox{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:26px;border:1px solid rgba(217,178,95,.45)}
.payBox h2{margin:8px 0 8px}
.payBox p{margin:0;color:#4a6470}
.payAction{display:flex;flex-direction:column;gap:10px}
.payAction .payBtn{margin-top:0;min-height:58px;font-size:17px;justify-content:flex-start}
.payAction .payBtn .contactExactArrow{margin-left:auto}
.payAction small{color:#6b7f88;font-size:13.5px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .payAction .payBtn{transition:transform .3s ease,box-shadow .3s ease}
  .payAction .payBtn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,191,32,.35)}
}
@media (max-width:820px){.payBox{grid-template-columns:1fr;gap:18px}}

/* Dona ora: riquadri bilanciati */
.guideGrid{align-items:stretch}
.guideGrid>.panel{display:flex;flex-direction:column}
.guideGrid>.panel>.btn:last-child{margin-top:auto;align-self:flex-start}
.guideGrid .steps{margin-bottom:24px}
.bigBank{display:grid;gap:8px;padding:22px 24px;background:linear-gradient(135deg,#eef6f8,#f7fbfc);border-color:rgba(7,63,43,.14)}
.bigBank b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6b7f88;font-weight:700}
.bigBank .iban{font-size:clamp(17px,1.7vw,22px);letter-spacing:.05em;color:#073f2b;font-variant-numeric:tabular-nums}
.bigBank .btn{justify-self:start;margin-top:8px}
.cleanSteps li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:baseline}
.cleanSteps li b{grid-column:2;font-size:13px;color:#6b7f88;font-weight:700;letter-spacing:.02em}
.cleanSteps li:before{grid-row:1 / span 2}
.cleanSteps li:last-child{border-bottom:0}
.payBox .payAction{justify-content:center}
.bigBank+.cleanSteps{margin-top:4px}

/* Header mobile: nome su 2 righe pulite, motto dentro la barra */
.brand strong{display:block}
@media (max-width:820px){
  .brand>div{min-width:0;line-height:1.15}
  .brand strong{white-space:nowrap;line-height:1.18}
  .brand span{margin-top:2px;line-height:1.2}
}
@media (max-width:400px){
  .brand strong{font-size:13.5px}
  .brand span{font-size:10.5px}
}

/* Trasparenza: schede ordinate */
.split.transparencyPanel{align-items:stretch;gap:24px}
.split.transparencyPanel>.panel{margin:0}
.transparencyCards{gap:18px}
.transparencyCards .card h3{margin:14px 0 6px}
.transparencyCards .card p strong{font-size:20px;letter-spacing:.06em;color:#073f2b}
.list.twoCol{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.list.rolesList{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.list.rolesList li{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fbfaf7;font-weight:600;color:#073f2b}
.list.rolesList li:first-child{grid-column:1/-1;background:#073f2b;color:#fff;border-color:#073f2b}
.list.rolesList li:first-child:before{color:#d9b25f}
@media (max-width:820px){.list.twoCol{grid-template-columns:1fr}}
@media (max-width:380px){.list.rolesList{grid-template-columns:1fr}}
.content .wrap>.split.transparencyPanel:last-child>.panel:last-child{background:linear-gradient(150deg,#073f2b,#0b5a3d);border-color:#073f2b;color:#fff}
.content .wrap>.split.transparencyPanel:last-child>.panel:last-child h2{color:#fff}
.content .wrap>.split.transparencyPanel:last-child>.panel:last-child p{color:rgba(255,255,255,.82)}
.content .wrap>.split.transparencyPanel:last-child>.panel:last-child .kicker{color:#d9b25f}

/* Programma: quota e donazioni bilanciate */
section.programmeWide{grid-template-columns:1fr 1fr}
@media (max-width:820px){section.programmeWide{grid-template-columns:1fr}}
.memberBox,.donationBox{display:flex;flex-direction:column;align-items:flex-start;padding:28px}
.donationBox .kicker{margin-bottom:6px}
.donationBox h3{margin-top:6px}
.feeBadge{align-items:center;gap:12px;margin-top:auto;padding:14px 20px}
.feeBadge strong{font-size:34px}
.feeBadge span{font-size:15px;line-height:1.25;font-weight:800}
.donationBox .donateBtn{margin-top:auto;background:linear-gradient(90deg,#e8c265,#d4a73c);color:#3a2c08;padding:14px 22px}
.donationBox p{margin-bottom:18px}
.memberBox p{margin-bottom:18px}
.donationBox .donateBtn span{transition:transform .25s}
.donationBox .donateBtn:hover span{transform:translateX(4px)}

/* Bandiere lingua (SVG, visibili anche su Windows) */
.langSwitch .flagImg{display:block;width:24px;height:16px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 5px rgba(0,0,0,.15);transition:transform .25s}
.langSwitch:hover .flagImg{transform:scale(1.1)}
@media (max-width:820px){.navTools .langSwitch .flagImg{width:28px;height:19px}}

/* Logo Home: più grande e nitido, senza cerchio bianco intorno */
.bigHeroLogo{width:150px;height:150px;padding:0;background:none;box-shadow:none;border-radius:0}
.bigHeroLogo img{border-radius:0;filter:drop-shadow(0 10px 22px rgba(7,40,30,.28))}
.bigHero.hasScene .bigHeroLogo{animation:hsText .9s cubic-bezier(.2,.7,.2,1) both}
.bigHero.hasScene .bigHeroLogo img{animation:logoGlow 5s 1.2s ease-in-out infinite alternate}
@keyframes logoGlow{from{filter:drop-shadow(0 10px 22px rgba(7,40,30,.28)) drop-shadow(0 0 0 rgba(217,178,95,0))}to{filter:drop-shadow(0 10px 22px rgba(7,40,30,.28)) drop-shadow(0 0 14px rgba(217,178,95,.55))}}
@media (max-width:820px){.bigHeroLogo{width:128px;height:128px}}
.brand img,.footBrand img{background:none;object-fit:contain}
@media (prefers-reduced-motion:reduce){.bigHero.hasScene .bigHeroLogo img{animation:none}}