/* IKI V4 · restauro dei movimenti originari e leggibilità
   11 novembre 2026 · intervento mirato, sorgente V4 conservato via Git.
   Tre principi: parole sempre leggibili; paesaggio vivo anche senza scroll;
   oro, luce e movimento discreti come nelle indicazioni v10/V3. */

/* 01. SPAZIO DI LETTURA: sfondo semplice, fiori e luce lontani dal testo. */
.v4-hero,
.v4-hero.v3-hero{
  background:#fcfaf6;
  isolation:isolate;
}
.v4-hero-stage{
  background:linear-gradient(103deg,#fcfaf6 0%,#fcfaf6 39%,#fffaf0 67%,#faecc9 100%);
}
.v4-hero-atmosphere{
  display:none!important; /* elimina la doppia foto solarizzata e il velo sporco */
}
.v4-hero-light{
  background:
    radial-gradient(ellipse 35% 49% at 78% 33%,rgba(255,233,161,.62),rgba(252,229,175,.26) 52%,transparent 84%);
  filter:blur(22px);
  animation:iki-restauro-luce 9.5s ease-in-out infinite alternate;
  transform-origin:75% 38%;
}
.v4-hero-rays{
  opacity:.18;
  filter:blur(35px);
  background:repeating-conic-gradient(from 0deg at 74% 33%,
       rgba(249,211,138,.16) 0deg 2deg,
       transparent 3deg 15deg);
  mask-image:radial-gradient(ellipse 44% 47% at 74% 33%,#000,transparent 85%);
}
.v4-hero-silk{
  background:linear-gradient(90deg,
    #fcfaf6 0%,
    #fcfaf6 25%,
    rgba(252,250,246,.99) 37%,
    rgba(252,250,246,.94) 46%,
    rgba(252,250,246,.68) 57%,
    rgba(252,250,246,.24) 71%,
    transparent 84%);
}
.v4-hero-layout{
  position:relative;
  z-index:10;
}
.v4-hero-ident{
  position:relative;z-index:12;
}
.v4-hero-content{
  z-index:12;
  max-width:660px;
  position:relative;
  isolation:isolate;
}
.v4-hero-content h1{
  max-width:100%;
  text-shadow:none;
}
.v4-hero-bottom p,
.v4-hero-kicker{
  color:#263d50!important;
  opacity:1!important;
  text-shadow:none!important;
}
.v4-hero-bottom{max-width:475px}
.v4-hero-cta a{position:relative;z-index:12}
.v4-hero:after{opacity:.045} /* non sovrapporre grana fotografica alle parole */

/* 02. IL SOLE: dimensione naturale e raggio morbido, non un poster arancione. */
.v4-hero .v4-sun,
.v4-hero .v4-sun-art{
  top:13%;
  right:8%;
  width:clamp(265px,30vw,442px);
  opacity:.93;
  box-shadow:0 0 55px 8px rgba(252,209,129,.21);
  filter:saturate(.78) brightness(1.035);
  transform-origin:50% 50%;
  pointer-events:none;
}
.v4-hero .v4-sun-art::before{
  content:"";
  position:absolute;
  inset:-24%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,249,213,.46) 10%,
    rgba(255,229,157,.32) 41%,
    rgba(255,211,123,.13) 58%,
    transparent 73%);
  animation:iki-restauro-aura 8.4s ease-in-out infinite alternate;
  filter:blur(13px);
  pointer-events:none;
}
.v4-hero .v4-sun-art::after{
  content:"";
  position:absolute;inset:-14%;
  border-radius:50%;
  opacity:.29;
  background:repeating-conic-gradient(from 0deg,
     rgba(255,241,187,.45) 0deg 1.1deg,
     transparent 3.8deg 19deg);
  mask-image:radial-gradient(circle,
     transparent 24%,
     rgba(0,0,0,.35) 42%,
     transparent 72%);
  filter:blur(17px);
  animation:iki-restauro-raggi 56s linear infinite;
  pointer-events:none;
}
.v4-hero .v4-sun-art .v3-sun-disc{
  animation:
    iki-v3-rotate 54s linear infinite,
    iki-restauro-luminosita 8s ease-in-out infinite alternate;
  box-shadow:inset 0 0 60px rgba(255,248,197,.19);
}
.v4-hero .v4-sun-hotspot,
.v4-hero .v3-sun.v4-sun-hotspot{
  top:13%;
  right:8%;
  width:clamp(265px,30vw,442px);
  z-index:14;
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:50%;
  touch-action:manipulation;
}
.v4-hero .v4-sun-hotspot::before,
.v4-hero .v4-sun-hotspot::after{
  content:none!important;
  display:none!important;
}
.v4-hero .v4-sun-hotspot:hover{
  outline:1px solid rgba(185,144,85,.26);
  outline-offset:5px;
}
.v4-hero .v4-sun-hotspot:focus-visible{
  outline:3px solid #8162a5;
  outline-offset:6px;
}

