/* Home "wow": impaginazione da rivista, un racconto a scorrimento (la giornata del sole)
   e la mappa dei comuni. Si appoggia ad alba.css per intestazione, piede e pulsanti. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/source-serif-4.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/source-serif-4-italic.woff2) format("woff2"); }

.wow {
  --paper: #f3f0e8; --paper-2: #ebe7dc; --ink: #17201b; --ink-2: #4c564f; --line: #dcd8cc;
  --forest: #123b2a; --forest-2: #1b4d37; --green: #0b7a4b; --sun: #f2b705;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  background: var(--paper);
}
/* grana leggera: toglie l'effetto "digitale" ai fondi pieni */
.wow::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wow .w-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.wow .w-serif, .wow .w-title, .wow .w-h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }
.wow em { font-style: italic; }

/* ---------- apertura ---------- */
.w-hero { position: relative; overflow: hidden; padding-top: 120px; }
.w-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: center; min-height: calc(100svh - 190px); }
.w-hero-text { display: grid; gap: 28px; position: relative; z-index: 2; }
.w-title { margin: 0; font-size: clamp(42px, 6.2vw, 96px); line-height: 1.04; color: var(--ink); }
.w-title em { color: var(--green); }
.w-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.w-title .line > span { display: inline-block; }
.js-motion .w-title .line > span { transform: translateY(105%); animation: w-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.js-motion .w-title .line:nth-child(2) > span { animation-delay: .12s; }
.js-motion .w-title .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes w-rise { to { transform: none; } }
.w-intro { margin: 0; max-width: 44ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.w-hero .stage { position: relative; height: min(70svh, 640px); }
.w-hero .stage #scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-hero .fallback { position: absolute; inset: 12% 18%; border-radius: 4px; background: linear-gradient(150deg, #1b2230, #0d1118); box-shadow: inset 0 0 0 6px #d7dbde, 0 30px 60px rgba(0,0,0,.18); transform: perspective(900px) rotateY(-18deg) rotateX(8deg); }
.w-hero.has-3d .fallback { display: none; }
.w-hero .panel-shadow { position: absolute; left: 50%; bottom: 6%; width: 56%; height: 28px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(23,32,27,.22), transparent); filter: blur(8px); }
.w-facts { list-style: none; margin: 0; padding: 22px 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--line); }
.w-facts li { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.w-facts strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }

