/* ==========================================================================
   FlipUp — Motion tokens & reveal system
   Non-destructive: initial-hidden states apply ONLY under html.motion-ready,
   with specificity high enough to win over the theme's visibility-fix.
   No motion-ready (no-JS / reduced-motion / GSAP missing) => content visible.
   Animates only opacity + transform (GPU). Layout space is always preserved
   (no display:none), so zero CLS.
   ========================================================================== */

:root{
  /* Durate */
  --fx-dur-1:.40s;
  --fx-dur-2:.60s;
  --fx-dur-3:.80s;
  /* Easing */
  --fx-ease:cubic-bezier(0.22,1,0.36,1);        /* entrate — power3.out-like */
  --fx-ease-soft:cubic-bezier(0.34,1.4,0.64,1); /* micro-hover — leggero overshoot */
  /* Offset & stagger */
  --fx-y:28px;
  --fx-stagger:.09s;
}

/* Stato iniziale nascosto (solo con motion attivo). !important + specificità
   html.motion-ready [data-fx] (0,2,1) vince sul visibility-fix del tema. */
html.motion-ready [data-fx], html.motion-ready [data-reveal]{
  opacity:0 !important;
  transform:translateY(var(--fx-y)) !important;
  transition:opacity var(--fx-dur-2) var(--fx-ease),
             transform var(--fx-dur-2) var(--fx-ease);
  will-change:opacity,transform;
}
html.motion-ready [data-fx="up"]   { transform:translateY(var(--fx-y)) !important; }
html.motion-ready [data-fx="left"] { transform:translateX(calc(-1 * var(--fx-y))) !important; }
html.motion-ready [data-fx="right"]{ transform:translateX(var(--fx-y)) !important; }
html.motion-ready [data-fx="scale"]{ transform:scale(.94) !important; }
html.motion-ready [data-fx="fade"] { transform:none !important; }

/* Stato rivelato — specificità superiore, vince sull'iniziale.
   Il transform passa da una variabile: default none, ma i moduli hover
   (tilt) possono impostare --fx-tf senza essere bloccati dal visibility-fix. */
html.motion-ready [data-fx].fx-in, html.motion-ready [data-reveal].fx-in{
  opacity:1 !important;
  transform:var(--fx-tf, none) !important;
}

/* --- Tilt 3D + micro-lift (solo card taggate, hover/pointer fine) --- */
html.motion-ready [data-tilt].fx-in{ will-change:transform; }
html.motion-ready [data-tilt]:hover{
  border-color:rgba(59,191,160,0.40) !important;
  box-shadow:0 22px 55px rgba(0,0,0,0.30), 0 0 0 1px rgba(59,191,160,0.15) !important;
}

/* Safety: se qualcosa va storto e reduced-motion è attivo, tutto visibile */
@media (prefers-reduced-motion: reduce){
  html.motion-ready [data-fx],
  html.motion-ready [data-fx].fx-in, html.motion-ready [data-reveal].fx-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* --- Section signatures (home) --- */
/* Libro: cover che fluttua (solo desktop, motion attivo) */
@keyframes fxBookFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(-1.2deg)}}
html.motion-ready .book-cover{animation:fxBookFloat 6s ease-in-out infinite;will-change:transform}

/* Servizi: underline animata sul link */
.service-link{position:relative;display:inline-block}
.service-link::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(0.22,1,0.36,1)}
.service-card:hover .service-link{color:var(--teal)}
.service-card:hover .service-link::after{transform:scaleX(1)}

/* CTA finale: alone teal per profondità */
.cta-final{position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;left:50%;top:60%;width:900px;height:900px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(59,191,160,0.10),transparent 62%);pointer-events:none;z-index:0}
.cta-final>*{position:relative;z-index:1}

/* Reduced-motion: niente float */
@media (prefers-reduced-motion: reduce){ html.motion-ready .book-cover{animation:none} }

/* ===== Awwwards modules ===== */
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Text reveal per righe (mask + rise) */
html.motion-ready [data-lines], html.motion-ready .fx-lined{opacity:0 !important}
html.motion-ready [data-lines].fx-in, html.motion-ready .fx-lined.fx-in{opacity:1 !important}
.fx-line{display:block;overflow:hidden;padding-bottom:0.08em}
.fx-line-in{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(0.16,1,0.3,1)}
html.motion-ready [data-lines].fx-in .fx-line-in, html.motion-ready .fx-lined.fx-in .fx-line-in{transform:translateY(0)}