/* 03. I FIORI: composizione a destra e vento a due velocità.
   GSAP sposta i CONTENITORI durante lo scroll;
   le keyframes muovono le IMMAGINI anche a pagina ferma. */
.v4-hero-flora-back{
  left:auto;
  right:-5%;
  bottom:-7%;
  width:min(76%,1100px);
  height:49%;
  opacity:.34;
  filter:blur(3.2px) saturate(.86);
  mask-image:linear-gradient(90deg,transparent 0%,#000 24% 100%);
  transform-origin:50% 100%;
}
.v4-hero-flora-front{
  left:auto;
  right:-4%;
  bottom:-7%;
  width:min(77%,1120px);
  height:45%;
  opacity:.94;
  filter:saturate(.88) contrast(1.01);
  mask-image:linear-gradient(90deg,transparent 0%,#000 27% 100%);
  transform-origin:50% 100%;
}
.v4-hero-flora-back img,
.v4-hero-flora-front img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center bottom;
  transform-origin:50% 100%;
  will-change:transform;
}
.v4-hero-flora-front img{
  animation:iki-restauro-vento-vicino 7.4s cubic-bezier(.47,.05,.52,.95) infinite alternate;
}
.v4-hero-flora-back img{
  animation:iki-restauro-vento-lontano 11.6s ease-in-out -2.3s infinite alternate;
}

/* 04. MICROGLITTER: conservare i 56 granelli oro v10.
   Rendere visibile il percorso, senza trasformarlo in scintille da festa. */
.v4-hero .v3-glitter{
  z-index:11;
  isolation:isolate;
}
.v4-hero .v3-glitter-grain{
  filter:drop-shadow(0 0 2px rgba(143,98,34,.34));
}
.v4-hero .v3-glitter[data-ready] .v3-glitter-grain{
  animation-name:iki-v3-glitter;
  animation-duration:10s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

/* 05. IMMAGINI DELLA MISSIONE E GALLERIA: movimento presente, ma sobrio. */
.v4-essence-item.is-in-view:nth-child(1) img{
  animation:iki-restauro-fiore-carta 10s ease-in-out infinite alternate;
  transform-origin:50% 60%;
}
.v4-essence-item.is-in-view:nth-child(2) img{
  animation:iki-restauro-fiore-loto 7.8s ease-in-out infinite alternate;
  transform-origin:50% 66%;
}
.v4-essence-item.is-in-view:nth-child(3) img{
  animation:iki-restauro-fiore-iris 10.4s ease-in-out infinite alternate;
  transform-origin:50% 88%;
}
.v4-essence-item:hover img{
  filter:brightness(1.045);
}
.v4-bloom .iki-flower{
  transition:filter .6s ease;
}
.v4-bloom .iki-flower:hover,
.v4-bloom .iki-flower:focus-visible{
  filter:drop-shadow(0 7px 18px rgba(117,73,100,.13));
}

/* 06. Animazioni lente e indipendenti dallo scorrimento. */
@keyframes iki-restauro-luce{
  from{opacity:.70;transform:translate(0,0) scale(1)}
  to{opacity:.98;transform:translate(.7%,.2%) scale(1.035)}
}
@keyframes iki-restauro-aura{
  from{opacity:.68;transform:scale(.978)}
  to{opacity:1;transform:scale(1.046)}
}
@keyframes iki-restauro-raggi{to{transform:rotate(360deg)}}
@keyframes iki-restauro-luminosita{
  from{filter:brightness(.95) saturate(.92)}
  to{filter:brightness(1.12) saturate(1.01)}
}
@keyframes iki-restauro-vento-vicino{
  0%{transform:skewX(-.62deg) translateX(-.28%) scale(1.011)}
  46%{transform:skewX(.34deg) translateX(.21%) scale(1.008)}
  100%{transform:skewX(.65deg) translateX(.45%) scale(1.017)}
}
@keyframes iki-restauro-vento-lontano{
  0%{transform:skewX(.45deg) translateX(.14%) scale(1.018)}
  50%{transform:skewX(-.52deg) translateX(-.27%) scale(1.013)}
  100%{transform:skewX(.21deg) translateX(.24%) scale(1.016)}
}
@keyframes iki-restauro-fiore-carta{
  0%,100%{transform:rotate(-.75deg) translateY(0)}
  48%{transform:rotate(.7deg) translateY(-2px)}
}
@keyframes iki-restauro-fiore-loto{
  0%{transform:translateY(0) rotate(-.16deg)}
  100%{transform:translateY(-3px) rotate(.18deg)}
}
@keyframes iki-restauro-fiore-iris{
  0%{transform:rotate(-.85deg)}
  100%{transform:rotate(.85deg)}
}

/* 07. Breakpoints: smartphone = lettura intatta, scena solo in basso. */
@media(max-width:1140px){
  .v4-hero .v4-sun,
  .v4-hero .v4-sun-art,
  .v4-hero .v4-sun-hotspot{
    top:15%;right:3%;width:35vw;
  }
  .v4-hero-silk{
    background:linear-gradient(90deg,#fcfaf6 0%,#fcfaf6 18%,
      rgba(252,250,246,.98) 39%,rgba(252,250,246,.72) 62%,
      transparent 87%);
  }
  .v4-hero-flora-front{width:82%;right:-7%;height:43%}
  .v4-hero-flora-back{width:83%;right:-7%;height:47%}
}
@media(max-width:820px){
  .v4-hero,
  .v4-hero.v3-hero,
  .v4-hero-layout{min-height:860px}
  .v4-hero-content{
    margin-top:68px;
    max-width:100%;
  }
  .v4-hero-content h1{max-width:100%}
  .v4-hero-silk{
    background:linear-gradient(to bottom,
       #fcfaf6 0%,
       rgba(252,250,246,.99) 23%,
       rgba(252,250,246,.95) 45%,
       rgba(252,250,246,.82) 60%,
       transparent 83%);
  }
  .v4-hero .v4-sun,
  .v4-hero .v4-sun-art,
  .v4-hero .v4-sun-hotspot{
    top:auto;
    bottom:7%;
    right:9%;
    width:min(43vw,335px);
    opacity:.88;
  }
  .v4-hero-flora-back{width:100%;right:0;height:35%;bottom:-5%;opacity:.35}
  .v4-hero-flora-front{width:100%;right:0;height:31%;bottom:-4%;opacity:.93}
  .v4-hero-flora-front,.v4-hero-flora-back{mask-image:none}
  .v4-hero .v3-glitter{z-index:11}
}
@media(max-width:540px){
  .v4-hero,
  .v4-hero.v3-hero,
  .v4-hero-layout{min-height:830px}
  .v4-hero-content{margin-top:66px}
  .v4-hero-content h1{
    font-size:clamp(3.6rem,14vw,4.75rem);
  }
  .v4-hero-bottom{width:100%;max-width:100%}
  .v4-hero-bottom p{max-width:38ch;color:#243c51!important}
  .v4-hero-silk{
    background:linear-gradient(to bottom,
      #fcfaf6 0%,
      rgba(252,250,246,1) 20%,
      rgba(252,250,246,.98) 42%,
      rgba(252,250,246,.94) 55%,
      rgba(252,250,246,.38) 77%,
      transparent 91%);
  }
  .v4-hero .v4-sun,
  .v4-hero .v4-sun-art,
  .v4-hero .v4-sun-hotspot{
    top:auto;
    bottom:9%;
    right:7%;
    width:min(52vw,215px);
    opacity:.92;
  }
  .v4-hero-flora-back{
    height:29%;
    bottom:-4%;
    width:100%;
    right:0;
  }
  .v4-hero-flora-front{
    height:27%;
    bottom:-3%;
    width:100%;
    right:0;
  }
  .v4-hero-rays{opacity:.09}
  .v4-hero-cta a{color:#21364c}
}
/* 08. L'accessibilità prevale su qualsiasi spettacolo. */
@media(prefers-reduced-motion:reduce){
  .v4-hero .v4-sun-art::before,
  .v4-hero .v4-sun-art::after,
  .v4-hero .v4-sun-art .v3-sun-disc,
  .v4-hero-light,
  .v4-hero-flora-front img,
  .v4-hero-flora-back img,
  .v4-essence-item img{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}
html.iki-motion-paused .v4-hero .v4-sun-art::before,
html.iki-motion-paused .v4-hero .v4-sun-art::after,
html.iki-motion-paused .v4-hero .v4-sun-art .v3-sun-disc,
html.iki-motion-paused .v4-hero-light,
html.iki-motion-paused .v4-hero-flora-front img,
html.iki-motion-paused .v4-hero-flora-back img,
html.iki-motion-paused .v4-essence-item img{
  animation:none!important;
  transition:none!important;
}

/* Touch target: identical mobile coordinates for the solar photograph and
   the accessible button. Higher specificity overrides the V3 sun rules. */
@media(max-width:1140px){
 .v4-hero .v3-sun.v4-sun-hotspot{top:15%;right:3%;width:35vw;bottom:auto}
}
@media(max-width:820px){
 .v4-hero .v3-sun.v4-sun-hotspot{
   top:auto;bottom:7%;right:9%;width:min(43vw,335px);
 }
}
@media(max-width:540px){
 .v4-hero .v3-sun.v4-sun-hotspot{
   top:auto;bottom:9%;right:7%;width:min(52vw,215px);
 }
}