/* ==================================================================
   LDL — pagina Approfondimenti.

   Due problemi risolti qui. Il primo: l'intestazione era ferma e non
   invitava a scendere; ora il fondo respira, il testo entra in scena e
   una freccia luminosa porta alle schede. Il secondo: le schede erano
   paragrafi grigi su fondo bianco, tutti uguali; ora sono riquadri blu
   notte che si girano e mostrano l'estratto dell'approfondimento.

   Il foglio viene caricato solo da questa pagina.
   ================================================================== */

/* ============================================ 1. L'INTESTAZIONE ===== */
.hero-appr{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1100px 640px at 18% -12%, rgba(0,180,205,.20), transparent 60%),
    radial-gradient(880px 600px at 88% 112%, rgba(0,110,150,.24), transparent 62%),
    linear-gradient(158deg,#002C40 0%,#00202E 54%,#001A26 100%),
    #00202E;
  padding-block:clamp(84px,9.5vw,124px) clamp(84px,9vw,116px);
}

/* gli aloni che derivano, lentissimi */
.hero-appr .campo{
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(440px 440px at 26% 28%, rgba(0,233,250,.15), transparent 58%),
    radial-gradient(540px 540px at 74% 66%, rgba(0,150,190,.17), transparent 60%);
  animation:apprDeriva 38s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes apprDeriva{
  from{transform:translate3d(-2%,-1.5%,0) scale(1)}
  to  {transform:translate3d(2.6%,2%,0) scale(1.07)}
}

/* la trama di triangoli del marchio */
.hero-appr .trama{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'>\
<path d='M48 14 L80 70 L16 70 Z' fill='none' stroke='%2300E9FA' stroke-opacity='0.085' stroke-width='1.1'/>\
</svg>");
  background-size:96px 84px;
  animation:apprSale 50s linear infinite;
}
@keyframes apprSale{ from{background-position:0 0} to{background-position:0 -840px} }

/* il velo sta SOPRA l'animazione e SOTTO il testo: il contrasto non
   dipende mai da dove si trovano gli aloni in quel momento */
.hero-appr::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,rgba(0,26,38,.72) 0%,rgba(0,26,38,.46) 50%,rgba(0,26,38,.20) 100%);
}
.hero-appr > .container{position:relative; z-index:2}

/* il testo entra sfalsato. Nessuna classe nascondente: se le animazioni
   non fossero supportate, il testo resta semplicemente visibile. */
