/* =========================================================================
   PGO — Concept "Outdoor moderno / dinamico"
   styles.css — Layout, componenti, animazioni
   @layer per controllo cascata. Mobile-first.
   ========================================================================= */

@layer reset, base, layout, components, sections, motion, utilities;

/* ---------------------------------------------------------------- RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100vh; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"] { list-style: none; padding: 0; }
  :focus-visible {
    outline: 3px solid var(--c-sky-500);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* ----------------------------------------------------------------- BASE */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    color: var(--c-text);
    background: var(--c-bg);
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    font-weight: var(--fw-extra);
    letter-spacing: -0.018em;
    color: var(--c-ink);
    text-wrap: balance;
  }
  h2 { font-size: var(--fs-700); }
  h3 { font-size: var(--fs-500); letter-spacing: -0.01em; }
  p { text-wrap: pretty; }

  .skip-link {
    position: absolute;
    left: var(--sp-4); top: -100%;
    z-index: var(--z-overlay);
    background: var(--c-ink); color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-md);
    transition: top var(--t-fast) var(--ease-out);
  }
  .skip-link:focus { top: var(--sp-4); }
}

/* --------------------------------------------------------------- LAYOUT */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--wide { max-width: var(--container-wide); }

  .section { padding-block: var(--sp-section); }
  .section--tint { background: var(--c-surface-2); }
  .section--deep {
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(43,160,224,0.10), transparent 60%),
      var(--c-ink);
    color: #eaf2ed;
  }
  .section--deep h2,
  .section--deep h3 { color: #fff; }

  .stack > * + * { margin-top: var(--sp-4); }
  .grid { display: grid; gap: var(--gutter); }
}

/* ----------------------------------------------------------- COMPONENTS */
@layer components {

  /* --- Eyebrow / kicker --- */
  .kicker {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-brand);
  }
  .kicker::before {
    content: ""; inline-size: 1.6rem; block-size: 3px; border-radius: 3px;
    background: var(--grad-sun);
  }
  .section--deep .kicker { color: var(--c-sun-400); }

  /* --- Buttons --- */
  .btn {
    --_bg: var(--c-brand);
    --_fg: var(--c-on-brand);
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: 0.85em 1.5em;
    font-weight: var(--fw-bold);
    font-size: var(--fs-400);
    line-height: 1;
    border: 0; cursor: pointer;
    border-radius: var(--r-pill);
    background: var(--_bg); color: var(--_fg);
    box-shadow: var(--sh-md);
    transition: transform var(--t-fast) var(--ease-spring),
                box-shadow var(--t-med) var(--ease-out),
                background-color var(--t-fast) var(--ease-out);
    will-change: transform;
  }
  .btn:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
  .btn:active { transform: translateY(-1px); }
  .btn .ico { transition: transform var(--t-med) var(--ease-spring); }
  .btn:hover .ico { transform: translateX(4px); }

  .btn--accent { --_bg: var(--c-sun-500); --_fg: #2a1a02; box-shadow: var(--sh-sun); }
  .btn--accent:hover { background: var(--c-sun-400); }
  .btn--ghost {
    --_bg: transparent; --_fg: var(--c-ink);
    box-shadow: inset 0 0 0 2px var(--c-line);
  }
  .btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--c-brand); background: var(--c-green-050); }
  .btn--on-dark { --_bg: rgba(255,255,255,0.12); --_fg:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4); backdrop-filter: blur(4px); }
  .btn--on-dark:hover { --_bg: rgba(255,255,255,0.22); }
  .btn--sm { padding: 0.6em 1.1em; font-size: var(--fs-300); }

  /* --- Stat badge --- */
  .stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-surface);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-line);
  }
  .stat__num {
    font-family: var(--font-display);
    font-size: var(--fs-600); font-weight: var(--fw-extra);
    line-height: 1; color: var(--c-brand);
    letter-spacing: -0.02em;
  }
  .stat__label {
    font-size: var(--fs-300); font-weight: var(--fw-semi);
    color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .stat__ico {
    inline-size: 1.4rem; block-size: 1.4rem; color: var(--c-sky-600);
    margin-bottom: var(--sp-1);
  }

  /* --- Pill / chip --- */
  .pill {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 0.4em 0.9em;
    font-size: var(--fs-300); font-weight: var(--fw-bold);
    border-radius: var(--r-pill);
    background: var(--c-green-050); color: var(--c-green-700);
  }
  .pill--sky { background: var(--c-sky-050); color: var(--c-sky-600); }
  .pill--sun { background: #fff3df; color: #8a5a06; }

  /* --- Card --- */
  .card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-line);
    transition: transform var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
    display: flex; flex-direction: column;
  }
  .card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
  .card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-3); }
  .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
  .card:hover .card__media img { transform: scale(1.06); }
  .card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
  .card__date { font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--c-muted); }
  .card__title { font-size: var(--fs-500); }
  .card__excerpt { color: var(--c-text-soft); font-size: var(--fs-400); }
  .card__link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-weight: var(--fw-bold); color: var(--c-brand);
  }
  .card__link .ico { transition: transform var(--t-med) var(--ease-spring); }
  .card:hover .card__link .ico { transform: translateX(4px); }

  /* --- Section heading block --- */
  .head { max-width: 56ch; }
  .head--center { margin-inline: auto; text-align: center; }
  .head p { color: var(--c-text-soft); font-size: var(--fs-500); margin-top: var(--sp-3); }
  .head__row {
    display: flex; align-items: end; justify-content: space-between;
    gap: var(--sp-5); flex-wrap: wrap;
  }
}

