/* INSEGNE BRESCIA - LANDING v65 - livello estetico
   Caricato DOPO landing.css: non modifica il codice della v64, lo sovrascrive.
   Per tornare alla v64 basta togliere questo file, v65.js e i blocchi marcati «v65» nell'HTML. */

:root{
  /* Un solo sistema di movimento: 3 durate, 2 curve */
  --ib-ease: cubic-bezier(.22,.8,.24,1);       /* interazioni */
  --ib-ease-out: cubic-bezier(.16,1,.3,1);     /* comparse */
  --ib-fast: .18s;
  --ib-med: .32s;
  --ib-slow: .6s;

  --ib-navy: #070a13;
  --ib-navy-2: #0b1030;
  --ib-blue: #1f46ff;
  --ib-violet: #7d2cff;
  --ib-orange: #ff8a00;
}

/* =========================================================
   1. MOVIMENTO — comparse più brevi, niente sfocatura
   ========================================================= */
html .reveal,
html .reveal-fast{
  filter:none!important;
  transform:translate3d(0,16px,0)!important;
  transition:opacity var(--ib-slow) var(--ib-ease-out), transform var(--ib-slow) var(--ib-ease-out)!important;
}
html .reveal-fast{ transform:translate3d(0,10px,0)!important; }
html .reveal.in-view,
html .reveal-fast.in-view{ opacity:1!important; transform:none!important; }

html.v58-motion-ready .v58-enter{
  transform:translate3d(0,14px,0)!important;
  filter:none!important;
  transition:opacity .55s var(--ib-ease-out) var(--v58-delay,0ms),
             transform .55s var(--ib-ease-out) var(--v58-delay,0ms),
             box-shadow var(--ib-med) var(--ib-ease)!important;
}
html.v58-motion-ready .v58-enter.v58-in{ transform:none!important; }

/* =========================================================
   2. MOVIMENTO — effetti continui decorativi spenti
   (restano: parola che ruota, logo che si accende, freccia di scorrimento, frecce dei ruoli)
   ========================================================= */
.band.dark::before, .band.darkish::before,
.hero-watermark img, .hero-watermark svg,
#testimonianze .testi-particle,
.accent, .h1b, .rainbow-strong, .rainbow-black-strong, hr.rainbow-sep, .grad-text,
.camp-card-badge,
.section-rule .dot, .npt-rule .dot, .section-pre .dot,
#vedi-prima .example-number,
#vedi-prima .copy-solution::before,
.pbtn.active::after,
.agit-maltempo-outer{
  animation:none!important;
}
#testimonianze .testi-particle{ display:none!important; }

/* Freccia di scorrimento dell'hero: un solo movimento, lento */
.atf-scroll-link svg, .atf-scroll-chevron{ animation-duration:2.4s!important; }

/* =========================================================
   3. INTERAZIONI — transizioni solo su proprietà leggere
   (prima alcuni pulsanti animavano «tutto», anche dimensione del testo e margini)
   ========================================================= */
.cta-btn, .btn, .btn-primary, .landing-cta-btn, .topbar-cta, .inline-pill-btn,
.simulazione-tab, .contattaci-card, .contatto-card{
  transition:transform var(--ib-med) var(--ib-ease),
             box-shadow var(--ib-med) var(--ib-ease),
             background-color var(--ib-med) var(--ib-ease),
             border-color var(--ib-med) var(--ib-ease),
             color var(--ib-fast) linear,
             opacity var(--ib-med) var(--ib-ease)!important;
}
.cta-btn:hover, .btn-primary:hover, .landing-cta-btn:hover, .topbar-cta:hover{ transform:translateY(-2px); }
.cta-btn:active, .btn-primary:active, .landing-cta-btn:active, .topbar-cta:active{ transform:translateY(0); transition-duration:var(--ib-fast)!important; }
.contattaci-card:hover, .contatto-card:hover{ transform:translateY(-3px); }

/* =========================================================
   4. HERO — video delle insegne realizzate come sfondo
   ========================================================= */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero > .container{ position:relative; z-index:1; }
