/* XYR 2.2 — movimento continuo, controlli e scrittura da terminale. */
.motion-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  border: 1px solid #58e5ee38;
  border-radius: 7px 2px 7px 2px;
  background: #0c0f2ba6;
  color: #bde8eb;
  font-size: 14px;
}
.motion-toggle:hover { border-color: var(--cyan); color: white; }
.plans-section { overflow: hidden; }
.plans-carousel {
  --plan-width: clamp(246px, 22vw, 296px);
  --plan-gap: 26px;
  position: relative;
  width: min(1536px, calc(100% - 32px));
  margin: -15px auto 0;
}
.plans-viewport {
  margin: 0 62px;
  padding-block: 30px 35px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: auto;
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 14px, #000000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 14px, #000000 calc(100% - 14px), transparent);
}
.plans-viewport::-webkit-scrollbar { display: none; }
.plans-track {
  display: flex;
  width: max-content;
  gap: var(--plan-gap);
  padding: 0;
  overflow-anchor: none;
}
.plans-track .plan-card {
  flex: 0 0 var(--plan-width);
  width: var(--plan-width);
  min-height: 285px;
  --accent: var(--cyan);
  --accent-rgb: var(--cyan-rgb);
}
.plans-track .plan-card:is([data-plan="matrimonio"], [data-plan="eventi"], [data-plan="allenamento"], [data-plan="shooting"]) {
  --accent: var(--violet);
  --accent-rgb: var(--violet-rgb);
}
.carousel-arrow {
  position: absolute;
  top: 143px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 56px;
  padding: 0;
  border: 1px solid #58e5ee60;
  border-radius: 12px 3px 12px 3px;
  background: linear-gradient(135deg, #171c48, #090b22);
  color: #a7f9ff;
  box-shadow: inset 0 0 15px #58e5ee0c, 0 0 18px #00000088;
  font-size: 27px;
  line-height: 1;
  touch-action: none;
  user-select: none;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.carousel-arrow-left { left: 1px; }
.carousel-arrow-right { right: 1px; }
.carousel-arrow:is(:hover, :focus-visible, .is-accelerating) {
  color: #ffffff;
  border-color: var(--violet);
  box-shadow: inset 0 0 17px #a779ff14, 0 0 18px #a779ff26;
}
.carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 63px;
  padding-top: 2px;
  color: #8d93bc;
}
.carousel-footer > span { font-size: 12px; letter-spacing: 1.5px; }
.carousel-pause {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 5px 0 5px 12px;
  color: #a9aecf;
  border: 0;
  background: none;
  font-size: 14px;
}
.carousel-pause > span:first-child { color: var(--cyan); width: 14px; }
.carousel-pause:hover { color: white; }
#plan-dialog-description { position: relative; }
.terminal-layout { display: block; visibility: hidden; }
.terminal-output { position: absolute; inset: 0; }
.is-typing .terminal-output::after {
  content: '';
  display: inline-block;
  width: .48em;
  height: .95em;
  margin-left: .15em;
  vertical-align: -.08em;
  background: #8be5eb;
  box-shadow: 0 0 9px #64dce566;
  animation: terminal-cursor .65s steps(1) infinite;
}
@keyframes terminal-cursor { 50% { opacity: .2; } }
@media (max-width: 700px) {
  .plans-carousel { --plan-width: calc(100vw - 112px); --plan-gap: 19px; width: calc(100% - 16px); margin-top: -12px; }
  .plans-viewport { margin-inline: 38px; padding-block: 24px 27px; }
  .plans-track .plan-card { min-height: 275px; padding-inline: 23px; }
  .plans-track .plan-title { font-size: 19px; }
  .carousel-arrow { width: 32px; height: 51px; top: 136px; font-size: 23px; }
  .carousel-footer { margin-inline: 38px; flex-wrap: wrap; gap: 0 12px; }
  .carousel-footer > span { font-size: 11px; letter-spacing: .8px; }
  .carousel-pause { padding-left: 0; font-size: 13px; }
  .motion-toggle { width: 32px; height: 32px; margin-left: 4px; }
  .hero-bottom { flex-wrap: wrap; row-gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-typing .terminal-output::after { display: none; }
}

/* XYR 4.5 · Stabilità del carosello Ecosistemi su smartphone/touch.
   Su mobile non usiamo più la maschera + movimento continuo, combinazione che
   su alcuni browser Android produceva frammenti delle schede adiacenti. */
@media (hover: none) and (pointer: coarse) {
  .plans-viewport {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .plans-track .plan-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }
  .plans-track .plan-card .panel-fx { overflow: hidden; }
  .carousel-pause { display: none !important; }
  .carousel-footer { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .plans-carousel {
    --plan-width: calc(100vw - 92px);
    --plan-gap: 16px;
  }
  .plans-viewport {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .plans-track .plan-card {
    flex: 0 0 var(--plan-width);
    width: var(--plan-width);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }
  .carousel-pause { display: none !important; }
  .carousel-footer { justify-content: flex-start; }
}

@media (max-width: 359px) {
  .plans-carousel {
    --plan-width: calc(100vw - 78px);
    width: calc(100% - 8px);
  }
  .plans-viewport { margin-inline: 35px; }
  .carousel-footer { margin-inline: 35px; }
  .carousel-arrow { width: 30px; }
}