/* Home di test "Pietra e luce" — caricato dopo main-bundle.css, solo home-test.html */
.ht {
  --ht-ivory: #f6f1e7;
  --ht-travertine: #e6dcc9;
  --ht-stone: #cfc2a9;
  --ht-ink: #2a2622;
  --ht-ink-soft: #5a5148;
  --ht-accent: #8a4a1f;
  --ht-font-serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  background: var(--ht-ivory);
  color: var(--ht-ink);
}

/* Titoli serif */
.ht .hero__title,
.ht .section-title,
.ht .territorio__heading,
.ht .cards-grid__heading,
.ht .alternate__heading,
.ht .territorio__stat-number {
  font-family: var(--ht-font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Etichette a capitolo (CSS puro, non nel DOM) */
.ht .features-section .section-title::before,
.ht .territorio__tag::before,
.ht .cards-grid__heading::before,
.ht .alternate__heading::before,
.ht .blog-section .section-title::before {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-body, 'Niramit', sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ht-accent);
}
.ht .features-section .section-title::before { content: 'Capitolo I'; }
.ht .cards-grid__heading::before { content: 'Capitolo III'; }
.ht .alternate--image-left .alternate__heading::before { content: 'Capitolo IV'; }
.ht .alternate--image-right .alternate__heading::before { content: 'Capitolo V'; }
.ht .blog-section .section-title::before { content: 'Capitolo VI'; }
.ht .territorio__heading::before { content: 'Capitolo II'; display: block; margin-bottom: 10px; font-family: var(--font-body, 'Niramit', sans-serif); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ht-accent); }

/* Hero */
.ht #hero { border-radius: 0; min-height: min(86vh, 820px); }
.ht .hero__title {
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: 1.02;
  font-weight: 500;
}
.ht .hero__subtitle { font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.55; }
.ht .hero__tag {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 18px;
}
.ht .hero__title { font-size: clamp(2.4rem, 5.6vw, 5rem); }
.ht .hero__subtitle { max-width: 640px; text-wrap: balance; }
.ht #hero::before {           /* velo scuro dietro il testo per la leggibilità */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 70% 60% at 50% 52%, rgba(20, 16, 12, 0.55), rgba(20, 16, 12, 0.1) 75%);
  pointer-events: none;
}
.ht #hero::after {            /* sfuma verso l'avorio della pagina */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(246, 241, 231, 0), var(--ht-ivory));
  z-index: 3;
  pointer-events: none;
}

/* Sezioni su avorio / travertino */
.ht .features-section,
.ht .territorio,
.ht .cards-grid,
.ht .blog-section { background: var(--ht-ivory); color: var(--ht-ink); }
.ht .alternate { background: var(--ht-ivory); }
.ht .alternate--gray-bg { background: var(--ht-travertine); }

.ht .section-title,
.ht .territorio__heading,
.ht .cards-grid__heading,
.ht .alternate__heading { color: var(--ht-ink); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; }

