/* =========================================================
   SKYLINE · FX — motion layer
   Tutto è gated dietro html.fx (aggiunta da fx.js).
   Senza JS o con prefers-reduced-motion il sito resta
   completamente visibile e statico.
   ========================================================= */
html.fx{
  --fx-ease:cubic-bezier(.16,1,.3,1);      /* expo out */
  --fx-ease-soft:cubic-bezier(.22,1,.36,1); /* quint out */
}

/* Su desktop lo smooth scroll lo gestisce il lerp di fx.js:
   il nativo va spento o i due si sommano. Mobile resta nativo. */
@media (pointer:fine){
  html.fx{scroll-behavior:auto}
}

/* ---------- Reveal base ---------- */
html.fx [data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--fx-ease-soft), transform .9s var(--fx-ease-soft);
}
html.fx [data-reveal].in{opacity:1;transform:none}

/* Parents con coreografia interna: neutri, animano i figli */
html.fx .intro-head[data-reveal],
html.fx .intro-copy[data-reveal],
html.fx .split-content[data-reveal],
html.fx .split-image[data-reveal],
html.fx .duo-col.with-bg[data-reveal],
html.fx .menu-teaser[data-reveal],
html.fx .moments[data-reveal],
html.fx .reservation-inner[data-reveal],
html.fx .menu-group[data-reveal],
html.fx .carta-cover[data-reveal]{
  opacity:1;transform:none;transition:none;
}

/* ---------- Word mask reveal (titoli) ---------- */
html.fx .fx-wm{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding:.08em 0 .14em;
  margin:-.08em 0 -.14em;
}
html.fx .fx-w{
  display:inline-block;
  transform:translateY(120%);
  transition:transform 1s var(--fx-ease);
  transition-delay:calc(var(--wi,0) * .05s);
}
html.fx .in .fx-w{transform:translateY(0)}
html.fx .fx-replay .fx-w{transform:translateY(120%) !important;transition:none !important}

/* ---------- Eyebrow + copy + CTA choreography ---------- */
html.fx .intro-head .eyebrow,
html.fx .split-content .eyebrow,
html.fx .menu-teaser-inner .eyebrow,
html.fx .moments-head .eyebrow,
html.fx .reservation-inner .eyebrow,
html.fx .carta-cover-content .eyebrow{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
}
html.fx .intro-head.in .eyebrow,
html.fx .split-content.in .eyebrow,
html.fx .menu-teaser.in .eyebrow,
html.fx .moments.in .eyebrow,
html.fx .reservation-inner.in .eyebrow,
html.fx .carta-cover.in .eyebrow{opacity:1;transform:none}

html.fx .split-content > p,
html.fx .split-content .btn,
html.fx .menu-teaser-copy,
html.fx .menu-teaser-inner .btn,
html.fx .reservation-inner > p,
html.fx .intro-copy > p{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--fx-ease), transform .8s var(--fx-ease);
}
html.fx .split-content.in > p,
html.fx .menu-teaser.in .menu-teaser-copy,
html.fx .reservation-inner.in > p,
html.fx .intro-copy.in > p{opacity:1;transform:none;transition-delay:.2s}
html.fx .split-content.in .btn,
html.fx .menu-teaser.in .menu-teaser-inner .btn{opacity:1;transform:none;transition-delay:.35s}

/* ---------- Stats: stagger + linea ambra ---------- */
html.fx .stats > div{
  position:relative;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--fx-ease), transform .8s var(--fx-ease);
}
html.fx .stats > div::before{
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--fx-ease);
}
html.fx .intro-copy.in .stats > div{opacity:1;transform:none}
html.fx .intro-copy.in .stats > div::before{transform:scaleX(1)}
html.fx .intro-copy.in .stats > div:nth-child(1){transition-delay:.3s}
html.fx .intro-copy.in .stats > div:nth-child(2){transition-delay:.42s}
html.fx .intro-copy.in .stats > div:nth-child(3){transition-delay:.54s}
html.fx .intro-copy.in .stats > div:nth-child(1)::before{transition-delay:.3s}
html.fx .intro-copy.in .stats > div:nth-child(2)::before{transition-delay:.42s}
html.fx .intro-copy.in .stats > div:nth-child(3)::before{transition-delay:.54s}

/* ---------- DUO: clip reveal + testo a cascata ---------- */
html.fx .duo-col.with-bg[data-reveal]{
  clip-path:inset(8% 5% 8% 5% round 14px);
  transform:scale(.985);
  transition:clip-path 1.15s var(--fx-ease), transform 1.15s var(--fx-ease);
}
html.fx .duo-col.with-bg[data-reveal].in{
  clip-path:inset(0 0 0 0 round 6px);
  transform:none;
}
html.fx .duo-col.with-bg .duo-text > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--fx-ease), transform .8s var(--fx-ease);
}
html.fx .duo-col.with-bg.in .duo-text > *{opacity:1;transform:none}
html.fx .duo-col.with-bg.in .duo-text > *:nth-child(1){transition-delay:.3s}
html.fx .duo-col.with-bg.in .duo-text > *:nth-child(2){transition-delay:.4s}
html.fx .duo-col.with-bg.in .duo-text > *:nth-child(3){transition-delay:.5s}