/* ============================================================ HEADER/NAV */
@layer components {
  /* Header SEMPRE solido/chiaro (base fissa) — niente stato trasparente sopra l'hero. */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid rgba(20,32,25,0.08);
    transition: box-shadow var(--t-med) var(--ease-out);
  }
  /* Allo scroll solo un'ombra leggermente più marcata (nessun cambio di colore). */
  .site-header[data-scrolled="true"] {
    box-shadow: var(--sh-sm);
  }
  .nav { display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-4); }

  .brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .brand__mark {
    inline-size: 56px; block-size: 56px; border-radius: 50%;
    overflow: hidden; flex: none;
    box-shadow: 0 0 0 2px #fff, var(--sh-sm);
    background: #fff;
    display: grid; place-items: center;
  }
  /* l'asset è un emblema circolare pulito ~455×455: mostralo intero, niente zoom/offset */
  .brand__mark img {
    inline-size: 100%; block-size: 100%;
    object-fit: contain;
  }
  /* blocco testo centrato verticalmente sul cerchio del logo, interlinea compatta */
  .brand > span:last-child { display: flex; flex-direction: column; justify-content: center; }
  .brand__name {
    font-family: var(--font-display); font-weight: var(--fw-extra);
    font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.02; color: var(--c-ink);
  }
  .brand__sub { display:block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: var(--fw-semi); letter-spacing: 0.13em; text-transform: uppercase; color: var(--c-muted); margin-top: 0; line-height: 1.05; }

  .nav__links { display: none; }
  .nav__cta { margin-left: auto; display: none; }

  .nav__toggle {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 46px; block-size: 46px; border-radius: var(--r-md);
    background: var(--c-surface); border: 1px solid var(--c-line); cursor: pointer;
    box-shadow: var(--sh-sm);
  }
  .nav__toggle svg { inline-size: 24px; block-size: 24px; }

  /* mobile drawer */
  .mobile-nav {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: rgba(10,24,17,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med);
  }
  .mobile-nav[data-open="true"] { opacity: 1; visibility: visible; }
  .mobile-nav__panel {
    position: absolute; inset-block: 0; inset-inline-end: 0;
    inline-size: min(86vw, 360px);
    background: var(--c-surface);
    padding: var(--sp-6) var(--gutter);
    display: flex; flex-direction: column; gap: var(--sp-2);
    transform: translateX(100%);
    transition: transform var(--t-med) var(--ease-out);
    box-shadow: var(--sh-lg);
  }
  .mobile-nav[data-open="true"] .mobile-nav__panel { transform: translateX(0); }
  .mobile-nav a {
    padding: var(--sp-3) var(--sp-2); font-weight: var(--fw-semi); font-size: var(--fs-500);
    border-radius: var(--r-sm);
    color: var(--c-ink); /* drawer su sfondo chiaro: link sempre scuri e leggibili */
  }
  /* il CTA dentro al drawer resta con i suoi colori di bottone (testo scuro su giallo) */
  .mobile-nav a.btn--accent { color: #2a1a02; }
  .mobile-nav a:hover { background: var(--c-green-050); color: var(--c-brand); }
  .mobile-nav__close { align-self: flex-end; background:none; border:0; cursor:pointer; padding: var(--sp-2); }
  .mobile-nav__close svg { inline-size: 28px; block-size: 28px; }

  @media (min-width: 920px) {
    .nav__toggle { display: none; }
    .nav__links {
      display: flex; align-items: center; gap: var(--sp-2);
      margin-inline-start: var(--sp-6);
    }
    .nav__links a {
      position: relative; padding: var(--sp-2) var(--sp-3);
      font-weight: var(--fw-semi); font-size: var(--fs-400);
      border-radius: var(--r-sm);
      /* default SICURO: testo scuro (header bianco/trasparente-su-chiaro o no-JS) */
      color: var(--c-ink);
      transition: color var(--t-fast) var(--ease-out);
    }
    .nav__links a::after {
      content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 4px;
      block-size: 2.5px; border-radius: 3px; background: var(--c-accent);
      transform: scaleX(0); transform-origin: left;
      transition: transform var(--t-med) var(--ease-out);
    }
    .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--c-brand); }
    .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
    .nav__cta { display: inline-flex; }
  }
}

