/* ============================================================================
   css/experience.css — Frame Asset Management
   ----------------------------------------------------------------------------
   Stili delle tre "esperienze" interattive del sito:

     1. HOME          — .fx-method   : il metodo, passo per passo (percorso
                                       animato con 5 tappe cliccabili)
     2. CHI SIAMO     — .fx-orbit    : i valori in orbita attorno al monogramma
     3. COSA FACCIAMO — .fx-strata   : i livelli di un mandato (sezioni
                                       sollevabili)

   Tutte le classi hanno prefisso fx- per non interferire con gli stili
   esistenti. Ogni animazione rispetta prefers-reduced-motion.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BASE CONDIVISA
---------------------------------------------------------------------------- */
.fx-section{position:relative;padding:110px 0;background:var(--ink,#12110f);overflow:hidden}
.fx-section .wrap{position:relative;z-index:2}
.fx-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px}
.fx-eyebrow:before{content:"";width:26px;height:1px;background:var(--gold-2)}
.fx-h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.01em;color:#fff;margin:0 0 14px;max-width:22ch}
.fx-h2 .gold{color:var(--gold-soft);font-style:italic}
.fx-lead{color:#cfc7b6;font-weight:300;font-size:1.02rem;line-height:1.75;max-width:58ch;margin:0}

/* alone dorato di fondo, molto tenue */
.fx-glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(120px);opacity:.14;background:radial-gradient(circle,var(--gold) 0%,transparent 65%);pointer-events:none;z-index:1}

/* ============================================================================
   1. HOME — IL METODO, PASSO PER PASSO (.fx-method)
   ========================================================================== */
.fx-method{background:linear-gradient(180deg,#12110f 0%,#161511 55%,#12110f 100%)}
.fx-method .fx-glow{top:-160px;right:-140px}

.fx-method-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:64px}
.fx-method-head .fx-lead{justify-self:end}

/* --- percorso: linea + tappe ---------------------------------------------- */
.fx-path{position:relative;margin:0 0 54px}
.fx-path-line{position:absolute;left:0;right:0;top:27px;height:2px;background:rgba(214,199,164,.14)}
.fx-path-line-fill{position:absolute;left:0;top:27px;height:2px;background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));width:0;transition:width .8s var(--ease,cubic-bezier(.2,.7,.2,1));box-shadow:0 0 14px rgba(163,137,95,.55)}
.fx-steps{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0}
.fx-step{flex:1;min-width:0}
.fx-step-btn{appearance:none;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:0;color:inherit;font:inherit}
.fx-step-dot{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#191813;border:1px solid rgba(214,199,164,.25);transition:border-color .5s,transform .5s,box-shadow .5s;font-family:var(--serif);font-size:1.05rem;color:#cfc7b6}
.fx-step-btn:hover .fx-step-dot{border-color:var(--gold-soft);transform:translateY(-3px)}
.fx-step-btn:focus-visible{outline:none}
.fx-step-btn:focus-visible .fx-step-dot{outline:2px solid var(--gold-soft);outline-offset:4px}
.fx-step.is-done .fx-step-dot{border-color:var(--gold-2);color:var(--gold-soft)}
.fx-step.is-active .fx-step-dot{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 0 0 6px rgba(163,137,95,.16),0 14px 34px -14px rgba(163,137,95,.7);transform:translateY(-4px)}
.fx-step.is-active .fx-step-ring{position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--gold-soft);opacity:0;animation:fxRing 2.4s ease-out infinite}
@keyframes fxRing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.fx-step-name{font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#a89f8d;transition:color .4s;white-space:nowrap}
.fx-step.is-active .fx-step-name{color:var(--gold-soft)}

/* --- pannello contenuto ---------------------------------------------------- */
.fx-panelbox{position:relative;border:1px solid rgba(214,199,164,.16);border-radius:var(--r-lg,26px);background:rgba(255,255,255,.028);overflow:hidden;min-height:280px}
.fx-panelbox:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 8% 0%,rgba(163,137,95,.10),transparent 55%);pointer-events:none}
.fx-panel{display:none;grid-template-columns:.42fr .58fr;gap:44px;padding:48px 52px;align-items:center;opacity:0;transform:translateY(14px)}
.fx-panel.is-active{display:grid;animation:fxPanelIn .65s var(--ease,cubic-bezier(.2,.7,.2,1)) forwards}
@keyframes fxPanelIn{to{opacity:1;transform:none}}
.fx-panel-num{font-family:var(--serif);font-size:clamp(4.4rem,9vw,7rem);line-height:.9;font-weight:500;color:transparent;-webkit-text-stroke:1px rgba(214,199,164,.4);letter-spacing:-.02em}
.fx-panel-num b{display:block;font-size:.16em;-webkit-text-stroke:0;color:var(--gold-soft);font-family:var(--sans);font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin-top:18px}
.fx-panel-title{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;color:#fff;line-height:1.12;margin:0 0 14px}
.fx-panel-text{color:#d9d2c2;font-weight:300;font-size:1.02rem;line-height:1.8;margin:0 0 22px}
.fx-panel-tags{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.fx-panel-tags li{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(163,137,95,.4);border-radius:999px;padding:8px 15px}

/* --- barra di avanzamento automatico -------------------------------------- */
.fx-autobar{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold-soft))}
.fx-panelbox.is-playing .fx-autobar{animation:fxAuto linear forwards;animation-duration:var(--fx-dur,6s)}
@keyframes fxAuto{from{width:0}to{width:100%}}
.fx-controls{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:16px}
.fx-hint{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8f8674}
.fx-nav{display:flex;gap:10px}
.fx-navbtn{appearance:none;cursor:pointer;width:46px;height:46px;border-radius:50%;border:1px solid rgba(214,199,164,.3);background:transparent;color:var(--gold-soft);font-size:1.05rem;display:grid;place-items:center;transition:background .4s,border-color .4s,color .4s,transform .4s}
.fx-navbtn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.fx-navbtn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}

