/* Home S1 — esperienza a schermate (atmosfera + tipografia, non demo GSAP) */

.page-home--copy.home-s1-screens {
  --s1-pad-x: clamp(1.5rem, 7vw, 5rem);
  --s1-pad-y: clamp(1.75rem, 9vh, 5rem);
  --s1-ember: #991636;
  --s1-ember-soft: rgba(153, 22, 54, 0.34);
}

@media (max-width: 767px) {
  .page-home--copy.home-s1-screens {
    --s1-pad-x: 1rem;
    --s1-pad-y: 1.15rem;
  }

  .page-home--copy .s1-pin,
  .page-home--copy .s1-stage,
  .page-home--copy .lucanus-stage {
    max-width: 100%;
    overflow: hidden;
  }

  .page-home--copy .s1-panel {
    padding-right: calc(var(--s1-pad-x) + 1.2rem);
  }

  .page-home--copy .s1-progress {
    right: max(0.45rem, env(safe-area-inset-right));
  }

  .page-home--copy .s1-progress-dot {
    width: 0.34rem;
    height: 0.34rem;
    margin: 0.3rem 0;
  }

  .page-home--copy .s1-panel-mark {
    font-size: clamp(2.75rem, 18vw, 4.5rem);
    opacity: 0.06;
    right: max(0.65rem, env(safe-area-inset-right));
  }

  .page-home--copy .s1-panel--hero .s1-panel-inner,
  .page-home--copy .s1-panel-inner {
    max-width: 100%;
  }

  .page-home--copy .s1-atm--grain {
    display: none;
  }

  .page-home--copy .lucanus-stage .s1-color-wash,
  .page-home--copy .home-section--pillars [data-pillar],
  .page-home--copy .s1-panel {
    will-change: auto;
  }

  .page-home--copy .s1-panel--hero .logo-container,
  .page-home--copy .s1-panel--hero .hero-logo-static {
    width: min(200px, 58vw);
    margin-bottom: 1.1rem;
  }
}

.page-home--copy .s1-story {
  position: relative;
  z-index: 2;
}

.page-home--copy .s1-pin {
  position: relative;
  width: 100%;
  background: transparent;
}

/* Atmosfera: palette; canvas 3D è figlio diretto di .s1-pin */
.page-home--copy .s1-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.page-home--copy .s1-bg-palette {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  /* il colore piatto vive su .lucanus-stage */
}

/* —— Lucanus stage fisso (S1 → away → services) —— */
.page-home--copy .lucanus-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  background: var(--s1-bg, #020202);
  transition: background-color 0.45s ease;
}

.page-home--copy .lucanus-stage.is-away {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-home--copy .lucanus-stage .s1-lucanus-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 2;
}

.page-home--copy .lucanus-stage .s1-lucanus-canvas.is-ready,
.page-home--copy .lucanus-stage .s1-lucanus-canvas[style*="opacity: 1"] {
  opacity: 1;
}

.page-home--copy .lucanus-stage .s1-lucanus-canvas.is-failed {
  opacity: 0;
}

.page-home--copy .lucanus-stage .s1-color-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: #991636;
  opacity: 0;
  mix-blend-mode: color;
  will-change: background-color, opacity;
}

.page-home--copy .s1-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

.page-home--copy .s1-atm {
  position: absolute;
  inset: 0;
}

.page-home--copy .s1-atm--grain {
  z-index: 2;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

.page-home--copy .s1-atm--vignette {
  z-index: 2;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 45%, rgba(3, 3, 3, 0.45) 100%);
  pointer-events: none;
}

