/* The shuttle stays at the centre of its own three-row stage. */
.ahead.ahead--shuttle { background-image: none; overflow-x: clip; overflow-y: visible; }
.ahead.ahead--shuttle .ahead__items {
  --shuttle-width: clamp(420px, 42vw, 760px);
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--shuttle-width) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 18px clamp(18px, 1.5vw, 28px);
  width: 100%; max-width: 1510px;
  margin: 18px auto 0; padding: 32px 0;
}
.ahead--shuttle .ahead__items::before {
  content: ""; position: absolute; z-index: -1;
  top: 50%; left: 50%; width: 100vw; aspect-ratio: 1920 / 1123;
  /* Keep clearance inside the mesh's curved top and bottom at the full swing. */
  height: max(calc(100vw * 1123 / 1920), calc(var(--shuttle-width) * 1.36 + 190px));
  transform: translate(-50%, -50%);
  background: url(/assets/themes/vrclub/assets/i/set.webp) center / 100% 100% no-repeat;
  pointer-events: none;
}
.ahead--shuttle .ahead__items > .collumn { display: contents; }
.ahead--shuttle .collumn1 > .ahead__item { grid-column: 1; }
.ahead--shuttle .collumn2 > .ahead__item { grid-column: 3; }
.ahead--shuttle .collumn > .ahead__item:nth-child(1) { grid-row: 1; }
.ahead--shuttle .collumn > .ahead__item:nth-child(2) { grid-row: 2; }
.ahead--shuttle .collumn > .ahead__item:nth-child(3) { grid-row: 3; }