/* ============================================================================
   2. CHI SIAMO — VALORI IN ORBITA (.fx-orbit)
   ========================================================================== */
.fx-orbit{background:linear-gradient(180deg,#12110f,#15140f 60%,#12110f)}
.fx-orbit .fx-glow{left:-180px;bottom:-200px}
.fx-orbit-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}

.fx-orbit-stage{position:relative;width:min(460px,100%);aspect-ratio:1;margin:0 auto}
.fx-orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(214,199,164,.22)}
.fx-orbit-ring.r2{inset:17%;border-style:solid;border-color:rgba(214,199,164,.10)}
.fx-orbit-core{position:absolute;inset:33%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#242118,#171510 70%);border:1px solid rgba(163,137,95,.5);box-shadow:0 0 60px -12px rgba(163,137,95,.45),inset 0 0 34px rgba(163,137,95,.14)}
.fx-orbit-core span{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--gold-soft);font-style:italic;line-height:1;transform:translateY(-2px)}
.fx-orbit-core small{position:absolute;bottom:22%;font-family:var(--sans);font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:#a89f8d}

.fx-orbit-rotor{position:absolute;inset:0;animation:fxSpin 60s linear infinite}
.fx-orbit-stage:hover .fx-orbit-rotor,
.fx-orbit-stage.is-paused .fx-orbit-rotor{animation-play-state:paused}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-sat{position:absolute;top:50%;left:50%;width:0;height:0}
/* posizioni: 4 satelliti a 0/90/180/270 gradi sul raggio del cerchio */
.fx-sat-btn{appearance:none;cursor:pointer;position:absolute;transform:translate(-50%,-50%);width:118px;height:118px;padding:8px;border-radius:50%;border:1px solid rgba(214,199,164,.3);background:rgba(18,17,14,.92);color:#e7dfce;display:grid;place-items:center;gap:2px;font:inherit;transition:border-color .4s,box-shadow .4s,background .4s;animation:fxSpinBack 60s linear infinite}
.fx-orbit-stage:hover .fx-sat-btn,
.fx-orbit-stage.is-paused .fx-sat-btn{animation-play-state:paused}
@keyframes fxSpinBack{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.fx-sat-btn i{display:none}
.fx-sat-btn b{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;color:#efe8d8;max-width:104px;line-height:1.15;white-space:normal;text-align:center;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.fx-sat-btn:hover{border-color:var(--gold-soft);box-shadow:0 0 34px -8px rgba(163,137,95,.6)}
.fx-sat-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}
.fx-sat.is-active .fx-sat-btn{background:var(--gold);border-color:var(--gold)}
.fx-sat.is-active .fx-sat-btn i,.fx-sat.is-active .fx-sat-btn b{color:var(--ink)}

.fx-orbit-copy .fx-value{display:none;opacity:0;transform:translateY(12px)}
.fx-orbit-copy .fx-value.is-active{display:block;animation:fxPanelIn .6s var(--ease,cubic-bezier(.2,.7,.2,1)) forwards}
.fx-value-k{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.fx-value h3{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;color:#fff;line-height:1.1;margin:0 0 16px}
.fx-value p{color:#d9d2c2;font-weight:300;font-size:1.03rem;line-height:1.8;margin:0 0 20px}
.fx-value-quote{border-left:2px solid var(--gold-2);padding-left:18px;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--gold-soft)}

/* ============================================================================
   3. COSA FACCIAMO — ANATOMIA DI UN MANDATO (.fx-strata)
   ========================================================================== */
.fx-strata{background:linear-gradient(180deg,#12110f,#161510 55%,#12110f)}
.fx-strata .fx-glow{right:-160px;bottom:-180px}
.fx-strata-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;margin-top:48px}

.fx-layers{display:flex;flex-direction:column;gap:10px;perspective:900px}
.fx-layer{appearance:none;border:0;cursor:pointer;position:relative;text-align:left;font:inherit;color:#e7dfce;padding:20px 26px;border-radius:14px;background:linear-gradient(120deg,rgba(163,137,95,var(--fx-a,.10)),rgba(255,255,255,.02));border:1px solid rgba(214,199,164,.18);display:flex;align-items:center;gap:18px;transform:rotateX(14deg);transform-origin:50% 100%;transition:transform .55s var(--ease,cubic-bezier(.2,.7,.2,1)),border-color .45s,box-shadow .55s,background .45s}
.fx-layer:hover{transform:rotateX(6deg) translateY(-4px)}
.fx-layer:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.fx-layer.is-active{transform:rotateX(0) translateY(-8px) scale(1.02);border-color:var(--gold-soft);background:linear-gradient(120deg,rgba(163,137,95,.28),rgba(163,137,95,.08));box-shadow:0 26px 50px -26px rgba(163,137,95,.65)}
.fx-layer-num{font-family:var(--serif);font-size:1.15rem;color:var(--gold-soft);opacity:.75;min-width:30px}
.fx-layer-name{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.fx-layer-arrow{margin-left:auto;color:var(--gold-soft);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.fx-layer.is-active .fx-layer-arrow{opacity:1;transform:none}

.fx-strata-copy .fx-stratum{display:none;opacity:0;transform:translateY(12px)}
.fx-strata-copy .fx-stratum.is-active{display:block;animation:fxPanelIn .6s var(--ease,cubic-bezier(.2,.7,.2,1)) forwards}
.fx-stratum-k{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.fx-stratum h3{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:500;color:#fff;line-height:1.12;margin:0 0 14px}
.fx-stratum p{color:#d9d2c2;font-weight:300;font-size:1.02rem;line-height:1.8;margin:0 0 18px}
.fx-stratum ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.fx-stratum ul li{position:relative;padding-left:24px;color:#cfc7b6;font-weight:300;font-size:.95rem;line-height:1.6}
.fx-stratum ul li:before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold-soft)}
.fx-strata-note{margin-top:34px;font-size:.8rem;color:#8f8674;font-weight:300;max-width:70ch}

/* ============================================================================
   RESPONSIVE + ACCESSIBILITÀ
   ========================================================================== */
@media (max-width:960px){
  .fx-section{padding:78px 0}
  .fx-method-head{grid-template-columns:1fr;gap:18px}
  .fx-method-head .fx-lead{justify-self:start}
  .fx-panel{grid-template-columns:1fr;gap:22px;padding:34px 26px}
  .fx-panel-num{font-size:3.6rem;display:flex;align-items:baseline;gap:16px}
  .fx-panel-num b{margin-top:0}
  .fx-step-name{font-size:.56rem;letter-spacing:.1em;white-space:normal;text-align:center;padding:0 5px}
  .fx-step-dot{width:44px;height:44px}
  .fx-path-line,.fx-path-line-fill{top:22px}
  .fx-orbit-grid,.fx-strata-grid{grid-template-columns:1fr;gap:44px}
  .fx-orbit-stage{width:min(340px,88vw)}
  .fx-sat-btn{width:98px;height:98px}
  .fx-sat-btn b{font-size:.72rem;max-width:82px}
  .fx-layer{transform:none}
  .fx-layer:hover{transform:translateY(-3px)}
}
/* La regola globale V15 riduce transizioni e animazioni quando il sistema
   comunica prefers-reduced-motion. */

/* ============================================================================
   4. HOME — PILASTRI A FISARMONICA (.fx-acc)  — stessi contenuti CMS di prima
   ========================================================================== */
.fx-acc{display:flex;gap:14px;height:400px}
.fx-acc-item{position:relative;flex:1;min-width:0;cursor:pointer;border-radius:var(--r-lg,26px);border:1px solid rgba(214,199,164,.16);background:rgba(255,255,255,.028);overflow:hidden;transition:flex .75s var(--ease,cubic-bezier(.22,.61,.36,1)),border-color .5s,background .5s,box-shadow .6s;outline:none}
.fx-acc-item:before{content:"";position:absolute;inset:0;background:radial-gradient(130% 120% at 20% 0%,rgba(163,137,95,.14),transparent 55%);opacity:0;transition:opacity .6s}
.fx-acc-item:hover{border-color:rgba(214,199,164,.35)}
.fx-acc-item:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}
.fx-acc-item.is-open{flex:2.6;border-color:var(--gold-2);background:rgba(163,137,95,.07);box-shadow:0 30px 60px -34px rgba(163,137,95,.55)}
.fx-acc-item.is-open:before{opacity:1}
/* lato chiuso: numero romano + parola in verticale */
.fx-acc-side{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;transition:opacity .45s}
.fx-acc-rom{font-family:var(--serif);font-size:1.15rem;color:var(--gold-soft);opacity:.8}
.fx-acc-word{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#b5ac9a;white-space:nowrap}
.fx-acc-item.is-open .fx-acc-side{opacity:0;pointer-events:none}
/* contenuto aperto */
.fx-acc-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:34px 36px;opacity:0;transform:translateY(16px);transition:opacity .5s .18s,transform .6s .18s var(--ease,cubic-bezier(.22,.61,.36,1))}
.fx-acc-item.is-open .fx-acc-body{opacity:1;transform:none}
.fx-acc-k{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft)}
.fx-acc-title{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:500;color:#fff;line-height:1.14}
.fx-acc-text{color:#d3ccbc;font-weight:300;font-size:.96rem;line-height:1.7;max-width:44ch}
@media (max-width:960px){
  .fx-acc{flex-direction:column;height:auto;gap:10px}
  .fx-acc-item{flex:none;min-height:76px;transition:min-height .6s var(--ease,cubic-bezier(.22,.61,.36,1)),border-color .5s,background .5s}
  .fx-acc-item.is-open{flex:none;min-height:300px}
  .fx-acc-side{flex-direction:row;justify-content:flex-start;gap:16px;padding:0 24px;align-items:center}
  .fx-acc-word{writing-mode:horizontal-tb;transform:none}
}


/* logo nell'orbita (chi siamo) */
.fx-orbit-logo{width:66%;height:auto;display:block;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}

/* tilt leggero generico (statistiche, card capacità) */
[data-fxtilt]{transition:transform .35s var(--ease,cubic-bezier(.22,.61,.36,1)),box-shadow .45s;will-change:transform}

/* ============================================================================
   5. HOME — VISTA SU LUGANO (.fx-vista)  — banda fotografica con parallasse
   ========================================================================== */
/* Effetto «finestra»: l'immagine resta FERMA rispetto allo schermo mentre i
   testi scorrono sopra di lei — la sezione è solo un ritaglio (clip-path)
   attraverso cui si vede la fotografia fissa. Niente nero tra le sezioni. */
.fx-vista{position:relative;height:min(78vh,620px);overflow:hidden;background:#0d0c0a;clip-path:inset(0 0 0 0)}
.fx-vista-img{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;filter:saturate(.92) brightness(.86)}
.fx-vista:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,10,.86) 0%,rgba(13,12,10,.28) 34%,rgba(13,12,10,.30) 66%,rgba(13,12,10,.92) 100%)}
.fx-vista-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:64px}
.fx-vista-quote{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.2;color:#fff;max-width:24ch;margin:0;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.fx-vista-quote .gold{color:var(--gold-soft)}
.fx-vista .fx-eyebrow{margin-bottom:14px}

/* ============================================================================
   6. HOME — TRITTICO FOTOGRAFICO (.fx-gallery) — immagini che si espandono
   ========================================================================== */
.fx-gallery-wrap{padding:110px 0;background:linear-gradient(180deg,#12110f,#14130e 60%,#12110f)}
.fx-gallery{display:flex;gap:14px;height:440px;margin-top:52px}
.fx-shot{position:relative;flex:1;min-width:0;border-radius:var(--r-lg,26px);overflow:hidden;cursor:pointer;border:1px solid rgba(214,199,164,.16);outline:none;transition:flex .8s var(--ease,cubic-bezier(.22,.61,.36,1)),border-color .5s,box-shadow .6s}
.fx-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82);transform:scale(1.08);transition:transform 1.2s var(--ease,cubic-bezier(.22,.61,.36,1)),filter .8s}
.fx-shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(13,12,10,.88) 100%)}
.fx-shot:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}
.fx-shot.is-open{flex:2.4;border-color:var(--gold-2);box-shadow:0 34px 70px -36px rgba(163,137,95,.6)}
.fx-shot.is-open img{transform:scale(1);filter:saturate(1) brightness(.95)}
.fx-shot-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 28px;display:flex;flex-direction:column;gap:6px}
.fx-shot-k{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft)}
.fx-shot-t{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.55rem);font-weight:500;color:#fff;line-height:1.15}
.fx-shot-s{color:#d3ccbc;font-weight:300;font-size:.9rem;line-height:1.6;max-width:46ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease,cubic-bezier(.22,.61,.36,1)),opacity .6s .12s}
.fx-shot.is-open .fx-shot-s{max-height:120px;opacity:1}
@media (max-width:960px){
  .fx-vista{height:56vh}
  .fx-gallery{flex-direction:column;height:auto}
  .fx-shot{flex:none;height:120px;transition:height .7s var(--ease,cubic-bezier(.22,.61,.36,1)),border-color .5s}
  .fx-shot.is-open{flex:none;height:340px}
  .fx-gallery-wrap{padding:78px 0}
}