/* GIAL 2026 — foto vere dei Castelli Romani: hero cinematografica, storia con le foto delle epoche, «Cosa facciamo» su sfondo fotografico. */

/* Hero: foto a tutto schermo con movimento di camera (canvas WebGL sopra la prima foto) */
.g-hero--scene { background: #1c1114; color: #fff; }
.g-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1c1114; --px: 0px; --py: 0px; }
.g-slide { position: absolute; inset: -3%; margin: 0; opacity: 0; transform: translate3d(var(--px), var(--py), 0); transition: transform 0.9s var(--g-ease); }
.g-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.g-slide.is-prev { opacity: 1; z-index: 1; }
.g-slide.is-active { opacity: 1; z-index: 2; animation: g-iris 1.5s cubic-bezier(0.7, 0, 0.2, 1) both; }
.g-slide.is-active img, .g-slide.is-prev img { animation: g-kb 9s linear both; }
.g-slide--0 { --kx: -2.2%; --ky: -1%; --o: 30% 50%; } .g-slide--1 { --kx: 2.4%; --ky: -0.6%; --o: 70% 55%; }
.g-slide--2 { --kx: -1.6%; --ky: 1.4%; --o: 50% 40%; } .g-slide--3 { --kx: 1.8%; --ky: 1%; --o: 60% 60%; }
@keyframes g-kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.13) translate(var(--kx, -1.5%), var(--ky, -1%)); } }
@keyframes g-iris { from { clip-path: circle(0% at var(--o, 70% 50%)); } to { clip-path: circle(150% at var(--o, 70% 50%)); } }
.g-slides-meta { position: absolute; z-index: 6; right: max(24px, 4vw); bottom: 86px; display: flex; align-items: center; gap: 18px; color: #fff; font: 500 0.82rem var(--g-sans); letter-spacing: 0.16em; text-transform: uppercase; }
body[data-ms-layout="gial2026"] .g-slides-meta :is(span, button) { --ink: #fff; --ink-strong: #fff; }
.g-place { font: 300 clamp(1.1rem, 2vw, 1.6rem) var(--g-display); letter-spacing: 0.02em; text-transform: none; opacity: 0; }
.g-place.is-in { animation: g-place 1.4s var(--g-ease) 0.5s both; }
@keyframes g-place { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.g-count { opacity: 0.7; }
.g-dots { display: flex; gap: 7px; }
.g-dots button { width: 22px; height: 3px; border: 0; padding: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.35); cursor: pointer; }
.g-dots button.is-on { background: #fff; }
.g-scene-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(90deg, rgba(34, 6, 14, 0.7) 0%, rgba(34, 6, 14, 0.42) 38%, rgba(34, 6, 14, 0) 75%),
  linear-gradient(180deg, rgba(20, 6, 10, 0.35) 0%, rgba(20, 6, 10, 0) 25%, rgba(20, 6, 10, 0) 70%, var(--g-paper) 100%); }
/* testi chiari sulla foto */
body[data-ms-layout="gial2026"] .g-hero--scene { --ink: #fff; --ink-strong: #fff; }
body[data-ms-layout="gial2026"] .g-hero--scene .g-kicker { --ink: #f0d3c2; --ink-strong: #f0d3c2; }
body[data-ms-layout="gial2026"] .g-hero--scene :is(.g-btn--ghost) { --ink: #fff; --ink-strong: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(6px); }
body[data-ms-layout="gial2026"] .g-hero--scene .g-scroll-hint { --ink: #fff; --ink-strong: #fff; }
.g-hero--scene .g-hero-logo img { filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55)); }
.g-hero--scene .g-hero-logo::before { border-color: rgba(255, 255, 255, 0.4); }
.g-hero--scene .g-hills { display: none; }
.g-hero--scene .g-display, .g-hero--scene .g-lead { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }

/* Storia: ogni tappa e' una foto, con la grana della sua epoca */
.g-story-card { color: #fff; background: #1c1114; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; }
.g-story-card::before { z-index: 4; }
.g-story-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(20, 8, 14, 0) 20%, rgba(20, 8, 14, 0.88) 100%); pointer-events: none; }
.g-story-text { position: relative; z-index: 3; }
body[data-ms-layout="gial2026"] .g-story-card { --ink: #fff; --ink-strong: #fff; }
body[data-ms-layout="gial2026"] .g-story-card .g-story-year { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.95); }
.g-story-card p { opacity: 0.92; }
.g-era { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.g-era img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 40%; animation: g-kb 16s ease-in-out infinite alternate; }
.g-era-grain { position: absolute; inset: 0; pointer-events: none; }
.g-era-light { position: absolute; top: 0; bottom: 0; left: -60%; width: 220%; pointer-events: none; }
.g-era-grain { opacity: 0.35; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.2px), radial-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1.2px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; animation: g-grain 0.8s steps(4) infinite; }
.g-era-light { background: linear-gradient(115deg, transparent 20%, rgba(255, 220, 170, 0.28) 45%, transparent 70%); mix-blend-mode: soft-light; animation: g-sweep 9s ease-in-out infinite alternate; }
@keyframes g-grain { 25% { transform: translate(-3px, 2px); } 50% { transform: translate(2px, -3px); } 75% { transform: translate(-2px, -2px); } }
@keyframes g-sweep { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
/* un trattamento per epoca */
.g-era--1974 img { filter: grayscale(1) sepia(0.55) contrast(1.1) brightness(0.95); }
.g-era--1974 .g-era-grain { opacity: 0.3; }
.g-era--1990 img { filter: saturate(1.1) contrast(1.05); }

.g-era--2008 img { filter: saturate(1.1) contrast(1.05); }
.g-era--2008 .g-era-grain { display: none; }
.g-era--2018 img { filter: saturate(1.2) contrast(1.08) brightness(1.02); }
.g-era--2018 .g-era-grain { display: none; }
.g-era--2025 img { filter: saturate(1.15) contrast(1.1) hue-rotate(-6deg); }
.g-era--2025 .g-era-grain { display: none; }
.g-story-card:hover .g-era img { animation-duration: 9s; }

/* Cosa facciamo: foto panoramica sfumata sotto le schede */
.g-services-wrap { position: relative; overflow: hidden; background: #1c1114; }
.g-services-wrap > .g-services { position: relative; z-index: 2; }
.g-services-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.g-services-art img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; filter: saturate(0.85) contrast(1.05); }
.g-services-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 6, 14, 0.6) 0%, rgba(60, 8, 20, 0.4) 45%, rgba(34, 6, 14, 0.85) 100%); }
body[data-ms-layout="gial2026"] .g-services-wrap .g-section-head { --ink: #fff; --ink-strong: #fff; }
body[data-ms-layout="gial2026"] .g-services-wrap .g-section-head .g-kicker { --ink: #f0d3c2; --ink-strong: #f0d3c2; }
body[data-ms-layout="gial2026"] .g-services-wrap .g-center .g-link { --ink: #f0d3c2; --ink-strong: #f0d3c2; }
.g-services-wrap .g-card:not(.g-card--wide) { background: rgba(255, 253, 252, 0.1); border-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: #fff; }
body[data-ms-layout="gial2026"] .g-services-wrap .g-card { --ink: #fff; --ink-strong: #fff; }
.g-services-wrap .g-card--wide { background: linear-gradient(135deg, rgba(122, 11, 28, 0.92), rgba(77, 10, 20, 0.92)); }
.g-services-wrap .g-card:not(.g-card--wide) .g-card-ico { color: #f0d3c2; }
.g-services-wrap .g-card:hover { border-color: rgba(255, 255, 255, 0.5); }
.g-services .g-card { transition: transform 0.3s var(--g-ease), box-shadow 0.4s, border-color 0.4s; }
.g-services .g-card .g-card-ico { transition: transform 0.6s var(--g-ease); }
.g-services .g-card:hover .g-card-ico { transform: translateY(-4px) rotate(-8deg) scale(1.12); }
.g-services .g-card.is-in .g-card-ico { animation: g-iconpop 0.9s var(--g-ease) both; }
.g-services .g-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #f0d3c2, var(--g-gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--g-ease); }
.g-services .g-card:hover::after { transform: scaleX(1); }
@keyframes g-iconpop { from { opacity: 0; transform: translateY(14px) scale(0.6) rotate(-12deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .g-slide img, .g-era img, .g-era-grain, .g-era-light, .g-services .g-card .g-card-ico { animation: none !important; }
}
@media (max-width: 860px) {
  .g-story-card { min-height: 430px; }
  .g-scene-veil { background: linear-gradient(180deg, rgba(34, 6, 14, 0.7) 0%, rgba(34, 6, 14, 0.55) 60%, rgba(34, 6, 14, 0.2) 85%, var(--g-paper) 100%); }
}
html:not(#_):not(#_) .g-hero--scene .g-btn--ghost, html:not(#_):not(#_) .g-hero--scene .g-btn--ghost span { color: #fff !important; }