/* ═══════════════════════════════════════════════════
   ANIMATION INITIAL STATES
   GSAPがJSで制御するため、初期状態はここで定義
═══════════════════════════════════════════════════ */

/* Generic fade-up */
.js-fade-up {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* Section header children */
.section-header > * {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* ── Loading screen ───────────────────────────────── */
.js-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  pointer-events: auto;
  transition: none;
}
.js-loader.is-done { pointer-events: none; }

.js-loader-logo {
  width: 160px;
  height: auto;
  opacity: 0;
  filter: brightness(0) invert(1);
}

.js-loader-bar-wrap {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  border-radius: var(--radius-full);
}
.js-loader-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--c-primary), var(--c-accent));
  transform: scaleX(0);
  transform-origin: left;
}

/* ── Header initial state (transparent over hero) ─── */
.site-header {
  background: transparent;
  color: #fff;
}

/* ── Concept ─────────────────────────────────────── */
/* .concept__line-inner, .concept__label are set in sections.css as will-change */

/* ── About image ──────────────────────────────────── */
/* .about__image-wrap: will-change: transform for parallax */

/* ── President ────────────────────────────────────── */
/* clip-path set in sections.css */

/* ── Result counter ───────────────────────────────── */
/* initialized to 0 via PHP */

/* ── CTA bg ───────────────────────────────────────── */
/* .cta-section__bg-img: will-change: transform */

/* ── Generic transitions ──────────────────────────── */
.fade-in { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.fade-in.is-visible { opacity: 1; }

/* ── CSS-only pulse for CTA button fallback ────────── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(30, 141, 200, 0.5); }
  100% { box-shadow: 0 0 0 20px rgba(30, 141, 200, 0); }
}
.cta-section__btn { animation: pulse-ring 2s ease-out 1s infinite; }

/* ── Smooth scrollbar (Lenis override) ──────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ── Reduced motion: すべてのアニメーション無効 ──── */
@media (prefers-reduced-motion: reduce) {
  .js-fade-up,
  .section-header > *,
  .hero__eyebrow-text,
  .hero__eyebrow-line,
  .hero__title-inner,
  .hero__sub,
  .hero__actions,
  .hero__scroll,
  .concept__line-inner,
  .concept__label,
  .concept__label-line,
  .concept__hr,
  .president__image-wrap,
  .president__message-line,
  .president__profile {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js-loader { display: none !important; }
  .cta-section__btn { animation: none; }
}