/* ================================================================== HERO */
@layer sections {
  .hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
  .hero__bg { position: absolute; inset: 0; z-index: -2; }
  .hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 42%; }
  .hero__bg::after { content:""; position:absolute; inset:0; background: var(--grad-hero-veil); }
  .hero__inner {
    /* Full-screen: l'intera prima schermata meno l'header sticky.
       svh per non farsi tagliare dalle barre del browser mobile. */
    min-block-size: calc(100vh - var(--header-h));
    min-block-size: calc(100svh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 9vh, 6rem);
  }
  .hero__content { max-width: 46rem; }
  .hero h1 {
    color: #fff; font-size: var(--fs-900);
    text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  }
  .hero h1 .accent {
    background: linear-gradient(120deg, var(--c-sun-400), #ffe08a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero__lead {
    font-size: var(--fs-500); color: rgba(255,255,255,0.94);
    max-width: 40ch; margin-top: var(--sp-4);
    text-shadow: 0 1px 18px rgba(0,0,0,0.3);
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
  .hero__chips { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
  .hero__chips .pill { background: rgba(255,255,255,0.16); color:#fff; backdrop-filter: blur(4px); }

  .hero__scroll {
    position: absolute; left: 50%; bottom: var(--sp-5); translate: -50% 0;
    display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-300); font-weight: var(--fw-semi); letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.85);
  }
  .hero__scroll svg { inline-size: 22px; block-size: 22px; }
}

/* =========================================================== PRESENTAZIONE */
@layer sections {
  .intro__grid { display: grid; gap: var(--gutter); align-items: center; }
  .intro__lead { font-size: var(--fs-600); font-weight: var(--fw-semi); color: var(--c-ink); letter-spacing: -0.01em; line-height: var(--lh-snug); }
  .intro__feats { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
  .feat { display: flex; gap: var(--sp-4); align-items: flex-start; }
  .feat__ico {
    flex: none; inline-size: 48px; block-size: 48px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--c-green-050); color: var(--c-brand);
  }
  .feat__ico svg { inline-size: 26px; block-size: 26px; }
  .feat h3 { font-size: var(--fs-500); }
  .feat p { color: var(--c-text-soft); font-size: var(--fs-400); margin-top: 2px; }

  @media (min-width: 860px) {
    .intro__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); }
    .intro__feats { grid-template-columns: 1fr 1fr; }
  }
}

