/* FV: 素材ごとの座標はindex.html、登場順と光の演出はこのCSSで編集。 */
.hero-scene {
  position: relative;
  isolation: isolate;
  width: 140%;
  margin-left: -20%;
  aspect-ratio: 1400 / 1407;
}
.hero-scene picture {
  display: block;
  line-height: 0;
  pointer-events: none;
}
.hero-static {
  position: absolute;
  left: var(--asset-x);
  top: var(--asset-y);
  width: var(--asset-width);
  z-index: var(--asset-z);
}
.hero-layer--sp,
.hero-background-sp {
  display: none !important;
}
.hero-motion-enabled .hero-piece {
  opacity: 0;
}
.hero-motion-enabled .hero-piece--glow,
.hero-motion-enabled .hero-piece--title_glow {
  opacity: 1;
}
@media (max-width: 767px) {
  .hero-scene {
    width: 100%;
    margin-left: 0;
    aspect-ratio: 414 / 1539;
  }
  .hero-layer--pc {
    display: none !important;
  }
  .hero-layer--sp,
  .hero-background-sp {
    display: block !important;
  }
  .hero-background-sp {
    bottom: auto;
    right: auto;
    background-size: cover;
  }
}
.hero-piece {
  --delay: 0ms;
  --drop: -145px;
  --tilt: -3deg;
  position: absolute;
  left: var(--asset-x);
  top: var(--asset-y);
  width: var(--asset-width);
  z-index: var(--asset-z);
  opacity: 1;
  transform-origin: 50% 80%;
}

.hero-piece--sp-only {
  display: none;
}

/* 0.1〜0.2秒ほどずつずらし、約2.8秒で全素材が着地します。 */
.hero-piece--bar {
  --delay: 0ms;
}
.hero-piece--glow {
  opacity: 1;
}
.hero-piece--title_glow {
  opacity: 1;
}
.hero-piece--arrows {
  --delay: 120ms;
}
.hero-piece--guarantee {
  --delay: 140ms;
}
.hero-piece--assistant {
  --delay: 200ms;
  --tilt: 4deg;
}
.hero-piece--photo {
  --delay: 300ms;
  --tilt: 4deg;
}
.hero-piece--kicker {
  --delay: 340ms;
}
.hero-piece--rain {
  --delay: 520ms;
  --tilt: -4deg;
  --shine-delay: 2800ms;
  --shine-mask: url('../images/fv_v2_rain.webp?v=fv-v2');
}
.hero-piece--repair,
.hero-piece--highlight {
  --delay: 720ms;
  --tilt: 3deg;
}
.hero-piece--waterproof {
  --delay: 920ms;
  --tilt: -3deg;
  --shine-delay: 3120ms;
  --shine-mask: url('../images/fv_v2_waterproof.webp?v=fv-v2');
}
.hero-piece--repair {
  --shine-delay: 2960ms;
  --shine-mask: url('../images/fv_v2_repair.webp?v=fv-v2');
}
.hero-piece--worker {
  --delay: 1050ms;
  --drop: -195px;
  --tilt: 4deg;
}
.hero-piece--caption {
  --delay: 1170ms;
}
.hero-piece--zero {
  --delay: 1320ms;
  --drop: -220px;
  --tilt: -5deg;
}
.hero-piece--badges {
  --delay: 1540ms;
  --tilt: 3deg;
}
.hero-piece--prices {
  --delay: 1680ms;
  --tilt: -3deg;
}
.hero-piece--price_rain {
  --delay: 1840ms;
  --tilt: 3deg;
}

.is-playing .hero-piece {
  animation: hero-drop 900ms var(--delay) both;
}

.is-playing .hero-piece--glow,
.is-playing .hero-piece--title_glow {
  animation: none;
}

.is-playing .hero-piece--bar {
  animation-name: hero-reveal;
}

/* 落下が終わってから、光の帯を3つのコピーに順番に通します。
   元画像の透明度をマスクに使うため、光は文字の形だけに現れます。 */