.page-home--copy .s1-panel {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: var(--s1-pad-y) var(--s1-pad-x);
  padding-right: calc(var(--s1-pad-x) + 2rem);
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

.page-home--copy:not(.home-s1-screens):not(.home-s1-reduced) .s1-panel {
  opacity: 0;
  visibility: hidden;
}

.page-home--copy:not(.home-s1-screens):not(.home-s1-reduced) .s1-panel.is-active {
  opacity: 1;
  visibility: visible;
}

.page-home--copy.home-s1-screens .s1-panel {
  visibility: hidden;
}

.page-home--copy.home-s1-screens .s1-panel.is-active,
.page-home--copy.home-s1-screens .s1-panel.is-busy {
  visibility: visible;
  pointer-events: auto;
}

.page-home--copy .s1-panel-mark {
  position: absolute;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  font-family: var(--font-serif, "Exo 2", sans-serif);
  font-weight: 800;
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}

.page-home--copy .s1-panel-inner {
  position: relative;
  width: 100%;
  max-width: min(100%, 54rem);
  z-index: 1;
  box-sizing: border-box;
}

.page-home--copy .s1-accent-bar {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 1.5rem;
  background: var(--s1-ember);
  transform-origin: left center;
}

/* —— Varianti tipografiche per schermata —— */
.page-home--copy .s1-panel--hero {
  align-items: flex-end;
  padding-bottom: max(3.5rem, 12vh);
}

.page-home--copy .s1-panel--hero .logo-container,
.page-home--copy .s1-panel--hero .hero-logo-static {
  width: min(260px, 68vw);
  height: auto;
  margin: 0 0 1.5rem;
  display: block;
}

.page-home--copy .s1-panel--hero .hero-heading,
.page-home--copy .s1-panel--hero #hero-title {
  margin: 0;
  font-family: var(--font-serif, "Exo 2", sans-serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 4.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #f2f2f2;
  line-height: 1.02;
  perspective: 600px;
}

.page-home--copy .s1-panel--hero .hero-subtitle {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: #a8a8a8;
}

.page-home--copy .s1-word {
  display: inline-block;
  will-change: transform, opacity;
}

.page-home--copy .s1-scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2.75rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6e6e6e;
  font-family: var(--font-sans, Montserrat, sans-serif);
}

.page-home--copy .s1-scroll-cue-line {
  display: block;
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(180deg, rgba(234, 234, 234, 0.55), transparent);
}

.page-home--copy .s1-panel--thesis .home-kicker {
  display: block;
  margin: 0 0 1.15rem;
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
  font-family: var(--font-sans, Montserrat, sans-serif);
}