/* ---------- la giornata del sole (racconto a scorrimento) ---------- */
.w-day-track { position: relative; height: 280vh; }
.w-day-sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: hidden; }
.w-day-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.w-day-copy { display: grid; gap: 22px; }
.w-day-copy h2 { margin: 0; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.1; }
.w-day-copy h2 em { color: var(--green); }
.w-day-copy p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.w-day-stats { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 40px; margin: 6px 0 0; }
.w-day-stats dt { font-size: 13px; color: var(--ink-2); letter-spacing: .04em; }
.w-day-stats dd { margin: 0; font-family: var(--serif); font-size: clamp(40px, 4.4vw, 62px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.w-day-stats dd small { font-family: var(--font); font-size: 16px; color: var(--ink-2); margin-left: 6px; }
.w-day-scene { width: 100%; height: auto; display: block; border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(23,32,27,.35); }
.w-day .source { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 52ch; }

/* ---------- servizi come indice di rivista ---------- */
.w-services { padding-block: 120px 96px; }
.w-h2 { margin: 0 0 40px; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.08; max-width: 14ch; }
.w-h2 em { color: var(--green); }
.w-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 48px; gap: 24px; align-items: baseline; padding: 34px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: padding .35s cubic-bezier(.2,.7,.2,1), background .35s; }
.w-row:last-child { border-bottom: 1px solid var(--line); }
.w-num { font-size: 14px; font-weight: 600; color: var(--green); letter-spacing: .08em; }
.w-row-title { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; }
.w-row-text { color: var(--ink-2); }
.w-arrow { justify-self: end; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, color .3s, transform .3s; }
.w-row:hover { padding-left: 14px; }
.w-row:hover .w-arrow { background: var(--forest); color: #fff; border-color: var(--forest); transform: rotate(-45deg); }

/* ---------- mappa del territorio ---------- */
.w-map { background: var(--forest); color: #fff; padding-block: 112px; position: relative; overflow: hidden; }
.w-map-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.w-map .w-label { color: #9fd3b8; }
.w-map h2 { margin: 14px 0 18px; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; }
.w-map h2 em { color: var(--sun); }
.w-map p { color: #c9ddd2; margin: 0 0 14px; max-width: 46ch; }
.w-map .source { font-size: 13px; color: #8fb3a1; }
.w-map svg { width: 100%; height: auto; display: block; }
.w-map svg a { cursor: pointer; }
.w-map .dot { fill: #e9f2ed; transition: r .2s, fill .2s; }
.w-map .dot.main { fill: var(--sun); }
.w-map .name { font-size: 15px; fill: #fff; font-weight: 500; }
.w-map .val { font-size: 12px; fill: #9fd3b8; font-variant-numeric: tabular-nums; }
.w-map .minor .name { font-size: 12.5px; fill: #c9ddd2; font-weight: 400; }
.w-map a:hover .dot, .w-map a:focus .dot { fill: #fff; }
.w-map a:hover .name, .w-map a:focus .name { text-decoration: underline; }
.w-map .home-ring { fill: none; stroke: var(--sun); stroke-width: 1.5; opacity: .7; }
.js-motion .w-map .home-ring { animation: w-pulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes w-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- percorso ---------- */
.w-steps { padding-block: 112px; }
.w-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; border-top: 1px solid var(--ink); }
.w-steps li { padding: 26px 26px 0 0; display: grid; gap: 10px; align-content: start; }
.w-steps li::before { counter-increment: s; content: counter(s) "."; font-family: var(--serif); font-size: 46px; line-height: 1; color: var(--green); }
.w-steps h3 { margin: 0; font-size: 21px; }
.w-steps p { margin: 0; color: var(--ink-2); }

/* ---------- chiusura ---------- */
.w-final { padding-block: 40px 120px; }
.w-final .box { border-radius: 36px; background: var(--paper-2); padding: clamp(36px, 7vw, 96px); display: grid; gap: 26px; justify-items: start; position: relative; overflow: hidden; }
.w-final h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 5vw, 76px); line-height: 1.06; max-width: 13ch; }
.w-final h2 em { color: var(--green); }
.w-final p { margin: 0; max-width: 48ch; color: var(--ink-2); font-size: 18px; }
.w-final .sunmark { position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffd95a, var(--sun) 45%, rgba(242,183,5,0) 70%); opacity: .55; pointer-events: none; }

/* ---------- comparsa ---------- */
.js-motion .w-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js-motion .w-reveal.in { opacity: 1; transform: none; }

/* ---------- telefono ---------- */
@media (max-width: 900px) {
  .w-hero { padding-top: 84px; }
  .w-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; }
  .w-hero-text { gap: 20px; }
  .w-title { font-size: clamp(38px, 11vw, 54px); }
  .w-hero .stage { height: 250px; }
  .w-facts { grid-template-columns: 1fr 1fr; gap: 18px 16px; padding-bottom: 8px; }
  .w-facts strong { font-size: 22px; }
  .w-day-track { height: 200vh; }
  .w-day-sticky { align-items: center; padding-top: 60px; }
  .w-day-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .w-day-copy { gap: 10px; }
  .w-day-copy h2 { font-size: 28px; }
  .w-day-copy > p:not(.w-label):not(.source) { display: none; }
  .w-day-stats { gap: 28px; }
  .w-day-stats dd { font-size: 38px; }
  .w-day-scene { border-radius: 20px; }
  .w-day .source { font-size: 13.5px; }
  .w-services { padding-block: 72px 56px; }
  .w-h2 { margin-bottom: 24px; }
  .w-row { grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 12px; padding: 22px 0; }
  .w-row-text { grid-column: 1 / 2; font-size: 16.5px; }
  .w-arrow { grid-row: 1; grid-column: 2; width: 40px; height: 40px; }
  .w-map { padding-block: 72px; }
  .w-map-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .w-map svg { margin-inline: -12px; width: calc(100% + 24px); }
  .w-map .name { font-size: 21px; }
  .w-map .val { font-size: 16px; }
  .w-map .minor .name { display: none; }
  .w-map .dot.main { r: 8px; }
  .w-steps { padding-block: 72px; }
  .w-steps ol { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .w-steps li { grid-template-columns: 48px 1fr; padding: 18px 0; border-top: 1px solid var(--line); column-gap: 8px; }
  .w-steps li::before { grid-row: span 2; font-size: 44px; }
  .w-final { padding-block: 16px 72px; }
  .w-final .sunmark { width: 220px; height: 220px; right: -70px; top: -70px; }
}
@media (prefers-reduced-motion: reduce) {
  .w-day-track { height: auto; }
  .w-day-sticky { position: relative; height: auto; padding-block: 96px; }
  .js-motion .w-title .line > span { animation: none; transform: none; }
}

/* barre orarie della giornata */
.d-bar{fill:rgba(23,32,27,.13);transition:fill .3s}
.d-bar.on{fill:#0b7a4b}

/* revisione designer */
#d-ora { display: inline-block; min-width: 2.6em; }
.w-hint { display: none; margin: 0; font-size: 13px; color: var(--ink-2); }
.w-map .source a { color: #e3ede8; display: inline-block; padding: 12px 0; }
body.wow .top .bar { background: rgba(250,250,247,.94); }
@media (max-width: 900px) {
  .w-hero .stage { display: none; }
  .w-hint { display: block; }
  .w-day-scene .d-axis { font-size: 20px; }
  .w-map .minor { display: none; }
  .w-map .name { font-size: 25px; }
  .w-map .val { font-size: 19px; }
  .w-final .sunmark { right: -140px; top: -150px; opacity: .3; }
}