/*
Theme Name: Impatto Civico
Author: Associazione Vittime della Strada
Description: Tema bold con sezioni ampie, tipografia forte e call to action centrali.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: impatto-civico
*/

:root{--bg:#ffffff;--fg:#0f172a;--acc:#ef4444;--acc-dark:#b91c1c;--acc2:#0ea5e9;--soft:#f1f5f9;--dark:#111827}
*{box-sizing:border-box}
body{margin:0;font-family:Poppins,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
.wrap{max-width:1140px;margin:0 auto;position:relative}

/* HEADER */
.impact-header{position:sticky;top:0;z-index:80;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 14px 30px rgba(2,6,23,.24)}
.impact-header-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
background:
linear-gradient(180deg,rgba(191,219,254,.98) 0 30%,rgba(187,247,208,.95) 30% 74%,rgba(31,41,55,.95) 74% 100%),
radial-gradient(circle at 8% 55%,rgba(34,197,94,.95) 0 5%,transparent 5.2%),
radial-gradient(circle at 20% 57%,rgba(22,163,74,.95) 0 5.6%,transparent 5.8%),
radial-gradient(circle at 32% 55%,rgba(34,197,94,.92) 0 5.3%,transparent 5.5%),
radial-gradient(circle at 46% 58%,rgba(21,128,61,.95) 0 6%,transparent 6.2%),
radial-gradient(circle at 60% 56%,rgba(34,197,94,.92) 0 5.4%,transparent 5.6%),
radial-gradient(circle at 74% 58%,rgba(22,163,74,.95) 0 5.9%,transparent 6.1%),
radial-gradient(circle at 88% 56%,rgba(34,197,94,.92) 0 5.1%,transparent 5.3%),
repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.9) 52px 64px,transparent 64px 122px);
background-size:100% 100%,auto,auto,auto,auto,auto,auto,auto,180px 32px;
background-position:center center,center center,center center,center center,center center,0 88%;
animation:headerRoad 2.4s linear infinite;
}
.impact-header-bg::before{content:"";position:absolute;left:0;right:0;top:34%;height:38%;
background:linear-gradient(180deg,rgba(34,197,94,.2),rgba(22,163,74,.08));animation:parkDrift 7s ease-in-out infinite}
.impact-header > *:not(.impact-header-bg){position:relative;z-index:1}