/* Bottoni magnetici */
html.motion-ready [data-magnetic]{transition:transform .35s cubic-bezier(0.22,1,0.36,1)}

/* Cursore custom */
.fx-cur-dot,.fx-cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%}
.fx-cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--teal)}
.fx-cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(59,191,160,0.55);transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s,opacity .3s}
html.fx-cur-active .fx-cur-ring{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(59,191,160,0.10);border-color:var(--teal)}
html.fx-cur-down .fx-cur-ring{width:28px;height:28px;margin:-14px 0 0 -14px}
html.fx-cursor-on,html.fx-cursor-on a,html.fx-cursor-on button,html.fx-cursor-on .btn-primary,html.fx-cursor-on .btn-secondary{cursor:none}
html.fx-cursor-on input,html.fx-cursor-on textarea,html.fx-cursor-on select{cursor:auto}
@media (hover:none),(pointer:coarse){.fx-cur-dot,.fx-cur-ring{display:none}}

/* ===== Kinetic typography band ===== */
.kinetic{background:#0D0D0D;padding:52px 0;overflow:hidden}
html[data-theme="light"] .kinetic{background:#0D0D0D}
.kinetic-row{display:flex;align-items:center;white-space:nowrap;will-change:transform}
.kinetic-item{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(42px,8.4vw,130px);line-height:1.06;letter-spacing:-2px;text-transform:uppercase;padding:0 24px;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,0.22)}
.kinetic-sep{font-family:'Poppins',sans-serif;font-size:clamp(26px,4.4vw,70px);color:var(--teal);line-height:1;padding:0 2px}
@media (prefers-reduced-motion: reduce){ .kinetic-row{justify-content:center;flex-wrap:wrap} }

/* ===== Tool ecosystem horizontal scroll — all devices (pinned scrub) ===== */
.eco-horiz.eco-h-ready{overflow:hidden}
.eco-horiz.eco-h-ready .eco-viewport{width:100%}
.eco-horiz.eco-h-ready .eco-grid{display:flex;grid-template-columns:none;gap:24px;width:max-content;max-width:none;margin:0;padding:0 8vw;will-change:transform}
.eco-horiz.eco-h-ready .eco-card{flex:0 0 clamp(300px,28vw,380px)}
@media(max-width:768px){
  .eco-horiz.eco-h-ready .eco-grid{gap:14px;padding:0 18px}
  .eco-horiz.eco-h-ready .eco-card{flex:0 0 78vw}
}

/* ===== Processo sticky ===== */
.process{background:var(--dark)}
.proc-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;max-width:1180px;margin:0 auto;align-items:start}
.proc-sticky{position:sticky;top:24vh;height:52vh;display:flex;align-items:center}
.proc-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(110px,15vw,230px);line-height:0.9;color:transparent;-webkit-text-stroke:2px var(--teal);letter-spacing:-6px}
.proc-vlabel{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(20px,2.4vw,30px);color:var(--teal);text-transform:uppercase;letter-spacing:3px;margin-top:6px}
.proc-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center}
html.motion-ready .proc-step{opacity:0.28;transition:opacity 0.45s}
html.motion-ready .proc-step.active{opacity:1}
.proc-tag{font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--teal-light);margin-bottom:14px;display:inline-block}
.proc-step h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(26px,3vw,40px);margin-bottom:16px}
.proc-step p{font-size:17px;color:var(--mid-gray);line-height:1.7;max-width:480px}
@media(max-width:900px){
  .proc-grid{grid-template-columns:1fr;gap:4px}
  .proc-sticky{display:none}
  .proc-num{font-size:72px}
  .proc-step{min-height:auto;padding:20px 0 20px 66px;position:relative;justify-content:flex-start}.proc-step::before{content:attr(data-step);position:absolute;left:0;top:18px;font-family:'Poppins',sans-serif;font-weight:800;font-size:46px;line-height:0.9;color:transparent;-webkit-text-stroke:1.5px var(--teal);letter-spacing:-2px}
  html.motion-ready .proc-step{opacity:1!important}
}

