/* ==========================================================================
   utilities.css — Animations, Scroll Reveal, Responsive Helpers
   ========================================================================== */

/* ---------- Scroll Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

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

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* Fade variants */
.reveal--fade {
  transform: none;
}

.reveal--left {
  transform: translateX(-24px);
}

.reveal--left.visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(24px);
}

.reveal--right.visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.visible {
  transform: scale(1);
}

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

/* ---------- Text utilities ---------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-navy    { color: var(--corp-navy); }
.text-warm    { color: var(--corp-warm); }
.text-slate   { color: var(--corp-slate); }
.text-muted   { color: var(--corp-slate-light); }
.text-white   { color: var(--corp-white); }

.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-accent  { font-family: var(--font-accent); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ---------- Spacing utilities ---------- */
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* ---------- Display ---------- */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ---------- Responsive visibility ---------- */
@media (max-width: 767px) {
  .hide-sp { display: none !important; }
}

@media (min-width: 768px) {
  .hide-pc { display: none !important; }
}

/* ---------- Image utilities ---------- */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-rounded {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

/* ---------- Decorative line ---------- */
.divider {
  border: none;
  height: 1px;
  background: var(--corp-border);
  margin: var(--space-8) 0;
}

/* ---------- Highlight mark ---------- */
.highlight {
  background: linear-gradient(transparent 60%, rgba(184, 134, 11, 0.15) 60%);
  padding: 0 2px;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
}

.badge--warm {
  background: rgba(184, 134, 11, 0.1);
  color: var(--corp-warm);
}

.badge--navy {
  background: rgba(26, 39, 68, 0.08);
  color: var(--corp-navy);
}

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}