/* Icon tuning: 6s drift, 4px travel and 0.35 mouse-lean factor keep small art calm. */
:root {
  --ico3d-float-duration: 6s;
  --ico3d-float-distance: -4px;
  --ico3d-lean: .35;
}
.ico3d-sampler { position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; overflow: visible; }
.ico.has3d > svg { display: none; }
.ico > .ico3d {
  display: block; width: 82%; height: 82%; object-fit: contain; grid-area: 1 / 1;
  pointer-events: none; user-select: none;
  transform: rotateX(calc(var(--rx, 0deg) * var(--ico3d-lean))) rotateY(calc(var(--ry, 0deg) * var(--ico3d-lean)));
  animation: ico3d-float var(--ico3d-float-duration) ease-in-out infinite;
}
/* 88% gives large tiles more presence; the raster already includes its own breathing room. */
.ico.ico-xl > .ico3d { width: 88%; height: 88%; }
@keyframes ico3d-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--ico3d-float-distance); }
}

#advantage .ico3d-carousel {
  /* 224px panels / 238px radius leave gaps; 1100px perspective keeps labels readable. */
  --ico3d-card-width: 224px;
  --ico3d-card-height: 264px;
  --ico3d-radius: 238px;
  --ico3d-perspective: 1100px;
  position: relative; margin-top: 48px; isolation: isolate;
}
.ico3d-viewport {
  position: relative; height: 360px; perspective: var(--ico3d-perspective);
  perspective-origin: 50% 44%; touch-action: pan-y; cursor: grab;
}
/* Static halo: no animated blur, paint or gradients during rotation. */
.ico3d-viewport::before {
  content: ''; position: absolute; inset: 14% 12% 2%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(124,195,173,.14), transparent 66%);
}
.ico3d-viewport:focus-visible { outline: 2px solid var(--mint-300, #a8d0c0); outline-offset: 4px; border-radius: 24px; }
#advantage .cards.adv.ico3d-ring {
  display: block; position: absolute; left: 50%; top: 42%; width: 0; height: 0;
  padding: 0; margin: 0; transform-style: preserve-3d;
}
#advantage .adv.ico3d-ring > .ico3d-card {
  position: absolute; left: calc(var(--ico3d-card-width) / -2); top: calc(var(--ico3d-card-height) / -2);
  width: var(--ico3d-card-width); height: var(--ico3d-card-height); min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 24px 18px; text-align: center; border-radius: 32px;
  background: linear-gradient(150deg, rgba(24,96,82,.96), rgba(2,23,20,.97));
  box-shadow: inset 0 1px 0 rgba(214,239,230,.25), inset 0 -1px 0 rgba(0,0,0,.45), 0 0 0 1px rgba(168,208,192,.2), 0 28px 46px -28px rgba(0,0,0,.85);
  /* Remove inherited card tilt/reveal transitions: carousel owns these transforms. */
  backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; will-change: auto;
  transform: rotateY(var(--ico3d-position)) translateZ(var(--ico3d-radius));
  backface-visibility: visible;
}
#advantage .adv.ico3d-ring > .ico3d-card::before { display: none; }
#advantage .adv.ico3d-ring > .ico3d-card p {
  margin: 0; max-width: 18ch; font: 400 22px/1.22 var(--serif, Georgia, serif);
  color: var(--text-on-dark, #e9f4ef); text-wrap: balance;
}
#advantage .adv.ico3d-ring .ico {
  /* 144px support tile leaves room for two-line labels in a 264px panel. */
  width: 144px; height: 144px; border-radius: 40px; margin: 0;
  background: radial-gradient(circle at 35% 20%, rgba(214,239,230,.12), transparent 68%);
  box-shadow: none;
}
#advantage .adv.ico3d-ring .ico::after { display: none; }
#advantage .adv.ico3d-ring .ico svg { width: 82%; height: 82%; }
/* 132% compensates for the raster's transparent margin: visible art is about 120px. */
#advantage .adv.ico3d-ring .ico > .ico3d { width: 132%; height: 132%; max-width: none; }
.ico:not(.ico3d-in-view) > .ico3d { animation-play-state: paused; }
.ico3d-carousel:not(.ico3d-visible) .ico3d { animation-play-state: paused; }
.ico3d-dragging .ico3d-viewport { cursor: grabbing; user-select: none; }
.ico3d-controls { display: flex; justify-content: center; align-items: center; gap: 18px; position: relative; }
.ico3d-controls button {
  /* 44px targets support touch and keyboard; only transforms respond to hover. */
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  padding: 0; border: 1px solid rgba(168,208,192,.3); border-radius: 50%;
  color: var(--mint-100, #e3f1eb); background: rgba(15,92,85,.38);
  font: 400 22px/1 var(--sans, system-ui); cursor: pointer;
  transition: transform .2s ease;
}
.ico3d-controls button:hover { transform: translateY(-2px); }
.ico3d-controls button:focus-visible { outline: 2px solid var(--mint-300, #a8d0c0); outline-offset: 4px; }
.ico3d-dots { display: flex; align-items: center; gap: 0; }
.ico3d-dots button { position: relative; width: 28px; height: 44px; background: transparent; border: 0; border-radius: 12px; }
.ico3d-dots button::after {
  /* 6px dots within generous targets; current dot expands through transform only. */
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint-300, #a8d0c0); opacity: .35; transition: transform .3s ease, opacity .3s ease;
}
.ico3d-dots button[aria-current='true']::after { opacity: 1; transform: scale(1.5); }
.ico3d-controls .ico3d-pause { font-size: 16px; }
.ico3d-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.review .ico3d-pause, html.ico3d-reduced .ico3d-pause, .ico3d-mobile .ico3d-pause { display: none; }
html.ico3d-reduced .ico3d { animation: none; transform: none; }
html.ico3d-reduced .ico3d-controls button, html.ico3d-reduced .ico3d-dots button::after { transition: none; }

/* 699px matches the JS query exactly; native scrolling replaces all ring transforms. */
@media (max-width: 699px) {
  #advantage .ico3d-carousel { margin-top: 32px; }
  .ico3d-viewport { height: auto; perspective: none; cursor: auto; touch-action: auto; }
  .ico3d-viewport::before { display: none; }
  #advantage .cards.adv.ico3d-ring {
    display: flex; position: relative; inset: auto; width: 100%; height: auto;
    gap: 16px; padding: 16px 8px 32px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: 8px;
    overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--mint-400, #7cc3ad) transparent;
    transform: none !important; transform-style: flat;
  }
  #advantage .adv.ico3d-ring > .ico3d-card {
    position: relative; inset: auto; flex: 0 0 min(80%, 264px); height: var(--ico3d-card-height);
    scroll-snap-align: start; scroll-snap-stop: always; transform: none !important; opacity: 1 !important;
  }
  .ico3d-controls { gap: 10px; }
  .ico3d-dots button { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ico > .ico3d { animation: none; transform: none; }
  .ico3d-controls button, .ico3d-dots button::after { transition: none; }
}