.impact-topbar{background:rgba(15,23,42,.78);border-bottom:1px solid rgba(255,255,255,.16)}
.impact-topbar .wrap{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;padding:.4rem .8rem}
.impact-topbar a{color:#fff;text-decoration:none;font-weight:700;font-size:.82rem;background:rgba(255,255,255,.12);padding:.3rem .62rem;border-radius:999px}

.impact-menu-row{background:rgba(255,255,255,.9);border-bottom:1px solid rgba(15,23,42,.1)}
.impact-menu-inner{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:.8rem 1rem}
.impact-brand{font-size:1.05rem;color:#0f172a}

.impact-mega-list{list-style:none;margin:0;padding:0;display:flex;gap:.42rem;flex-wrap:wrap}
.impact-mega-list li{margin:0;position:relative}
.impact-mega-list a{display:inline-flex;padding:.4rem .72rem;border-radius:999px;background:#f1f5f9;color:#0f172a;text-decoration:none;font-weight:700;font-size:.84rem}
.impact-mega-list a:hover{background:#fee2e2}
.impact-mega-list li ul{display:none;position:absolute;top:115%;left:0;min-width:200px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:.4rem;box-shadow:0 10px 20px rgba(2,6,23,.12);z-index:20}
.impact-mega-list li:hover>ul{display:block}
.impact-mega-list li ul li{display:block}
.impact-mega-list li ul a{display:flex;border-radius:8px}

.impact-emergency-row{background:linear-gradient(90deg,rgba(127,29,29,.95),rgba(220,38,38,.95));border-bottom:1px solid rgba(255,255,255,.18)}
.impact-emergency-row .wrap{display:flex;justify-content:space-between;align-items:center;gap:.7rem;padding:.46rem .9rem;color:#fff;font-weight:800}
.impact-emergency-row a{color:#fff;text-decoration:none;background:rgba(17,24,39,.5);padding:.28rem .62rem;border-radius:999px;border:1px solid rgba(255,255,255,.35)}

.impact-donation-row{background:rgba(15,23,42,.88)}
.impact-donation-row .wrap{display:flex;justify-content:center;align-items:center;gap:.55rem;flex-wrap:wrap;padding:.55rem .9rem;color:#fff}
.donate-btn{display:inline-flex;text-decoration:none;font-weight:800;background:var(--acc-dark);color:#fff;padding:.34rem .72rem;border-radius:999px}
.donate-btn.alt{background:#1d4ed8}

/* CONTENT */
.hero{padding:5rem 1rem;background:linear-gradient(120deg,#fee2e2,#e0f2fe);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 24%,rgba(255,255,255,.55),transparent 40%),radial-gradient(circle at 82% 20%,rgba(255,255,255,.35),transparent 36%);z-index:0;animation:heroSky 4.5s ease-in-out infinite}
.hero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-10px;height:56px;background:linear-gradient(180deg,transparent 0 35%,rgba(15,23,42,.16) 35% 60%,transparent 60% 100%);z-index:0;opacity:.8;transform:skewY(-1deg)}
.hero h1,.hero p,.hero .pill,.hero .hero-slide,.beacon{position:relative;z-index:1}
.beacon{position:absolute;right:7%;top:18%;width:16px;height:16px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:beacon 1.5s infinite}

.pill{display:inline-block;background:var(--acc);color:#fff;padding:.65rem 1rem;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(239,68,68,.35);transition:transform .25s ease,box-shadow .25s ease}
.pill:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 28px rgba(239,68,68,.45)}
.donation-main{background:var(--acc-dark)}
.donation-secondary{background:var(--dark)}
.pill-alt{background:#fff;color:#111827}

.hero-slide{margin-top:1rem;max-width:860px;border:1px solid rgba(255,255,255,.72);border-radius:20px;padding:.85rem .95rem 1.35rem;background:linear-gradient(180deg,rgba(191,219,254,.55) 0 38%,rgba(226,232,240,.8) 38% 100%);backdrop-filter:blur(2px);box-shadow:0 18px 34px rgba(15,23,42,.18);position:relative;overflow:hidden}
.hero-slide::after{content:"";position:absolute;left:6%;right:6%;bottom:8px;height:16px;border-radius:999px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 24px,rgba(255,255,255,.9) 24px 32px,rgba(255,255,255,0) 32px 60px),linear-gradient(180deg,#374151,#111827);background-size:120px 8px,100% 100%;background-position:0 50%,center center;background-repeat:repeat-x,no-repeat;animation:slideRoadFlow 2.2s linear infinite}

.park-scene-track{position:relative;height:72px;z-index:1;overflow:hidden}
.park-scene-track::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:26px;transform:translateX(-50%);border-radius:999px;background:linear-gradient(180deg,#111827,#1f2937);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.park-scene-track::after{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:6px;transform:translateX(-50%);border-radius:999px;background:repeating-linear-gradient(180deg,#ffffff 0 6px,transparent 6px 12px);opacity:.95}

.scene-user{position:absolute;font-size:1.5rem;filter:drop-shadow(0 4px 6px rgba(15,23,42,.22));z-index:2}
.scene-user.car{left:8%;bottom:34px;animation:carLaneLeft 6.8s ease-in-out infinite}
.scene-user.moto{left:24%;bottom:34px;animation:motoLaneLeft 5.4s ease-in-out infinite}
.scene-user.ped-1{left:62%;bottom:34px;animation:pedLaneRight 4.8s ease-in-out infinite}
.scene-user.ped-2{left:78%;bottom:34px;animation:pedLaneRightAlt 5.2s ease-in-out infinite}
.scene-user.scooter{right:10%;bottom:35px;animation:scooterCrossRoad 7.6s linear infinite}
.scene-user.access{left:62%;bottom:35px;animation:pedCrossRoad 5.2s ease-in-out infinite}
.scene-object{position:absolute;bottom:8px;font-size:1.2rem;opacity:.92;filter:drop-shadow(0 2px 3px rgba(15,23,42,.18))}
.scene-object.bench-1{left:14%;animation:benchBob 5s ease-in-out infinite}
.scene-object.bench-2{left:70%;animation:benchBob 5.6s ease-in-out infinite}
.scene-object.play{left:84%;bottom:10px;font-size:1.28rem;animation:playBob 3.6s ease-in-out infinite}
.scene-label{position:relative;z-index:1;margin:.15rem 0 0;color:#1e3a2f;font-weight:700;font-size:.92rem}

.stop-zone{padding:1rem 1rem 0}
.stop-banner{max-width:1140px;margin:0 auto 1rem;display:flex;align-items:center;gap:1rem;background:#fff5f5;border:1px solid #fecaca;border-radius:14px;padding:1rem;position:relative;overflow:hidden}
.stop-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(239,68,68,.2),transparent);animation:stopSweep 2.6s linear infinite}
.stop-sign{width:84px;height:84px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#dc2626;color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(220,38,38,.55);animation:stopPulse 1.4s infinite;flex:0 0 auto}
.stop-copy strong{display:block;font-size:1.08rem;color:#7f1d1d}
.stop-copy span{color:#991b1b}

.band{padding:1.25rem 1rem;background:#0f172a;color:#fff;text-align:center;font-weight:700;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:sweep 2.4s linear infinite}

.donation-highlight{padding:1.4rem 1rem 0}
.donation-highlight .wrap{background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:14px;padding:1.2rem;border:1px solid rgba(255,255,255,.22)}
.donation-highlight p{color:#fee2e2}
.donation-actions{display:flex;gap:.6rem;flex-wrap:wrap}

.metrics,.impact-timeline,.testimonials,.final-cta,.mobility-safe{max-width:1140px;margin:0 auto;padding:2rem 1rem}
.metrics-grid,.timeline-grid,.testimonials-grid,.mobility-grid,.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.metric,.timeline-step,.quote-card,.box,.mobility-item{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1rem;opacity:0;transform:translateY(16px);animation:reveal .75s ease forwards;transition:transform .25s ease,box-shadow .25s ease}
.metric:hover,.timeline-step:hover,.quote-card:hover,.box:hover,.mobility-item:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(15,23,42,.12)}
.box{border-top:4px solid var(--acc2)}
.box:nth-child(2){animation-delay:.14s}.box:nth-child(3){animation-delay:.28s}
.metric strong{display:block;font-size:1.9rem;color:#dc2626}
.metric-donation-note{margin:1rem 0 0;font-weight:700;color:#7f1d1d}
.timeline-step{border-left:4px solid var(--acc2)}
.quote-card em{display:block;margin-top:.6rem;color:#475569}
.mobility-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fee2e2;color:#991b1b;font-size:1.3rem;font-weight:700;margin-bottom:.7rem}
.final-cta{background:linear-gradient(135deg,#fee2e2,#e0f2fe);border-radius:14px;text-align:center}

footer{padding:2rem 1rem;background:#020617;color:#cbd5e1}

/* ANIMATIONS */
@keyframes headerRoad{to{background-position:center center,center center,center center,0 88%}}
@keyframes parkDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
@keyframes heroRoadFlow{from{background-position:center center,0 78%,center center;transform:skewY(-1.8deg) scale(1)}to{background-position:center center,-180px 78%,center center;transform:skewY(-1.8deg) scale(1.015)}}
@keyframes heroSky{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes stopPulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}100%{box-shadow:0 0 0 16px rgba(220,38,38,0)}}
@keyframes stopSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}100%{box-shadow:0 0 0 16px rgba(239,68,68,0)}}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
@keyframes bikeRideScene{0%{transform:translateX(0)}100%{transform:translateX(108%)}}
@keyframes scooterRideScene{0%{transform:translateX(0)}100%{transform:translateX(-120%)}}
@keyframes pedBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pedBob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes benchBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes playBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes slideRoadFlow{from{background-position:0 50%,center center}to{background-position:-120px 50%,center center}}
@keyframes bikeCrossRoad{
0%{transform:translate(0,0) rotate(0deg)}
30%{transform:translate(34vw,-6px) rotate(-2deg)}
60%{transform:translate(56vw,18px) rotate(1deg)}
100%{transform:translate(96vw,0) rotate(0deg)}
}
@keyframes scooterCrossRoad{
0%{transform:translate(0,0)}
35%{transform:translate(-24vw,-4px)}
65%{transform:translate(-46vw,15px)}
100%{transform:translate(-96vw,0)}
}
@keyframes pedCrossRoad{
0%,100%{transform:translateY(0)}
50%{transform:translateY(20px)}
}
@keyframes pedCrossRoadAlt{
0%,100%{transform:translateY(2px)}
50%{transform:translateY(22px)}
}
@keyframes carLaneLeft{
0%,100%{transform:translateX(0)}
50%{transform:translateX(12vw)}
}
@keyframes motoLaneLeft{
0%,100%{transform:translateX(0)}
50%{transform:translateX(10vw)}
}
@keyframes pedLaneRight{
0%,100%{transform:translateY(0)}
50%{transform:translateY(16px)}
}
@keyframes pedLaneRightAlt{
0%,100%{transform:translateY(2px)}
50%{transform:translateY(18px)}
}

/* RESPONSIVE */
@media (max-width:900px){
.impact-menu-inner{grid-template-columns:1fr}
}
@media (max-width:760px){
.impact-brand{font-size:.98rem}
.impact-mega-list a{font-size:.78rem}
.impact-topbar a{font-size:.76rem}
.impact-emergency-row .wrap{font-size:.82rem}
.hero-slide{border-radius:16px;padding:.75rem}
.park-scene-track{height:66px}
.scene-user{font-size:1.32rem}
.scene-object{font-size:1rem}
.scene-label{font-size:.86rem}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}