/* ---------- Hover di profondità ---------- */
html.fx .duo-col.with-bg.in:hover{transform:scale(1.012)}
html.fx .duo-overlay{transition:opacity .8s ease}
html.fx .duo-col.with-bg:hover .duo-overlay{opacity:.82}
html.fx .split-image.in:hover img{transform:scale(1.035)}

/* linea ambra dell'intro che si disegna */
html.fx .intro-head::before{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--fx-ease) .3s;
}
html.fx .intro-head.in::before{transform:scaleX(1)}

/* ---------- SPLIT: wipe orizzontale + zoom assestante ---------- */
html.fx .split-image[data-reveal]{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s var(--fx-ease);
}
html.fx .split-image[data-reveal].in{clip-path:inset(0 0 0 0)}
html.fx .split-image img{
  transform:scale(1.16);
  transform-origin:60% 50%;
  transition:transform 1.7s var(--fx-ease);
}
html.fx .split-image.in img{transform:none}

/* ---------- MOMENTOS: griglia a cascata ---------- */
html.fx .moments .moment{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .9s var(--fx-ease), transform .9s var(--fx-ease);
}
html.fx .moments.in .moment{opacity:1;transform:none}
html.fx .moments.in .moment:nth-child(1){transition-delay:.08s}
html.fx .moments.in .moment:nth-child(2){transition-delay:.2s}
html.fx .moments.in .moment:nth-child(3){transition-delay:.32s}
html.fx .moment figcaption{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s var(--fx-ease) .55s, transform .6s var(--fx-ease) .55s;
}
html.fx .moments.in .moment figcaption{opacity:1;transform:none}

/* ---------- CARTA: menu groups ---------- */
html.fx .menu-group .menu-group-title{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
}
html.fx .menu-group.in .menu-group-title{opacity:1;transform:none}
html.fx .menu-group .menu-item{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
}
html.fx .menu-group.in .menu-item{opacity:1;transform:none}
html.fx .menu-group.in .menu-item:nth-child(1){transition-delay:.1s}
html.fx .menu-group.in .menu-item:nth-child(2){transition-delay:.16s}
html.fx .menu-group.in .menu-item:nth-child(3){transition-delay:.22s}
html.fx .menu-group.in .menu-item:nth-child(4){transition-delay:.28s}
html.fx .menu-group.in .menu-item:nth-child(5){transition-delay:.34s}
html.fx .menu-group.in .menu-item:nth-child(6){transition-delay:.4s}
html.fx .menu-group.in .menu-item:nth-child(7){transition-delay:.46s}
html.fx .menu-group.in .menu-item:nth-child(8){transition-delay:.52s}
html.fx .menu-item .menu-dots{
  transform:translateY(-7px) scaleX(0);
  transform-origin:left;
  transition:transform 1s var(--fx-ease) .25s;
}
html.fx .menu-group.in .menu-item .menu-dots{transform:translateY(-7px) scaleX(1)}

/* ---------- CARTA cover: intro cinematica ---------- */
html.fx .carta-cover-img{
  transform:scale(1.1);
  transition:transform 2.2s var(--fx-ease);
}
html.fx body.fx-ready .carta-cover-img{transform:scale(1)}

/* ---------- FORM: campi a cascata ---------- */
html.fx .reservation-inner .form > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
}
html.fx .reservation-inner.in .form > *{opacity:1;transform:none}
html.fx .reservation-inner.in .form > *:nth-child(1){transition-delay:.25s}
html.fx .reservation-inner.in .form > *:nth-child(2){transition-delay:.31s}
html.fx .reservation-inner.in .form > *:nth-child(3){transition-delay:.37s}
html.fx .reservation-inner.in .form > *:nth-child(4){transition-delay:.43s}
html.fx .reservation-inner.in .form > *:nth-child(5){transition-delay:.49s}
html.fx .reservation-inner.in .form > *:nth-child(6){transition-delay:.55s}
html.fx .reservation-inner.in .form > *:nth-child(7){transition-delay:.61s}
html.fx .reservation-inner.in .form > *:nth-child(8){transition-delay:.67s}

/* ---------- HERO: entrata coreografata ---------- */
html.fx .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--night-deep);
  opacity:1;
  transition:opacity 1.2s ease .1s;
  pointer-events:none;
}
html.fx body.fx-ready .hero::before{opacity:0}
html.fx .hero .hero-img{
  transform:scale(1.1);
  transition:transform 2.4s var(--fx-ease);
}
html.fx body.fx-ready .hero .hero-img{transform:scale(1)}
html.fx .hero .hero-theme,
html.fx .hero .hamburger,
html.fx .hero-scroll{
  opacity:0;
  transition:opacity .8s ease .9s;
}
html.fx body.fx-ready .hero .hero-theme,
html.fx body.fx-ready .hero .hamburger,
html.fx body.fx-ready .hero-scroll{opacity:1}

