@charset "UTF-8";

/* ==============================================
   utilities.css — ユーティリティクラス・アニメーション・ローダー
============================================== */

/* -----------------------------------------------
   Responsive Helpers
----------------------------------------------- */
.u-sp-only {
  display: block;
}

.u-pc-only {
  display: none;
}

@media (min-width: 48rem) {
  .u-sp-only {
    display: none;
  }

  .u-pc-only {
    display: block;
  }
}

/* -----------------------------------------------
   Visibility
----------------------------------------------- */
.u-hidden {
  display: none;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------
   Text Alignment
----------------------------------------------- */
.u-text-center {
  text-align: center;
}

.u-text-left {
  text-align: left;
}

/* -----------------------------------------------
   Margin / Spacing Utilities
----------------------------------------------- */
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }

.u-mb-2  { margin-bottom: var(--space-2); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }
.u-mb-10 { margin-bottom: var(--space-10); }

/* -----------------------------------------------
   Scroll Lock (used when SP nav is open)
----------------------------------------------- */
.is-scroll-locked {
  overflow: hidden;
}

/* -----------------------------------------------
   Scroll Reveal
   JS側で .is-visible を付与する
----------------------------------------------- */
.u-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.u-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------
   Element-level Scroll Animation
   [data-anim] 属性を持つ要素に JS がクラスを付与する
   body に .is-js-active が付与された場合にのみ作動
----------------------------------------------- */
.is-js-active [data-anim] {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.is-js-active [data-anim="fade-up"] {
  transform: translateY(1.25rem);
}

.is-js-active [data-anim="fade-in"] {
  transform: translateY(0);
}

.is-js-active .is-animated[data-anim] {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.is-js-active [data-anim-delay="1"] { transition-delay: 0.15s; }
.is-js-active [data-anim-delay="2"] { transition-delay: 0.30s; }
.is-js-active [data-anim-delay="3"] { transition-delay: 0.45s; }
.is-js-active [data-anim-delay="4"] { transition-delay: 0.60s; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .u-reveal,
  .u-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .is-js-active [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -----------------------------------------------
   Page Loader
   ページ表示時に店名を表示して fade-out するローダー
   不要な案件では HTML からローダーの div を削除すること
----------------------------------------------- */
.c-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg-dark) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 1s;
}

.c-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.c-loader__text {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-wider);
  margin: 0;
  opacity: 0;
  animation: loader-fade-in 1.5s ease forwards;
}

.c-loader__line {
  width: 0;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0;
  animation: loader-line-grow 1.5s ease 0.5s forwards;
}

@keyframes loader-fade-in {
  from { opacity: 0; transform: translateY(0.625rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes loader-line-grow {
  from { width: 0;       opacity: 0; }
  to   { width: 2.5rem;  opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .c-loader__text {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .c-loader__line {
    animation: none;
    width: 2.5rem;
    opacity: 0.6;
  }

  .c-loader {
    transition: opacity 0.3s ease, visibility 0.3s;
  }
}