/* =========================================================
   HQ Background: Style
   key: dbar-hero-moonsault
   name: welina D-Bar CASABLANCA
   group: set
   type: Style
   layer: hero
   value:
   selector:
   ========================================================= */

/* =========================================================
   Hero Base
   ========================================================= */

.p-hero {
  background: transparent;
}

.p-hero__symbol {
  animation: dbar-symbol-moonsault 3.1s cubic-bezier(0.18, 0.82, 0.18, 1) forwards;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.18));
}

.p-hero__logo {
  opacity: 0;
  animation: dbar-logo-appear 0.8s ease-out 2.85s forwards;
}

.p-hero__symbol svg,
.p-hero__logo svg {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

/* =========================================================
   Moonsault Motion
   ========================================================= */

@keyframes dbar-symbol-moonsault {
  0% {
    opacity: 0;
    transform: translate(-50%, -95%) scale(0.18) rotateZ(-160deg) rotateX(0deg);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -82%) scale(1.18) rotateZ(110deg) rotateX(180deg);
  }

  45% {
    transform: translate(-50%, -112%) scale(0.94) rotateZ(255deg) rotateX(360deg);
  }

  70% {
    transform: translate(-50%, -78%) scale(1.05) rotateZ(320deg) rotateX(540deg);
  }

  /* 減速（止まらない） */
  85% {
    transform: translate(-50%, -83%) scale(1.02) rotateZ(340deg) rotateX(630deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -82%) scale(1) rotateZ(360deg) rotateX(720deg);
  }
}

@keyframes dbar-logo-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, 70%);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 52%);
  }
}

/* =========================================================
   Scroll
   ========================================================= */

.p-hero__scroll {
  color: #fff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.12em;
}

.p-hero__scroll::after {
  background: #fff;
  animation: dbar-hero-scroll-line 1.6s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes dbar-hero-scroll-line {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* =========================================================
   SP
   ========================================================= */

@media (max-width: 767px) {

  .p-hero__symbol {
    opacity: 1;
    animation: dbar-symbol-spin-sp 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    filter: none;
  }

  .p-hero__logo {
    opacity: 1;
    animation: none;
  }

  .p-hero__symbol svg,
  .p-hero__logo svg {
    filter: none;
  }

  .p-hero__scroll {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------
   超軽量回転（時計回りのみ）
--------------------------------------------------------- */

@keyframes dbar-symbol-spin-sp {
  0% {
    transform: translate(-50%, -86%) rotateZ(0deg);
  }

  100% {
    transform: translate(-50%, -86%) rotateZ(720deg);
  }
}