.ht .territorio__tag { color: var(--ht-accent); letter-spacing: 0.22em; text-transform: uppercase; }
.ht .territorio__stat-number { font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--ht-accent); }
.ht .territorio__stat-unit,
.ht .territorio__stat-label,
.ht .cards-grid__subtitle,
.ht .alternate__subtitle,
.ht .alternate__text { color: var(--ht-ink-soft); }
.ht .territorio__link { color: var(--ht-accent); font-weight: 600; }
.ht .alternate__link { background: var(--ht-ink); color: #fff; font-weight: 600; }
.ht .alternate__link:hover { background: var(--ht-accent); color: #fff; }
.ht .territorio__stats { border-top: 1px solid var(--ht-stone); border-bottom: 1px solid var(--ht-stone); }

/* Card: angoli sobri, ombra calda */
.ht .cards-grid__card {
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(60, 40, 20, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ht .cards-grid__card:hover,
.ht .cards-grid__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(60, 40, 20, 0.24);
}
.ht .alternate__image { border-radius: 4px; box-shadow: 0 14px 36px rgba(60, 40, 20, 0.18); }

/* Blog e guida */
.ht .blog-section { border-top: 1px solid var(--ht-stone); }

@media (prefers-reduced-motion: reduce) {
  .ht .cards-grid__card { transition: none; }
}

/* ---- Strati hero ---- */
.ht .ht-hero__layer { position: absolute; left: 0; width: 100%; pointer-events: none; will-change: transform; }
.ht .ht-hero__haze {
  top: 0; height: 100%; z-index: 2;
  background: radial-gradient(ellipse 80% 45% at 30% 20%, rgba(255, 236, 200, 0.28), rgba(255, 236, 200, 0) 70%);
}
.ht .ht-hero__ridge { bottom: -1px; height: clamp(70px, 13vw, 190px); z-index: 3; }
.ht .ht-hero__ridge--far path { fill: rgba(246, 241, 231, 0.55); }
.ht .ht-hero__ridge--near path { fill: var(--ht-ivory); }
.ht #hero::after { height: 8%; z-index: 2; }
.ht-motion .ht #hero .hero__background { will-change: transform; transform: scale(1.12); }

/* ---- Rivelazioni (solo con JS e senza reduced-motion) ---- */
.ht-motion .ht [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 64px, 0) scale(0.96);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--ht-i, 0) * 140ms);
}
.ht-motion .ht .alternate--image-left .alternate__image-wrapper[data-reveal] { transform: translate3d(-90px, 0, 0); }
.ht-motion .ht .alternate--image-right .alternate__image-wrapper[data-reveal] { transform: translate3d(90px, 0, 0); }
.ht-motion .ht .alternate__content[data-reveal] { transform: translate3d(0, 40px, 0); }
.ht-motion .ht [data-reveal].is-in { opacity: 1; transform: none; }
/* Titoli: scorrono da sinistra con maschera */
.ht-motion .ht .section-title[data-reveal], .ht-motion .ht .territorio__heading[data-reveal], .ht-motion .ht .cards-grid__heading[data-reveal] {
  transform: translate3d(-48px, 0, 0); clip-path: inset(0 100% 0 0);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(.2,.7,.2,1), clip-path 1.1s cubic-bezier(.2,.7,.2,1);
}
.ht-motion .ht .section-title[data-reveal].is-in, .ht-motion .ht .territorio__heading[data-reveal].is-in, .ht-motion .ht .cards-grid__heading[data-reveal].is-in { clip-path: inset(0 -5% 0 0); }

/* ---- Intro hero ---- */
@keyframes ht-rise { from { opacity: 0; transform: translate3d(0, 46px, 0); } to { opacity: 1; transform: none; } }
@keyframes ht-zoom { from { transform: scale(1.35); } to { transform: scale(1.12); } }
.ht-motion .ht .hero__tag, .ht-motion .ht .hero__title, .ht-motion .ht .hero__subtitle, .ht-motion .ht .hero__buttons {
  animation: ht-rise 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.ht-motion .ht .hero__tag { animation-delay: .15s; }
.ht-motion .ht .hero__title { animation-delay: .35s; }
.ht-motion .ht .hero__subtitle { animation-delay: .6s; }
.ht-motion .ht .hero__buttons { animation-delay: .85s; }
.ht-motion .ht #hero .hero__background.ht-intro { animation: ht-zoom 2.4s cubic-bezier(.2,.7,.2,1) both; }

/* ---- Barra di avanzamento ---- */
.ht-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 10000; background: var(--ht-accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---- Immagini con parallax interno e card inclinabili ---- */
.ht-motion .ht .alternate__image-wrapper { overflow: hidden; border-radius: 4px; }
.ht-motion .ht .alternate__image { will-change: transform; transform: scale(1.22); }
.ht-motion .ht .cards-grid__card { transform-style: preserve-3d; will-change: transform; }
.ht-motion .ht .territorio__stat-number { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- Percorso in tre tappe (sopra le card) ---- */
.ht .ht-route { position: relative; height: 60px; margin: 4px 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; align-items: center; justify-items: center; pointer-events: none; }
.ht .ht-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ht .ht-route path { fill: none; stroke: var(--ht-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.012 0.012; }
.ht-motion .ht .ht-route path { stroke-dasharray: 1; }
.ht .ht-route__dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--ht-accent); box-shadow: 0 0 0 5px var(--ht-ivory); }
.ht-motion .ht .ht-route__dot { opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease, transform 0.4s ease; }
.ht-motion .ht .ht-route__dot.is-in { opacity: 1; transform: none; }
@media (max-width: 767px) { .ht .ht-route { display: none; } }

@media (max-width: 767px) {
  .ht .ht-hero__haze { display: none; }
}