.page-home--copy .s1-panel--thesis h1 {
  margin: 0;
  font-family: var(--font-serif, "Exo 2", sans-serif);
  font-weight: 800;
  font-size: clamp(2.35rem, 8.5vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #f0f0f0;
  max-width: 12ch;
}

.page-home--copy .s1-panel--thesis .s1-line {
  display: block;
}

.page-home--copy .s1-panel--punch {
  align-items: center;
}

.page-home--copy .s1-panel--punch .s1-punch {
  margin: 0;
  font-family: var(--font-serif, "Exo 2", sans-serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 5.2vw, 2.85rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ececec;
  max-width: 16ch;
}

.page-home--copy .s1-panel--story p {
  margin: 0;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  line-height: 1.55;
  color: #cfcfcf;
  max-width: 34ch;
}

.page-home--copy .s1-panel--emphasis {
  justify-content: center;
  text-align: left;
}

.page-home--copy .s1-panel--emphasis .s1-panel-inner {
  max-width: min(100%, 40rem);
}

.page-home--copy .s1-panel--emphasis p {
  margin: 0;
  font-family: var(--font-serif, "Exo 2", sans-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 5.8vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ddd;
  max-width: 14ch;
}

.page-home--copy .s1-panel--land p {
  margin: 0;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  line-height: 1.5;
  color: #d2d2d2;
  max-width: 28ch;
}

/* Sottolineatura chiave: spessa, accesa, leggermente storta */
.page-home--copy .s1-mark {
  --mark-band: 54%;
  --mark-fill: rgba(255, 31, 77, 0.6);
  --mark-tilt: 182.2deg;
  position: relative;
  display: inline;
  color: inherit;
  font-weight: 650;
  padding: 0 0.05em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(
    var(--mark-tilt),
    transparent var(--mark-band),
    var(--mark-fill) var(--mark-band),
    var(--mark-fill) 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left bottom;
  transition: background-size 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-home--copy .s1-mark.is-on {
  background-size: 100% 100%;
}

.page-home--copy .s1-mark--strong {
  --mark-fill: #050505;
  --mark-band: 48%;
  --mark-tilt: 177.8deg;
  color: #fff;
  font-weight: 800;
}

.page-home--copy .s1-panel p .s1-mark:nth-of-type(2n) {
  --mark-tilt: 178.4deg;
  --mark-fill: rgba(224, 24, 64, 0.6);
}

.page-home--copy .s1-panel p .s1-mark:nth-of-type(3n) {
  --mark-tilt: 183deg;
  --mark-fill: rgba(255, 51, 92, 0.6);
}

/* Pannelli su fondo rosso piatto */
.page-home--copy .s1-pin.s1-tone-red .s1-panel--thesis h1,
.page-home--copy .s1-pin.s1-tone-red .s1-panel--thesis .home-kicker,
.page-home--copy .s1-pin.s1-tone-red .s1-panel--story p,
.page-home--copy .s1-pin.s1-tone-red .s1-panel--land p {
  color: #f0e8eb;
}

.page-home--copy .s1-pin.s1-tone-red .s1-mark {
  --mark-fill: #0a0a0a;
  --mark-band: 50%;
  --mark-tilt: 181.5deg;
}

.page-home--copy .s1-pin.s1-tone-red .s1-mark--strong {
  --mark-fill: #000;
  --mark-band: 46%;
  --mark-tilt: 178deg;
  color: #fff;
}

.page-home--copy .s1-pin.s1-tone-red .s1-panel p .s1-mark:nth-of-type(2n) {
  --mark-fill: #111;
  --mark-tilt: 177.5deg;
}

.page-home--copy .s1-pin.s1-tone-red .s1-accent-bar {
  background: #f2f2f2;
}

.page-home--copy .s1-pin.s1-tone-red .s1-panel-mark {
  color: rgba(255, 255, 255, 0.12);
}

.page-home--copy .s1-panel--cta {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-home--copy .s1-panel--cta .s1-panel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 28rem;
}

.page-home--copy .s1-cta-lead {
  margin: 0;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
}

.page-home--copy .s1-panel--cta .trk-cta {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  border-bottom-width: 2px !important;
  padding: 0.35rem 0;
}

.page-home--copy .s1-progress {
  position: absolute;
  right: max(0.9rem, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.page-home--copy .s1-progress::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 0;
}

.page-home--copy .s1-progress-dot {
  position: relative;
  z-index: 1;
  width: 0.42rem;
  height: 0.42rem;
  margin: 0.38rem 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.page-home--copy .s1-progress-dot.is-active {
  background: #eaeaea;
  transform: scale(1.45);
  box-shadow: 0 0 0 3px rgba(153, 22, 54, 0.35);
}

.page-home--copy.home-s1-screens main#content-flow {
  padding-top: 3.5rem;
}

.page-home--copy .trk-cta[data-wiggle] {
  transform-origin: 50% 100%;
}

.page-home--copy.home-s1-reduced .s1-atmosphere {
  display: none;
}

.page-home--copy.home-s1-reduced .lucanus-stage,
.page-home--copy.home-s1-reduced .s1-lucanus-canvas {
  display: none;
}

.page-home--copy.home-s1-reduced .s1-stage {
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: calc(3rem + var(--scroll-gap, 0px));
  padding: 4rem var(--s1-pad-x, 1.5rem);
}

.page-home--copy.home-s1-reduced .s1-panel {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  display: block !important;
  padding: 0;
}

.page-home--copy.home-s1-reduced .s1-panel-mark,
.page-home--copy.home-s1-reduced .s1-progress {
  display: none;
}

/* —— Flow dopo S1 —— */
.page-home--copy .home-section--pillars [data-pillar] {
  position: relative;
  padding-left: 0.9rem;
  border-left: 2px solid transparent;
  will-change: transform, opacity;
}

.page-home--copy .home-section--pillars [data-pillar].is-lit {
  border-left-color: #991636;
}

.page-home--copy .home-section--services {
  padding-top: clamp(2rem, 8vh, 4rem);
}

/* Solo la sezione services si sposta a sinistra — mai tutto #content-flow
   (altrimenti i pillars ancora in vista “scattano” a sinistra). */
@media (min-width: 960px) {
  .page-home--copy.home-lucanus-services .home-section--services {
    max-width: min(46vw, 30rem);
    margin-right: auto;
    margin-left: 0;
  }
}