/* =============================================================== SENTIERO */
@layer sections {
  .trail {
    position: relative; isolation: isolate; color: #fff; overflow: hidden;
    border-radius: var(--r-xl);
  }
  .trail__bg { position: absolute; inset: 0; z-index: -2; }
  .trail__bg img { inline-size:100%; block-size:100%; object-fit: cover; object-position: center; }
  .trail__bg::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(115deg, rgba(8,40,24,0.92) 0%, rgba(10,50,30,0.62) 48%, rgba(20,134,201,0.30) 100%);
  }
  .trail__inner { padding: clamp(2rem, 4vw, 3.5rem); display:grid; gap: var(--sp-6); }
  .trail h2 { color:#fff; }
  .trail__lead { color: rgba(255,255,255,0.92); font-size: var(--fs-500); max-width: 52ch; }
  .trail__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .trail .stat { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); backdrop-filter: blur(6px); }
  .trail .stat__num { color:#fff; }
  .trail .stat__label { color: rgba(255,255,255,0.82); }
  .trail .stat__ico { color: var(--c-sun-400); }
  .trail__actions { display:flex; flex-wrap:wrap; gap: var(--sp-3); }

  @media (min-width: 820px) {
    .trail__inner { grid-template-columns: 1.15fr 1fr; align-items: center; padding: clamp(3rem,4vw,4.5rem); }
    .trail__stats { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1080px) {
    .trail__stats { grid-template-columns: repeat(4, 1fr); grid-column: 1 / -1; }
    .trail__head { grid-column: 1 / -1; max-width: 60ch; }
    .trail__inner { grid-template-columns: 1fr; }
    .trail__actions { grid-column: 1 / -1; }
  }
}

/* =================================================================== NEWS */
@layer sections {
  .news__grid { grid-template-columns: 1fr; }
  @media (min-width: 700px) { .news__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .news__grid { grid-template-columns: repeat(3, 1fr); } }
}

/* ================================================================ GALLERIA */
@layer sections {
  .gallery {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
  .gallery__item {
    position: relative; overflow: hidden; border-radius: var(--r-md);
    aspect-ratio: 1 / 1; display: block; background: var(--c-surface-3);
    box-shadow: var(--sh-sm);
  }
  .gallery__item img { inline-size:100%; block-size:100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
  .gallery__item::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(8,26,18,0.75));
    opacity: 0.5; transition: opacity var(--t-med) var(--ease-out);
  }
  .gallery__cap {
    position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
    color:#fff; font-weight: var(--fw-bold); font-size: var(--fs-400);
    display: flex; align-items: center; gap: var(--sp-2);
    transform: translateY(6px); opacity: 0; transition: transform var(--t-med) var(--ease-out), opacity var(--t-med);
    z-index: 1;
  }
  .gallery__item:hover img { transform: scale(1.08); }
  .gallery__item:hover::after { opacity: 0.85; }
  .gallery__item:hover .gallery__cap { transform: translateY(0); opacity: 1; }
  .gallery__item:focus-visible .gallery__cap { transform: translateY(0); opacity: 1; }

  @media (min-width: 760px) {
    .gallery { grid-template-columns: repeat(4, 1fr); }
    .gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
    .gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
  }
}

/* ================================================================ PARTNER */
@layer sections {
  .partners { text-align: center; }
  .partners__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-6);
  }
  .partner-logo {
    display: grid; place-items: center;
    inline-size: clamp(150px, 22vw, 210px); block-size: 84px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    border: 1px dashed var(--c-line);
    color: var(--c-muted); font-weight: var(--fw-bold); letter-spacing: 0.04em;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
  }
  .partner-logo:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
  .partner-logo small { display:block; font-weight: var(--fw-semi); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
}

