/* =========================================================
   AVIAZIONE — cielo, simulatore d'ala, storia, velocità
   ========================================================= */
.avia-hero { --hero-glow: rgb(90 170 255 / 16%); }

/* ---------- cielo animato ---------- */
.sky {
  --bx: 0; --by: 0;
  position: relative;
  justify-self: center;
  width: min(100%, 620px);
  aspect-ratio: 600 / 420;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 80% 18%, rgb(255 216 164 / 38%), transparent 30%),
    linear-gradient(180deg, #0c2748 0%, #1d4f86 45%, #6d91b8 78%, #d8b78e 100%);
  box-shadow: 0 40px 120px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(255 255 255 / 8%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 70%, transparent 100%);
}
.sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plane-rig {
  transform: translate(calc(var(--bx) * 14px), calc(var(--by) * 10px));
  transition: transform 1.2s var(--ease-out);
}
.plane { animation: cruise 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cruise {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -8px; rotate: -2deg; }
}
.contrail { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .8; stroke-dasharray: 520; animation: trail 2.2s var(--ease-out) both .8s; }
.contrail-2 { stroke-width: 2; opacity: .55; animation-delay: 1s; }
@keyframes trail { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }

.cloud {
  position: absolute;
  width: var(--w, 200px);
  height: calc(var(--w, 200px) * .34);
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 60%, rgb(255 255 255 / var(--o, .7)), rgb(255 255 255 / 0) 70%);
  filter: blur(4px);
  animation: drift var(--t, 22s) linear infinite;
  animation-delay: var(--dl, 0s);
}
.c1 { --w: 260px; --o: .55; --t: 18s; top: 58%; }
.c2 { --w: 180px; --o: .4; --t: 26s; --dl: -10s; top: 30%; }
.c3 { --w: 320px; --o: .6; --t: 14s; --dl: -6s; top: 76%; }
.c4 { --w: 140px; --o: .35; --t: 32s; --dl: -20s; top: 14%; }
@keyframes drift { from { transform: translateX(640px); } to { transform: translateX(-360px); } }