.hero .hero-watermark{ display:none!important; }
.hero.band.dark::before{ display:none!important; } /* l'«aurora» blu-viola della v64 velava il video */
.hero h1, .hero .hero-pre, .hero p, .hero li{ text-shadow:0 2px 18px rgba(0,0,0,.55); }
/* !important: nella v64 una regola rende «relative» tutti i figli diretti dell'hero */
.hero > .ib-hero-media{
  position:absolute!important; inset:0!important; z-index:-1!important; margin:0!important; pointer-events:none;
  background:#070a13 url("../video/hero-insegne-poster.jpg") center/cover no-repeat;
}
.ib-hero-media video{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity 1.2s var(--ib-ease-out);
}
.ib-hero-media.is-playing video{ opacity:1; }
.ib-hero-media::after{ /* velo neutro, non blu: più scuro solo dove c'è il testo */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.7) 42%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 80%, rgba(0,0,0,.35) 100%);
}
@media (max-width: 760px){
  .ib-hero-media::after{ background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.62) 60%, rgba(0,0,0,.72) 100%); }
}

/* =========================================================
   5. SFONDI FOTOGRAFICI IN PARALLASSE (dentro le sezioni scure, che restano scure)
   La foto è alta circa una schermata e scorre più lentamente della pagina;
   i bordi sfumano nel fondo della sezione, qualunque esso sia.
   ========================================================= */
.ib-parallax-host{ position:relative; overflow:hidden; isolation:isolate; }
.ib-parallax-host > .ib-parallax{
  position:absolute!important; left:0; right:0; top:0; height:125vh; margin:0!important;
  z-index:-1!important; pointer-events:none; will-change:transform;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
}
.ib-parallax img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.4; filter:saturate(1.05) contrast(1.05);
}
.ib-parallax::after{ content:""; position:absolute; inset:0; background:rgba(7,10,19,.42); }

/* =========================================================
   6. VETRINA DEI LAVORI (al posto dei 15 segnaposto)
   ========================================================= */
#galleria .ib-vetrina{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:clamp(150px, 15.5vw, 236px);
  gap:clamp(10px, 1.1vw, 16px);
  margin:clamp(26px, 3vw, 40px) 0 clamp(18px, 2vw, 28px);
}
.ib-tile{
  position:relative; overflow:hidden; display:block;
  border:0; padding:0; margin:0; border-radius:18px;
  background:#0b1030; color:#fff; text-align:left; font:inherit; cursor:pointer;
  box-shadow:0 14px 34px rgba(11,16,32,.16);
  transform:translateZ(0);
}
.ib-tile--big{ grid-column:span 2; grid-row:span 2; }
.ib-tile--tall{ grid-row:span 2; }
.ib-tile--wide{ grid-column:span 2; }
.ib-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.001);
  transition:transform 1s var(--ib-ease-out), filter var(--ib-slow) var(--ib-ease);
}
.ib-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,10,19,0) 45%, rgba(7,10,19,.82) 100%);
  transition:opacity var(--ib-med) var(--ib-ease);
}
.ib-tile-cap{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.ib-tile-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:rgba(255,138,0,.95); color:#fff; line-height:1.2;
}
.ib-tile-name{
  font-weight:800; font-size:clamp(14px, 1.2vw, 19px); line-height:1.15; letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.ib-tile--big .ib-tile-name{ font-size:clamp(18px, 1.8vw, 26px); }
.ib-tile-more{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--ib-med) var(--ib-ease), transform var(--ib-med) var(--ib-ease);
}
.ib-tile:hover img, .ib-tile:focus-visible img{ transform:scale(1.06); }
.ib-tile:hover .ib-tile-more, .ib-tile:focus-visible .ib-tile-more{ opacity:.95; transform:none; }
.ib-tile:focus-visible{ outline:3px solid var(--ib-orange); outline-offset:3px; }

/* comparsa a cascata, una volta sola */
html.ib-motion .ib-tile{ opacity:0; transform:translate3d(0,18px,0); }
html.ib-motion .ib-tile.is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ib-ease-out) var(--d,0ms), transform .7s var(--ib-ease-out) var(--d,0ms), box-shadow var(--ib-med) var(--ib-ease);
}
.ib-tile:hover{ box-shadow:0 20px 44px rgba(11,16,32,.24); }

@media (max-width: 760px){
  #galleria .ib-vetrina{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:150px; gap:10px; }
  .ib-tile{ border-radius:14px; }
  .ib-tile-cap{ left:12px; right:12px; bottom:10px; }
  .ib-tile-more{ display:none; }
}

/* =========================================================
   7. CHI PREFERISCE MENO MOVIMENTO (impostazione del sistema)
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .ib-hero-media video{ display:none; }
  .ib-parallax{ transform:none!important; }
  html.ib-motion .ib-tile{ opacity:1; transform:none; }
}