/* オープニング — 白背景・SVG 横一列・交互バウンス */
.opening {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4vw;
  background: #fff;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.opening.opening--hide {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.opening.opening--hide .opening__item {
  animation: none;
}

html.coconoca-opening-skip #site-opening {
  display: none !important;
}

.opening__row {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 3.5vw, 44px);
  width: 100%;
  max-width: min(100%, 1200px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.opening.opening--ready .opening__row {
  opacity: 1;
}

.opening__item {
  display: block;
  flex: 0 0 auto;
  width: clamp(44px, 11vw, 120px);
  min-width: 0;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  animation: opening-bounce 1.1s ease-in-out infinite;
}

.opening__item[data-opening-phase="b"] {
  animation-delay: -0.55s;
}

@keyframes opening-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(calc(-1 * clamp(10px, 1.5vw, 18px)));
  }
}

@media (max-width: 768px) {
  .opening {
    padding-inline: max(8px, env(safe-area-inset-left, 0px))
      max(8px, env(safe-area-inset-right, 0px));
  }

  .opening__row {
    --opening-gap: 6px;
    gap: var(--opening-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .opening__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: calc((100% - 7 * var(--opening-gap)) / 8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening__row {
    transition: none;
  }

  .opening__item {
    animation: none;
  }
}