/* =================================================================
   Vulcanmen — Front-end custom stylesheet
   Token mirrors are kept here so they're cacheable and edit-friendly.
   ================================================================= */

/* ---------- Display & label utilities ---------- */
.font-display-italic {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
}
.label {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  font-weight: 600;
}
.num {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 300;
}
.h-display {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  line-height: 0.95;
}
.h-display-italic {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  line-height: 0.95;
}

/* ---------- Marquee (infinite horizontal scroll) ----------
   The keyframe moves the inner track left by 50% (one full loop)
   and the inner track has its content duplicated so the wrap is seamless.
   display:flex + gap on the track keeps items in a single horizontal line. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  overflow: hidden;
  width: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 3rem;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee-track > .marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  /* Single uniform style for every text inside the marquee */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-style: normal;
}
.marquee-track > .marquee-item > span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-style: normal;
}
.marquee:hover .marquee-track,
.marquee-track:hover {
  animation-play-state: paused;
}

/* ---------- Image hover zoom ---------- */
.img-zoom img {
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.img-zoom:hover img {
  transform: scale(1.04);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   1.2s cubic-bezier(.2, .7, .2, 1),
    transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: .15s; }
.reveal-d2 { transition-delay: .30s; }
.reveal-d3 { transition-delay: .45s; }
.reveal-d4 { transition-delay: .60s; }

/* ---------- Line-clamp fallback ---------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Logo pill (navy logo on tonal navy header) ---------- */
.logo-pill {
  background: #F2EEE8;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-block;
}

/* ---------- Brand palette reference ----------
   Tailwind config inside layouts/app.blade.php owns the runtime tokens:
     noir        = #0B1E3F (deep navy — matches logo)
     bone-100    = #F2EEE8
     amber       = #C9A871
   ----------------------------------------------------------------- */