.hero-appr .breadcrumbs{color:#C2D6DC;animation:apprSu .7s cubic-bezier(.22,1,.3,1) both}
.hero-appr h1          {animation:apprSu .9s cubic-bezier(.22,1,.3,1) .10s both; max-width:23ch}
.hero-appr .lead       {animation:apprSu .9s cubic-bezier(.22,1,.3,1) .22s both; color:#CFE0E6}
.hero-appr .vai        {animation:apprSu .9s cubic-bezier(.22,1,.3,1) .36s both}
@keyframes apprSu{ from{opacity:0;transform:translate3d(0,18px,0)} to{opacity:1;transform:none} }

/* ------------------------------- la freccia che porta alle schede --- */
.hero-appr .vai{display:flex;align-items:center;gap:14px;margin-top:38px}
.freccia{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;flex:none;border-radius:50%;
  border:1px solid rgba(0,233,250,.55);
  background:radial-gradient(circle at 50% 35%, rgba(0,233,250,.20), rgba(0,233,250,.05));
  color:var(--cyan); text-decoration:none;
  box-shadow:0 0 0 0 rgba(0,233,250,.35);
  animation:apprPulsa 2.6s ease-out infinite, apprSalta 2.6s ease-in-out infinite;
  transition:transform .28s cubic-bezier(.22,1,.3,1), border-color .28s ease, background .28s ease;
}
.freccia svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.freccia-testo{font-family:'Jura',system-ui,sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:#A9DCE4}
@keyframes apprPulsa{
  0%  {box-shadow:0 0 0 0 rgba(0,233,250,.40)}
  70% {box-shadow:0 0 0 16px rgba(0,233,250,0)}
  100%{box-shadow:0 0 0 0 rgba(0,233,250,0)}
}
@keyframes apprSalta{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@media (hover:hover){
  .freccia:hover{animation-play-state:paused;transform:translateY(5px) scale(1.06);
    border-color:var(--cyan);background:rgba(0,233,250,.22)}
}
.freccia:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

/* ============================================ 2. LE SCHEDE ========== */
.schede-intro{
  display:flex;align-items:center;gap:11px;margin:0 0 24px;
  color:#44606B;font-size:.93rem;
}
.schede-intro svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--cyan-dark);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.schede{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.scheda{perspective:1400px}
.scheda-int{
  position:relative; display:grid; height:100%;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.3,.9,.3,1);
}
.scheda.girata .scheda-int{transform:rotateY(180deg)}

/* Le due facce occupano la STESSA cella della griglia: il riquadro
   prende naturalmente l'altezza della faccia piu' alta, senza misure
   fisse e senza JavaScript che calcoli le altezze. */
.scheda .faccia{
  grid-area:1/1; position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  padding:26px; border-radius:18px;
  border:1px solid rgba(0,233,250,.22);
  background:linear-gradient(158deg,rgba(0,58,82,.97) 0%,rgba(0,32,46,.98) 58%,rgba(0,24,35,.99) 100%);
  color:#EAF4F6;
  box-shadow:0 10px 30px rgba(0,32,46,.16);
  transition:border-color .3s ease, box-shadow .3s ease;
}
/* l'alone sfocato dentro il riquadro: da' profondita' senza togliere
   leggibilita', perche' resta dietro al testo e molto diluito */
.scheda .faccia::before{
  content:""; position:absolute; z-index:-1; inset:auto -40px -60px auto;
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,233,250,.34), transparent 70%);
  filter:blur(38px); opacity:.75; pointer-events:none;
}
.scheda .fronte{cursor:pointer}
.scheda .retro{transform:rotateY(180deg)}

/* la faccia nascosta non deve essere raggiungibile da tastiera */
.scheda .retro{visibility:hidden;transition:visibility 0s .34s}
.scheda.girata .retro{visibility:visible}
.scheda.girata .fronte{visibility:hidden;transition:visibility 0s .34s}

.scheda .insight-meta{color:var(--cyan);margin-bottom:14px}
.scheda h3{font-size:1.15rem;color:#fff;margin:0 0 10px}
.scheda .sintesi{color:#BFD6DD;font-size:.93rem;margin:0}
.scheda .retro p{color:#CFE2E7;font-size:.95rem;margin:0 0 18px}
/* le fonti si fermavano a 6,93:1, sette centesimi sotto la soglia AAA
   che il resto del sito rispetta */
.scheda small{margin-top:auto;color:#A8CAD3;
  border-top:1px solid rgba(255,255,255,.14);padding-top:15px;display:block}

/* il comando che dichiara che la scheda si gira */
.gira,.torna{
  margin-top:16px; align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Jura',system-ui,sans-serif;font-weight:700;font-size:.80rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);background:rgba(0,233,250,.09);
  border:1px solid rgba(0,233,250,.42);border-radius:999px;
  padding:9px 16px;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.gira svg,.torna svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.22,1,.3,1)}
.scheda .apri{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  color:#fff;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(0,233,250,.55);padding-bottom:3px;
}
.scheda .torna{margin-top:16px;color:#A9DCE4;border-color:rgba(255,255,255,.26);background:transparent}

@media (hover:hover){
  .scheda .fronte:hover{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,233,250,.25),0 16px 40px rgba(0,32,46,.26)}
  .scheda .fronte:hover .gira{background:rgba(0,233,250,.20);border-color:var(--cyan)}
  .scheda .fronte:hover .gira svg{transform:rotate(180deg)}
  .gira:hover,.torna:hover{background:rgba(0,233,250,.20);border-color:var(--cyan);color:#fff}
  .scheda .apri:hover{border-bottom-color:var(--cyan)}
}
.gira:focus-visible,.torna:focus-visible,.scheda .apri:focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px}

/* le schede compaiono salendo, una dopo l'altra, quando entrano nello
   schermo. La classe che le nasconde la mette il JavaScript: senza
   JavaScript restano semplicemente visibili. */
.js-rivela .scheda{opacity:0;transform:translate3d(0,26px,0)}
.js-rivela .scheda.vista{opacity:1;transform:none;
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,1,.3,1)}

@media(max-width:1000px){
  .schede{grid-template-columns:1fr 1fr}
  .hero-appr h1{max-width:none}
}
@media(max-width:700px){
  .schede{grid-template-columns:1fr}
  .hero-appr .vai{gap:11px}
  .freccia{width:48px;height:48px}
  .freccia-testo{font-size:.76rem;letter-spacing:.10em}
}

/* chi ha chiesto meno movimento non deve vedere nulla muoversi:
   le schede si girano lo stesso, ma senza rotazione */
@media (prefers-reduced-motion:reduce){
  .hero-appr .campo,.hero-appr .trama,
  .hero-appr .breadcrumbs,.hero-appr h1,.hero-appr .lead,.hero-appr .vai{animation:none}
  .freccia{animation:none}
  .freccia:hover{transform:none}
  .scheda-int{transition:none}
  .js-rivela .scheda{opacity:1;transform:none}
  .gira svg,.torna svg{transition:none}
}