/* ---------- simulatore d'ala ---------- */
.wing-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.formula {
  margin: 1.4rem 0 !important;
  padding: 1rem 1.3rem;
  border-left: 2px solid var(--amber);
  border-radius: 0 12px 12px 0;
  background: rgb(240 181 110 / 6%);
  color: var(--ink) !important;
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  font-weight: 300;
  letter-spacing: .04em;
}
.wing { position: sticky; top: calc(var(--nav-h) + 1rem); padding: clamp(1rem, 2.6vw, 1.8rem); }
.wing-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgb(58 134 230 / 10%), transparent 60%),
    #050912;
}
.wing-stage svg { display: block; width: 100%; height: auto; }
.wing-stage .flow { fill: none; stroke: rgb(184 214 255 / 42%); stroke-width: 1.3; stroke-dasharray: 10 14; animation: flow var(--fs, 1.2s) linear infinite; }
.wing-stage .flow.turb { stroke: rgb(255 170 150 / 45%); }
@keyframes flow { to { stroke-dashoffset: -24; } }
.wing-stage .foil { fill: #dfe5ef; stroke: #fff; stroke-width: .6; }
.wing-stage .chord { stroke: rgb(240 181 110 / 55%); stroke-width: 1; stroke-dasharray: 3 4; }
.wing-stage .wind { fill: var(--ink-mute); font-size: 11px; font-family: Montserrat, system-ui, sans-serif; }
.wing-stage .arrow line { stroke-width: 3; stroke-linecap: round; }
.wing-stage .arrow text { font-size: 12px; font-weight: 600; font-family: Montserrat, system-ui, sans-serif; letter-spacing: .04em; }
.wing-stage .a-lift line { stroke: #7fb2ff; } .wing-stage .a-lift path { fill: #7fb2ff; } .wing-stage .a-lift text { fill: #a9ccff; }
.wing-stage .a-weight line { stroke: #c9d0dc; } .wing-stage .a-weight path { fill: #c9d0dc; } .wing-stage .a-weight text { fill: #c9d0dc; }
.wing-stage .a-drag line { stroke: #ffb27a; } .wing-stage .a-drag path { fill: #ffb27a; } .wing-stage .a-drag text { fill: #ffc9a3; }
.wing-stage .a-thrust line { stroke: #86dcae; } .wing-stage .a-thrust path { fill: #86dcae; } .wing-stage .a-thrust text { fill: #a9e8c6; }
.wing-stage .vortex { fill: none; stroke: rgb(255 170 150 / 50%); stroke-width: 1.2; stroke-dasharray: 5 4; transform-box: fill-box; transform-origin: center; animation: rot 1.4s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.stall-badge {
  position: absolute;
  top: .9rem; right: .9rem;
  padding: .35rem .8rem;
  border: 1px solid var(--hold);
  border-radius: 999px;
  background: rgb(255 138 122 / 14%);
  color: var(--hold);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.wing-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; margin-top: 1.2rem; }
.wing-read {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin: 1.2rem 0 .6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.wing-read dt { color: var(--ink-mute); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.wing-read dd { margin: .25rem 0 0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 250; font-variant-numeric: tabular-nums; }
.wing-status { min-height: 1.5em; margin-bottom: .6rem; font-size: .92rem; }
.wing-status b { font-weight: 600; }
.wing-status[data-s="up"] b { color: var(--go); }
.wing-status[data-s="level"] b { color: var(--ice); }
.wing-status[data-s="down"] b { color: var(--amber-soft); }
.wing-status[data-s="stall"] b { color: var(--hold); }

/* ---------- storia del volo ---------- */
.flight-log { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 1.5rem; }
.fl-line { position: relative; grid-row: 1; grid-column: 1; justify-self: center; width: 1px; background: var(--line-strong); }
.fl-fill { position: absolute; inset: 0 0 auto; height: calc(var(--fp, 0) * 100%); background: linear-gradient(180deg, var(--ice), var(--amber)); }
.fl-plane {
  position: absolute;
  left: 50%;
  top: calc(var(--fp, 0) * 100%);
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
  filter: drop-shadow(0 0 12px rgb(240 181 110 / 50%));
}
.fl-list { grid-row: 1; grid-column: 2; margin: 0; padding: 0; list-style: none; }
.fl-list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
}
.fl-year { color: var(--amber-soft); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 200; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fl-list h3 { font-size: 1.3rem; font-weight: 400; letter-spacing: -.02em; }
.fl-list p { max-width: 60ch; margin-top: .45rem; color: var(--ink-soft); font-weight: 300; line-height: 1.7; }

/* ---------- grafico velocità ---------- */
.speed { margin: 0; padding: clamp(1.2rem, 3vw, 2.2rem); }
.speed-chart { position: relative; }
.speed-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.speed-chart .bar { fill: var(--c-blue); transition: opacity .25s; }
.speed-chart .row:hover .bar { opacity: .82; }
.speed-chart .cat { fill: var(--ink); font-size: 13px; font-family: Montserrat, system-ui, sans-serif; }
.speed-chart .yr { fill: var(--ink-mute); font-size: 11px; font-family: Montserrat, system-ui, sans-serif; }
.speed-chart .val { fill: var(--ink-soft); font-size: 12px; font-family: Montserrat, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.speed-chart .grid line { stroke: rgb(205 222 255 / 8%); }
.speed-chart .axis text { fill: var(--ink-mute); font-size: 11px; font-family: Montserrat, system-ui, sans-serif; }
.speed-chart .mach line { stroke: var(--amber-soft); stroke-width: 1; opacity: .7; }
.speed-chart .mach text { fill: var(--amber-soft); font-size: 11px; font-family: Montserrat, system-ui, sans-serif; }
.speed-chart .hit { fill: transparent; }
.js .speed-chart .bar { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 1.4s var(--ease-out); transition-delay: calc(var(--i) * 120ms); }
.js .speed-chart .val { opacity: 0; transition: opacity .6s; transition-delay: calc(var(--i) * 120ms + .9s); }
.js .speed.in .speed-chart .bar { transform: none; }
.js .speed.in .speed-chart .val { opacity: 1; }
.speed-tip {
  position: absolute;
  z-index: 3;
  padding: .55rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgb(7 10 17 / 95%);
  color: var(--ink);
  font-size: .78rem;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity .15s;
}
.speed-tip.on { opacity: 1; }

@media (max-width: 900px) {
  .wing-layout { grid-template-columns: 1fr; }
  .wing { position: relative; top: 0; }
  .sky { width: min(100%, 520px); }
}
@media (max-width: 600px) {
  .wing-controls { grid-template-columns: 1fr; }
  .flight-log { grid-template-columns: 30px minmax(0, 1fr); gap: 0 1rem; }
  .fl-list li { grid-template-columns: 1fr; gap: .2rem; }
  .fl-plane { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .plane, .wing-stage .flow, .wing-stage .vortex, .stall-badge { animation: none !important; }
}

@media (max-width: 600px) {
  .wing-stage .arrow text { font-size: 19px; }
  .wing-stage .wind { font-size: 17px; }
  .wing-read dt { font-size: .6rem; }
}