.hero-piece--rain::after,
.hero-piece--repair::after,
.hero-piece--waterproof::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: linear-gradient(
    110deg,
    transparent 42%,
    rgb(255 255 255 / 12%) 46%,
    rgb(255 255 255 / 90%) 49%,
    #fff 50%,
    rgb(255 255 255 / 90%) 51%,
    rgb(255 255 255 / 12%) 55%,
    transparent 59%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--shine-mask);
  mask-image: var(--shine-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

.is-playing .hero-piece--rain::after,
.is-playing .hero-piece--repair::after,
.is-playing .hero-piece--waterproof::after {
  animation: hero-shine 680ms var(--shine-delay) ease-in-out both;
}

.is-complete .hero-piece {
  opacity: 1;
  transform: none;
}

/* 落下 → 少しつぶれて着地 → 跳ね返り → 小さな揺れ → 静止。 */
@keyframes hero-drop {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--drop), 0) rotate(var(--tilt)) scale(0.88, 1.04);
    animation-timing-function: cubic-bezier(0.32, 0, 0.68, 0.35);
  }
  42% {
    opacity: 1;
    transform: translate3d(0, 12px, 0) rotate(1deg) scale(1.05, 0.93);
    animation-timing-function: cubic-bezier(0.18, 0.6, 0.35, 1);
  }
  63% {
    opacity: 1;
    transform: translate3d(0, -16px, 0) rotate(-0.7deg) scale(0.98, 1.035);
    animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.5);
  }
  78% {
    transform: translate3d(0, 5px, 0) rotate(0.3deg) scale(1.015, 0.985);
    animation-timing-function: ease-out;
  }
  90% {
    transform: translate3d(0, -3px, 0) rotate(-0.1deg) scale(0.995, 1.005);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes hero-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-shine {
  0% {
    opacity: 0;
    background-position: 100% 0;
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 0% 0;
  }
}

@media (max-width: 767px) {
  .hero-piece {
    --drop: -100px;
  }
  .hero-piece--worker,
  .hero-piece--zero {
    --drop: -165px;
  }
  .hero-piece--rain {
    --shine-mask: url('../images/fv_v2_rain_sp.webp?v=fv-v2');
  }
  .hero-piece--repair {
    --shine-mask: url('../images/fv_v2_repair_sp.webp?v=fv-v2');
  }
  .hero-piece--waterproof {
    --shine-mask: url('../images/fv_v2_waterproof_sp.webp?v=fv-v2');
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-enabled .hero-piece {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-piece,
  .hero-piece::after {
    animation: none !important;
  }
}

.art-hero .phone-label {
  left: 25.265645%;
  top: 34.43297%;
  width: 66.839378%;
  height: 54.34718%;
  font-size: calc(43.931 * var(--art-unit));
}
@media (max-width: 767px) {
  .hero-background-sp--roof {
    left: 0%;
    top: 15.98440546%;
    width: 100%;
    height: 26.1208577%;
    background-image: url(../images/fv_v2_background_roof_sp.webp);
  }
  .hero-background-sp--top {
    left: 0%;
    top: -2.33918129%;
    width: 100%;
    height: 19.42820013%;
    background-image: url(../images/fv_v2_background_top_sp.webp);
  }
  .hero-background-sp--glow {
    left: 0%;
    top: -2.63807657%;
    width: 100%;
    height: 25.35412685%;
    background-image: url(../images/fv_v2_background_glow_sp.webp);
  }
  .hero-background-sp--overlay {
    left: 0%;
    top: 35.51007147%;
    width: 100%;
    height: 14.32748538%;
    background-image: url(../images/fv_v2_background_overlay_sp.webp);
  }
  .hero-background-sp--wave {
    left: 0%;
    top: 43.98960364%;
    width: 100%;
    height: 24.73728708%;
    background-image: url(../images/fv_v2_background_wave_sp.webp);
  }
  .hero-background-sp--house {
    left: 50.72463768%;
    top: 66.66666667%;
    width: 49.27536232%;
    height: 16.19538821%;
    background-image: url(../images/fv_v2_background_house_sp.webp);
  }
  .art-hero .phone-label {
    left: 24.166667%;
    top: 35.438093%;
    width: 61.944446%;
    height: 50.346482%;
    font-size: calc(38.031 * var(--art-unit));
  }
}