/* ===== Stats immersive ===== */
.stats-imm{background:var(--black);padding:70px 24px}
.si-stage{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px 50px;justify-content:center;align-items:center}
.si-slide{flex:1 1 180px;text-align:center}
.si-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(48px,7vw,72px);line-height:0.95;color:var(--teal);letter-spacing:-2px}
.si-label{font-family:'Poppins',sans-serif;font-weight:500;font-size:14px;color:var(--mid-gray);text-transform:uppercase;letter-spacing:2px;margin-top:10px}
/* Immersive pinned stats — all devices (JS adds .si-immersive) */
.stats-imm.si-immersive{min-height:100vh;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stats-imm.si-immersive .si-stage{position:relative;height:60vh;width:100%;display:block}
.stats-imm.si-immersive .si-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;flex:none}
.stats-imm.si-immersive .si-num{font-size:clamp(120px,20vw,300px);letter-spacing:-6px;line-height:0.9}
.stats-imm.si-immersive .si-label{font-size:clamp(18px,2vw,28px);color:var(--white);letter-spacing:4px;margin-top:16px}
@media(max-width:768px){
  /* Big enough to fill the phone screen (intentional), small enough to not overflow */
  .stats-imm.si-immersive .si-num{font-size:clamp(84px,25vw,150px);letter-spacing:-3px}
  .stats-imm.si-immersive .si-label{font-size:15px;letter-spacing:3px;margin-top:14px;padding:0 20px;text-align:center}
}