/* ---------- LEGALI: titolo + blocchi in cascata ---------- */
html.fx .legal-page .eyebrow{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
}
html.fx body.fx-ready .legal-page .eyebrow{opacity:1;transform:none}
html.fx .fx-rise{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s var(--fx-ease), transform .85s var(--fx-ease);
}
html.fx .fx-rise.in{opacity:1;transform:none}
html.fx .legal-page h1::after{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--fx-ease) .5s;
}
html.fx .legal-page h1.in::after{transform:scaleX(1)}

/* ---------- 404: sfondo con deriva lenta ---------- */
html.fx .page-404-bg img{animation:fx404drift 36s ease-in-out infinite alternate}
@keyframes fx404drift{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* ---------- 404: cascata al load ---------- */
html.fx .page-404-inner > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--fx-ease), transform .9s var(--fx-ease);
}
html.fx body.fx-ready .page-404-inner > *{opacity:1;transform:none}
html.fx body.fx-ready .page-404-inner > *:nth-child(1){transition-delay:.05s}
html.fx body.fx-ready .page-404-inner > *:nth-child(2){transition-delay:.15s}
html.fx body.fx-ready .page-404-inner > *:nth-child(3){transition-delay:.25s}
html.fx body.fx-ready .page-404-inner > *:nth-child(4){transition-delay:.35s}
html.fx body.fx-ready .page-404-inner > *:nth-child(5){transition-delay:.45s}

/* ---------- FOOTER ---------- */
html.fx .footer-cols > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--fx-ease), transform .8s var(--fx-ease);
}
html.fx .footer-cols.in > *{opacity:1;transform:none}
html.fx .footer-cols.in > *:nth-child(2){transition-delay:.1s}
html.fx .footer-cols.in > *:nth-child(3){transition-delay:.2s}
html.fx .footer-cols.in > *:nth-child(4){transition-delay:.3s}

/* ---------- MOBILE MENU: link a cascata ---------- */
html.fx .mobile-menu nav a{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .5s var(--fx-ease), transform .5s var(--fx-ease);
}
html.fx .mobile-menu.open nav a{opacity:1;transform:none}
html.fx .mobile-menu.open nav a:nth-child(1){transition-delay:.1s}
html.fx .mobile-menu.open nav a:nth-child(2){transition-delay:.16s}
html.fx .mobile-menu.open nav a:nth-child(3){transition-delay:.22s}
html.fx .mobile-menu.open nav a:nth-child(4){transition-delay:.28s}
html.fx .mobile-menu.open nav a:nth-child(5){transition-delay:.34s}
html.fx .mobile-menu.open nav a:nth-child(6){transition-delay:.4s}
html.fx .mobile-menu .mobile-lang{
  opacity:0;
  transition:opacity .5s ease .5s;
}
html.fx .mobile-menu.open .mobile-lang{opacity:1}

/* ---------- BOTTONI: sheen + press ---------- */
html.fx .btn{position:relative;overflow:hidden}
html.fx .btn::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-45%;
  width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg) translateX(-140%);
  pointer-events:none;
}
html.fx .btn:hover::before{
  transform:skewX(-20deg) translateX(460%);
  transition:transform .9s ease;
}
html.fx .btn:active{transform:translateY(0) scale(.97)}

/* ---------- CUSTOM SELECT: pop apertura ---------- */
html.fx .custom-select.open .cs-list{animation:fxPop .28s var(--fx-ease)}
@keyframes fxPop{
  from{opacity:0;transform:translateY(-6px) scale(.98)}
}

/* ---------- HEADER: easing più morbido ---------- */
html.fx .site-header{transition:transform .7s var(--fx-ease)}

/* ---------- Theme switch crossfade (View Transitions) ---------- */
html.fx::view-transition-old(root),
html.fx::view-transition-new(root){animation-duration:.45s}

/* ---------- Reduced motion: tutto visibile, niente animazioni ---------- */
@media (prefers-reduced-motion: reduce){
  html.fx *,
  html.fx *::before,
  html.fx *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  html.fx [data-reveal],
  html.fx .fx-w,
  html.fx .fx-rise,
  html.fx .legal-page .eyebrow,
  html.fx .stats > div,
  html.fx .moments .moment,
  html.fx .menu-group .menu-item,
  html.fx .menu-group .menu-group-title,
  html.fx .reservation-inner .form > *,
  html.fx .footer-cols > *,
  html.fx .page-404-inner > *,
  html.fx .duo-col.with-bg .duo-text > *,
  html.fx .split-content > p,
  html.fx .split-content .btn,
  html.fx .menu-teaser-copy,
  html.fx .menu-teaser-inner .btn,
  html.fx .reservation-inner > p,
  html.fx .intro-copy > p{
    opacity:1 !important;
    transform:none !important;
  }
  html.fx .split-image[data-reveal],
  html.fx .duo-col.with-bg[data-reveal]{clip-path:none !important;transform:none !important}
  html.fx .hero::before{opacity:0 !important}
  html.fx .hero .hero-img,
  html.fx .carta-cover-img{transform:none !important}
  html.fx .hero .hero-theme,
  html.fx .hero .hamburger,
  html.fx .hero-scroll{opacity:1 !important}
}