/**
 * Pagina Chi siamo — citazione + fullscreen expand.
 */
.chi-siamo-quote-shell {
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    rgba(0, 210, 255, 0.12),
    transparent 55%
  );
}
html.light .chi-siamo-quote-shell {
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    rgba(0, 210, 255, 0.14),
    transparent 58%
  );
}

body.chi-siamo-expand-lock {
  overflow: hidden;
}

.chi-siamo-expand-spacer {
  flex-shrink: 0;
}

.chi-siamo-expand-backdrop {
  display: none;
}

.chi-siamo-expandable {
  position: relative;
}

.chi-siamo-expandable--open {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  /* Layer composito per overlay opaco (60 Hz) */
  transform: translate3d(0, 0, 0);
  isolation: isolate;
}

.chi-siamo-expandable--open .chi-siamo-expand-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: default;
  /* Blur leggero: backdrop-filter è costoso e fa scendere gli fps */
  background: rgba(11, 17, 32, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translate3d(0, 0, 0);
}

html.light .chi-siamo-expandable--open .chi-siamo-expand-backdrop {
  background: rgba(248, 250, 252, 0.94);
}

.chi-siamo-expandable__surface {
  position: relative;
  z-index: 1;
  width: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.chi-siamo-expandable--open .chi-siamo-expandable__surface {
  max-height: min(90vh, 920px);
  overflow-y: auto;
  width: min(100%, 40rem);
  -webkit-overflow-scrolling: touch;
}

.chi-siamo-expandable--wide.chi-siamo-expandable--open .chi-siamo-expandable__surface {
  width: min(100%, 56rem);
}

@keyframes chi-siamo-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chi-siamo-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes chi-siamo-panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.93);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes chi-siamo-panel-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.94;
    transform: translate3d(0, 12px, 0) scale(0.96);
  }
}

/* Keyframe solo opacity + transform (compositing GPU, obiettivo ~60 fps) */
.chi-siamo-expandable--open:not(.chi-siamo-expandable--closing) {
  animation: chi-siamo-overlay-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.chi-siamo-expandable--open:not(.chi-siamo-expandable--closing) .chi-siamo-expandable__surface {
  animation: chi-siamo-panel-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chi-siamo-expandable--closing {
  animation: chi-siamo-overlay-out 0.34s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.chi-siamo-expandable--closing .chi-siamo-expandable__surface {
  animation: chi-siamo-panel-out 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .chi-siamo-expandable--open:not(.chi-siamo-expandable--closing),
  .chi-siamo-expandable--closing,
  .chi-siamo-expandable--open:not(.chi-siamo-expandable--closing) .chi-siamo-expandable__surface,
  .chi-siamo-expandable--closing .chi-siamo-expandable__surface {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.chi-siamo-card--square .chi-siamo-card-icon-wrap {
  margin-left: auto;
  margin-right: auto;
}