/* ===== Servizi: interactive hover-reveal list ===== */
.srv-list{position:relative;max-width:1100px;margin:0 auto}
.srv-row{position:relative;display:flex;align-items:center;gap:24px;padding:clamp(20px,3vw,34px) 8px;border-top:1px solid rgba(59,191,160,0.14);text-decoration:none;color:var(--white);transition:opacity .35s ease}
.srv-row:last-of-type{border-bottom:1px solid rgba(59,191,160,0.14)}
.srv-row-idx{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--teal);flex:0 0 42px}
.srv-row-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(26px,5vw,60px);line-height:1;letter-spacing:-1px;flex:1;transition:transform .45s cubic-bezier(0.22,1,0.36,1),color .3s}
.srv-row-cat{font-size:13px;color:var(--mid-gray);text-transform:uppercase;letter-spacing:2px;white-space:nowrap;transition:opacity .3s}
.srv-row-arrow{font-family:'Poppins',sans-serif;font-size:26px;color:var(--teal);opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .4s}
.srv-row:hover .srv-row-name{transform:translateX(26px);color:var(--teal)}
.srv-row:hover .srv-row-arrow{opacity:1;transform:translateX(0)}
.srv-list.has-hover .srv-row:not(:hover){opacity:0.32 !important}
.srv-preview{position:fixed;top:0;left:0;width:210px;height:150px;pointer-events:none;z-index:60;opacity:0;transition:opacity .35s ease;will-change:transform}
.srv-preview.on{opacity:1}
.srv-preview-inner{width:100%;height:100%;border-radius:16px;background:linear-gradient(135deg,var(--teal-light),var(--teal-dark));display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(0,0,0,0.45);transform:scale(.82);transition:transform .35s cubic-bezier(0.22,1,0.36,1)}
.srv-preview.on .srv-preview-inner{transform:scale(1)}
.srv-preview-mono{font-family:'Poppins',sans-serif;font-weight:800;font-size:52px;color:#08130F;letter-spacing:2px}
@media(max-width:768px){
  .srv-row{gap:12px;padding:20px 4px}
  .srv-row-cat{display:none}
  .srv-row:hover .srv-row-name{transform:none}
  .srv-list.has-hover .srv-row:not(:hover){opacity:1}
  .srv-preview{display:none}
}

/* ===== AI page: giant animated gains (Prima/Dopo) ===== */
.ai-gains{max-width:1120px;margin:0 auto}
.aig-row{display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;align-items:center;padding:46px 0;border-top:1px solid rgba(59,191,160,0.14)}
.aig-row:last-child{border-bottom:1px solid rgba(59,191,160,0.14)}
.aig-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(70px,11vw,150px);line-height:0.9;color:var(--teal);letter-spacing:-4px;display:block}
.aig-metriclab{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:3px;color:var(--mid-gray);margin-top:10px;display:block}
.aig-cat{font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);font-weight:600}
.aig-detail h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,30px);margin:8px 0 18px;line-height:1.2;color:var(--white)}
.aig-ba{display:flex;flex-direction:column;gap:12px}
.aig-before,.aig-after{font-size:15px;line-height:1.55;padding-left:26px;position:relative}
.aig-before{color:var(--mid-gray)}
.aig-before::before{content:'';position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--mid-gray)}
.aig-after{color:var(--light-gray)}
.aig-after::before{content:'';position:absolute;left:2px;top:6px;width:9px;height:5px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
@media(max-width:820px){.aig-row{grid-template-columns:1fr;gap:18px;padding:34px 0}.aig-num{font-size:60px}}

/* ===== AI page: services interactive showcase ===== */
.ai-svc-showcase{display:grid;grid-template-columns:0.8fr 1.2fr;gap:44px;max-width:1180px;margin:0 auto;align-items:start}
.ass-list{display:flex;flex-direction:column;border-left:1px solid rgba(59,191,160,0.14)}
.ass-item{background:none;border:none;text-align:left;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(21px,2.5vw,33px);color:var(--mid-gray);padding:15px 0 15px 24px;cursor:pointer;position:relative;transition:color .3s,padding .35s;line-height:1.1}
.ass-item::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%) scaleY(0);width:2px;height:66%;background:var(--teal);transition:transform .35s}
.ass-item.active{color:var(--white);padding-left:34px}
.ass-item.active::before{transform:translateY(-50%) scaleY(1)}
.ass-panels{position:relative;min-height:400px;background:var(--black);border:1px solid rgba(59,191,160,0.14);border-radius:24px}
.ass-panel{position:absolute;inset:0;padding:42px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .45s,transform .45s}
.ass-panel.active{opacity:1;transform:none;pointer-events:auto}
.ass-role{font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:12px}
.ass-panel h3{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(26px,3vw,40px);margin-bottom:16px;color:var(--white)}
.ass-panel p{font-size:16px;color:var(--light-gray);line-height:1.65;margin-bottom:22px;max-width:470px}
.ass-panel ul{list-style:none;margin-bottom:24px}
.ass-panel li{font-size:14px;color:var(--light-gray);padding:7px 0 7px 26px;position:relative}
.ass-panel li::before{content:'';position:absolute;left:2px;top:12px;width:11px;height:6px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.ass-link{font-family:'Poppins',sans-serif;font-weight:600;color:var(--teal);text-decoration:none}
@media(max-width:820px){.ai-svc-showcase{grid-template-columns:1fr;gap:18px}.ass-list{flex-direction:row;flex-wrap:wrap;border-left:none;gap:6px}.ass-item{font-size:16px;padding:8px 14px;border:1px solid rgba(59,191,160,0.18);border-radius:30px}.ass-item.active{padding-left:14px}.ass-item::before{display:none}.ass-panels{min-height:0}.ass-panel{position:relative;opacity:1;transform:none;pointer-events:auto;padding:28px}.ass-panel:not(.active){display:none}}

/* ===== Servizi page: extra breathing room above the orbit wheel on mobile ===== */
@media(max-width:768px){.srv-hero .srv-hero-grid > .fx-in{margin-top:46px}.srv-hero .orbit-wrap{margin-top:0}}

/* ===== Service DETAIL pages (LinkedUp/CrmUp/AgentUp/Progetti-Marketing/Campagne-ADV/
   Siti-Web/Formazione, IT+EN+ES): fit all content inside the mobile viewport =====
   Scoped via the per-page hero-grid classes so home & the /servizi listing are untouched. */
@media(max-width:768px){
  .lu-hero-grid,.cu-hero-grid,.ag-hero-grid,.av-hero-grid,.fc-hero-grid,.pm-hero-grid,.sw-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  body:has(.lu-hero-grid,.cu-hero-grid,.ag-hero-grid,.av-hero-grid,.fc-hero-grid,.pm-hero-grid,.sw-hero-grid) section *{min-width:0!important;max-width:100%!important}
}

/* ===== Service detail pages: align the KPI numbers inside the dashboard mock cards.
   The label above each number can wrap to 1 or 2 lines; reserve a fixed 2-line height
   so every number in a row shares the same baseline (mobile only). ===== */
@media(max-width:768px){
  .dash-kpi small,.crm-kpi small,.ag-kpi small,.av-kpi small,.pm-kpi small{min-height:32px}
}