.ahead--shuttle .ahead__img {
  position: relative; grid-column: 2; grid-row: 1 / span 3;
  align-self: center; justify-self: center;
  inset: auto; transform: none; z-index: 1;
  width: 100%; max-width: none; margin: 0; padding: 28px 0;
  perspective: 1400px; pointer-events: none;
}
.ahead--shuttle .ahead__img::before {
  content: ""; position: absolute; z-index: -1; inset: 12% 5%;
  background: radial-gradient(ellipse, #297ce632, #6b25bd20 46%, transparent 73%);
  filter: blur(24px);
  animation: tugan-shuttle-aura 12s ease-in-out infinite;
}
.ahead--shuttle .ahead__img img {
  display: block; width: 100%; max-width: none; height: auto;
  transform-origin: 50% 55%;
  filter: drop-shadow(0 0 14px #42c8ec32) drop-shadow(0 0 30px #782fe633);
  will-change: transform;
  animation: tugan-shuttle-flight 12s cubic-bezier(.45, 0, .55, 1) infinite both;
}

.ahead--shuttle .ahead__items .ahead__item {
  position: relative; z-index: 2; isolation: isolate;
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  align-self: center; align-items: center !important; justify-content: start !important;
  gap: 12px; margin: 0; padding: 18px 20px;
  width: auto; height: auto !important; min-width: 0; min-height: 0;
  text-align: left; border: 0; background: none;
}
.ahead--shuttle .ahead__items .ahead__item::before {
  display: block; z-index: -1;
  background: url(/assets/themes/vrclub/assets/i/v33.webp) center / 100% 100% no-repeat;
}
.ahead--shuttle .ahead__item-img {
  grid-column: 1; grid-row: 1; width: 36px; height: 44px; margin: 0;
}
.ahead--shuttle .ahead__item-img img {
  display: block; width: 100%; height: auto; max-height: 44px; object-fit: contain;
}
.ahead--shuttle .ahead__item-desc { grid-column: 2; grid-row: 1; min-width: 0; }
.ahead--shuttle .ahead__item-desc p { margin: 0; font-size: 16px; line-height: 1.45; }
.ahead--shuttle .ahead__item-desc strong {
  display: block; margin-bottom: 6px; font-size: 18px; line-height: 1.3;
}
.ahead--shuttle .ahead__items .collumn1 > .ahead__item {
  grid-template-columns: minmax(0, 1fr) 36px; text-align: right;
}
.ahead--shuttle .collumn1 .ahead__item-img { grid-column: 2; }
.ahead--shuttle .collumn1 .ahead__item-desc { grid-column: 1; }
.ahead--shuttle .ahead__content { padding-top: 36px; }

/* Move the complete card, including its copy, without overriding the reveal transform. */
@media (hover: hover) and (pointer: fine) {
  .ahead--shuttle .ahead__items .ahead__item {
    scale: 1;
    translate: 0 0;
    transform-origin: center;
    filter: drop-shadow(0 0 0 rgb(255 125 4 / 0));
    transition: scale .32s cubic-bezier(.2,.7,.3,1), translate .32s cubic-bezier(.2,.7,.3,1), filter .32s ease;
  }
  .ahead--shuttle .ahead__items .ahead__item::before {
    transition: filter .32s ease;
  }
  .ahead--shuttle .ahead__item-desc strong {
    transition: color .28s ease, text-shadow .28s ease;
  }
  .ahead--shuttle .ahead__item-img img {
    transition: scale .32s ease, filter .32s ease;
  }
  .ahead--shuttle .ahead__items .ahead__item:hover {
    z-index: 3;
    scale: 1.045;
    translate: 0 -4px;
    filter: drop-shadow(0 0 12px rgb(255 125 4 / .32));
  }
  .ahead--shuttle .ahead__items .ahead__item:hover::before {
    filter: brightness(1.15);
  }
  .ahead--shuttle .ahead__item:hover .ahead__item-desc strong {
    color: #91eaff;
    text-shadow: 0 0 16px rgb(0 200 255 / .2);
  }
  .ahead--shuttle .ahead__item:hover .ahead__item-img img {
    scale: 1.06;
    filter: drop-shadow(0 0 7px rgb(0 200 255 / .5));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ahead--shuttle .ahead__items .ahead__item,
  .ahead--shuttle .ahead__items .ahead__item::before,
  .ahead--shuttle .ahead__item-desc strong,
  .ahead--shuttle .ahead__item-img img {
    transition: none;
  }
  .ahead--shuttle .ahead__items .ahead__item:hover,
  .ahead--shuttle .ahead__item:hover .ahead__item-img img {
    scale: none;
    translate: none;
  }
}

@keyframes tugan-shuttle-flight {
  0%, 100% { transform: translate3d(28px, 9px, 0) rotateX(-2deg) rotateY(3.5deg) rotateZ(2deg); }
  25% { transform: translate3d(-32px, -24px, 0) rotateX(2deg) rotateY(-3.5deg) rotateZ(-2.4deg); }
  50% { transform: translate3d(-28px, 24px, 0) rotateX(-2deg) rotateY(-3.5deg) rotateZ(-2deg); }
  75% { transform: translate3d(32px, -9px, 0) rotateX(1.4deg) rotateY(3.5deg) rotateZ(2.4deg); }
}
@keyframes tugan-shuttle-aura {
  0%, 50%, 100% { opacity: .7; transform: translateX(3px) scale(.98, .94); }
  25%, 75% { opacity: 1; transform: translateX(-3px) scale(1.03, 1); }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .ahead--shuttle .ahead__items .ahead__item { padding: 16px; gap: 10px; }
  .ahead--shuttle .ahead__item-desc p { font-size: 15px; }
  .ahead--shuttle .ahead__item-desc strong { font-size: 17px; }
}
@media (max-width: 1199px) {
  .ahead.ahead--shuttle .ahead__items {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto;
    gap: 18px; margin-top: 12px; padding: 20px 0;
  }
  .ahead--shuttle .ahead__items::before { display: none; }
  .ahead--shuttle .ahead__img {
    grid-column: 1 / -1; grid-row: 1;
    width: min(700px, calc(100% - 48px));
    margin: 0 0 22px; padding: 28px 0;
  }
  /* The mesh follows the craft instead of the tall card list on narrow layouts. */
  .ahead--shuttle .ahead__img::after {
    content: ""; position: absolute; z-index: -2;
    left: 50%; top: 50%; width: 100vw; aspect-ratio: 1920 / 1123;
    height: max(calc(100vw * 1123 / 1920), calc(190% + 60px));
    transform: translate(-50%, -50%);
    background: url(/assets/themes/vrclub/assets/i/set.webp) center / 100% 100% no-repeat;
    pointer-events: none;
  }
  .ahead--shuttle .collumn > .ahead__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .ahead--shuttle .ahead__items .ahead__item,
  .ahead--shuttle .ahead__items .collumn1 > .ahead__item {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 20px; gap: 14px; text-align: left; align-self: stretch;
  }
  .ahead--shuttle .ahead__item-img,
  .ahead--shuttle .collumn1 .ahead__item-img { grid-column: 1; width: 40px; }
  .ahead--shuttle .ahead__item-desc,
  .ahead--shuttle .collumn1 .ahead__item-desc { grid-column: 2; }
}
@media (max-width: 599px) {
  .ahead.ahead--shuttle .ahead__items {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px; margin-top: 8px; padding: 16px 0;
  }
  .ahead--shuttle .ahead__img {
    width: calc(100% - 24px); max-width: none;
    margin: 0 0 12px; padding: 20px 0; perspective: 900px;
  }
  .ahead--shuttle .ahead__img img { animation-name: tugan-shuttle-flight-mobile; }
  .ahead--shuttle .ahead__items .ahead__item,
  .ahead--shuttle .ahead__items .collumn1 > .ahead__item {
    grid-template-columns: 34px minmax(0, 1fr); padding: 18px; gap: 12px;
  }
  .ahead--shuttle .ahead__item-img,
  .ahead--shuttle .collumn1 .ahead__item-img { width: 34px; height: 42px; }
  .ahead--shuttle .ahead__item-img img { max-height: 42px; }
  .ahead--shuttle .ahead__item-desc p { font-size: 16px; line-height: 1.45; }
  .ahead--shuttle .ahead__item-desc strong { font-size: 17px; }
  .ahead--shuttle .ahead__content { padding-top: 28px; }
}
@keyframes tugan-shuttle-flight-mobile {
  0%, 100% { transform: translate3d(10px, 4px, 0) rotateX(-1.5deg) rotateY(2deg) rotateZ(1.5deg); }
  25% { transform: translate3d(-12px, -12px, 0) rotateX(1.5deg) rotateY(-2deg) rotateZ(-1.8deg); }
  50% { transform: translate3d(-10px, 12px, 0) rotateX(-1.5deg) rotateY(-2deg) rotateZ(-1.5deg); }
  75% { transform: translate3d(12px, -4px, 0) rotateX(1deg) rotateY(2deg) rotateZ(1.8deg); }
}