/* ========================
   Animations
   トランジション、キーフレームなどのアニメーション定義
   ======================== */

/* === Loading Screen Animations === */
.c-loading-image {
  transform: translateX(var(--side-preview-initial-offset-x));
  transition: transform 0.6s;
  will-change: transform;
}

body.is-loading.is-loaded .c-loading-image {
  transform: translateX(calc(var(--side-preview-initial-offset-x) + 100vw - var(--side-rail-width) + var(--side-preview-left-expand) + var(--side-preview-menu-open-shift-x)));
}

/* === Hero Animations === */
@keyframes hero-bg-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-bg-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--hero-bg-exit-x));
  }
}

@keyframes hero-catchcopy-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* === Side Menu Animations === */
.o-side-preview {
  transition: transform 0.6s;
}

.o-side-menu-drawer {
  transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.o-side-menu-panel {
  transition: transform 0.6s;
}

/* === Component Transitions === */
.c-hamburger-button {
  transition: opacity 0.2s ease;
}

.c-hamburger-line {
  transition: transform var(--hamburger-morph-duration) ease, opacity var(--hamburger-morph-duration) ease;
}

.c-side-menu-link {
  transition: font-weight 0.2s ease;
}

.c-site-logo {
  transition: background 0.3s ease;
}

.c-site-logo::after {
  transition: background 0.3s ease;
}

.c-site-logo-image {
  transition: opacity 0.3s ease;
}

.c-site-logo-text {
  transition: color 0.3s ease;
}

/* === Content Animations === */
.c-content-image {
  transition: transform 0.45s ease;
  transform-origin: center center;
}

.c-content-image-zoom-wrap:hover .c-content-image {
  transform: scale(1.06);
}

.c-scroll-indicator {
  transition: opacity 0.35s ease;
}

.c-scroll-indicator-text {
  transition: color 0.3s ease;
}

/* === Service Area Card Animations === */
.c-service-area-image {
  transition: filter 0.3s ease;
}

.c-service-area-card.is-active .c-service-area-image {
  filter: grayscale(0%);
}

/* === Portfolio Reel Animations === */
.c-portfolio-reel-item {
  transition: all 0.3s ease;
}

.c-portfolio-reel-nav-button {
  transition: font-weight 0.2s ease;
}

/* === SVG Logo Line Draw Animations === */
.c-service-logo-draw,
.c-company-logo-draw,
.c-recruit-logo-draw {
  pointer-events: none;
  user-select: none;
}

.c-service-logo-draw svg,
.c-company-logo-draw svg,
.c-recruit-logo-draw svg {
  width: 100%;
  height: auto;
  display: block;
}

.c-service-logo-flow,
.c-company-logo-flow,
.c-recruit-logo-flow {
  fill: none;
  stroke: #404e66;
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--flow-width, 22);
  stroke-dasharray: var(--flow-length);
  stroke-dashoffset: var(--flow-length);
  animation: service-logo-flow var(--flow-duration, 0.9s) linear forwards;
  animation-delay: var(--flow-delay, 0s);
}

@keyframes service-logo-flow {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 500px) {

  .c-service-logo-draw,
  .c-company-logo-draw,
  .c-recruit-logo-draw {
    width: clamp(40px, 30vw, 300px);
    top: -20px;
  }
}