/* ================================================================= FOOTER */
@layer sections {
  .footer { background: var(--c-ink); color: #cdd9d2; padding-block: var(--sp-8) var(--sp-6); }
  .footer h2, .footer h3 { color:#fff; }
  .footer a:hover { color:#fff; text-decoration: underline; text-underline-offset: 3px; }
  .footer__grid { display: grid; gap: var(--sp-7); }
  .footer__brand .brand__name { color:#fff; }
  .footer__brand p { color: #aebbb3; margin-top: var(--sp-3); max-width: 38ch; }
  .footer__col h3 { font-size: var(--fs-400); text-transform: uppercase; letter-spacing: 0.1em; color:#9fb0a7; margin-bottom: var(--sp-4); }
  .footer__col ul { display: grid; gap: var(--sp-2); }
  .footer__contact { display: grid; gap: var(--sp-3); }
  .footer__contact a, .footer__contact span { display:flex; gap: var(--sp-2); align-items:center; }
  .footer__contact svg { inline-size: 18px; block-size:18px; flex:none; color: var(--c-green-400); }
  .footer__qr {
    display: flex; gap: var(--sp-4); align-items: center;
    background: rgba(255,255,255,0.05); padding: var(--sp-4); border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .footer__qr img { inline-size: 84px; block-size: 84px; border-radius: var(--r-sm); background:#fff; }
  .footer__qr p { font-size: var(--fs-300); color:#9fb0a7; }
  .footer__social { display:flex; gap: var(--sp-3); margin-top: var(--sp-4); }
  .social-link {
    inline-size: 42px; block-size: 42px; border-radius: 50%; display:grid; place-items:center;
    background: rgba(255,255,255,0.08); transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  }
  .social-link:hover { background: var(--c-brand); transform: translateY(-3px); }
  .social-link svg { inline-size: 20px; block-size:20px; }
  /* riga note legali — separatore sopra il footer-bottom */
  .footer__legal {
    margin-top: var(--sp-7); padding-top: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
    font-size: var(--fs-300);
  }
  .footer__legal a { color: #9fb0a7; }
  .footer__legal a:hover { color: #fff; }
  .footer__bottom {
    margin-top: var(--sp-4);
    display:flex; flex-wrap:wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
    font-size: var(--fs-300); color:#8b9b92;
  }
  .footer__credit a { color: #9fb0a7; text-decoration: underline; }
  .footer__credit a:hover { color: #fff; }

  @media (min-width: 760px) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  }

  /* QR code: utile solo da desktop. Sparisce su tablet e telefono. */
  @media (max-width: 1024px) {
    .footer__qr { display: none; }
  }
}

/* ================================================================ MOTION */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero__scroll svg { animation: none !important; }
    .btn:hover, .card:hover { transform: none; }
  }
}

/* ------------------------------------------------------- bobbing arrow */
@layer motion {
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  .hero__scroll svg { animation: bob 1.8s var(--ease-out) infinite; }
}

/* ------------------------------------------------------------ UTILITIES */
@layer utilities {
  .visually-hidden {
    position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .mt-2 { margin-top: var(--sp-2); }
  .mt-4 { margin-top: var(--sp-4); }
  .mt-6 { margin-top: var(--sp-6); }
  .mt-8 { margin-top: var(--sp-8); }
  .text-center { text-align:center; }
}

/* ===================================================== PAGE HERO (interne)
   Banner di intestazione condiviso per le pagine interne (Chi siamo,
   Territorio, San Rocco, Galleria, News). Compatto, sotto l'header sticky. */
@layer sections {
  .page-hero {
    position: relative; isolation: isolate; color: #fff; overflow: hidden;
    display: flex; align-items: flex-end;
    min-block-size: clamp(280px, 42vh, 440px);
  }
  .page-hero__bg { position: absolute; inset: 0; z-index: -2; }
  .page-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 42%; }
  .page-hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,26,18,0.30) 0%, rgba(8,26,18,0.22) 40%, rgba(6,22,15,0.72) 100%);
  }
  .page-hero__inner { padding-block: clamp(var(--sp-6), 4vw, var(--sp-8)); max-width: 60ch; }
  .page-hero .kicker { color: #fff; }
  .page-hero .kicker::before { background: var(--c-sun-400); }
  .page-hero h1 {
    font-family: var(--font-display); font-weight: var(--fw-extra);
    font-size: var(--fs-800); line-height: var(--lh-tight); letter-spacing: -0.02em;
    margin-top: var(--sp-3); color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35);
  }
  .page-hero__lead {
    margin-top: var(--sp-4); font-size: var(--fs-500); line-height: var(--lh-snug);
    color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.3);
  }
  /* Breadcrumb sopra il titolo */
  .breadcrumb { display:flex; flex-wrap:wrap; gap: var(--sp-2); align-items:center;
    font-size: var(--fs-300); color: rgba(255,255,255,0.85); margin-bottom: var(--sp-3); }
  .breadcrumb a { color: rgba(255,255,255,0.85); }
  .breadcrumb a:hover { color:#fff; }
  .breadcrumb [aria-current] { color:#fff; font-weight: var(--fw-semi); }

  /* Colonna di testo leggibile (es. storia San Rocco) */
  .prose { max-width: 68ch; }
  .prose > * + * { margin-top: var(--sp-4); }
  .prose p { color: var(--c-text-soft); line-height: var(--lh-body); }
  .prose h2 { font-family: var(--font-display); font-size: var(--fs-600); color: var(--c-ink); margin-top: var(--sp-6); }
  .prose h3 { font-family: var(--font-display); font-size: var(--fs-500); color: var(--c-ink); margin-top: var(--sp-5); }

  .lede { font-size: var(--fs-500); line-height: var(--lh-snug); color: var(--c-text); }
}