/* ==========================================================================
   Adune — landing page styles
   Custom CSS only. Design tokens (colors, fonts, max-widths) live in the
   Tailwind config at js/tailwind.config.js and are applied via utility classes
   in the markup. Keep this file framework-agnostic so the stylesheet can be
   swapped or reused across pages.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { background: #1A1612; color: #F5EFE7; font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .serif { font-family: 'Lora', Georgia, serif; }

/* --------------------------------------------------------------------------
   Wordmark (boxed "A" mark + "dune") — reused in header and footer
   -------------------------------------------------------------------------- */
.wordmark { font-weight: 500; white-space: nowrap; }
.wordmark-mark { height: 1.1em; width: 1.1em; display: inline-block; vertical-align: -0.13em; }
.wordmark-text { margin-left: -0.27em; position: relative; top: 0px; }
.wordmark-text-footer { margin-left: -0.27em; position: relative; top: -1px; }
.wordmark-thank-you { margin-left: -0.27em; position: relative; bottom: 1px; }

/* --------------------------------------------------------------------------
   Tally form embed — reset the iframe border and baseline inline-gap
   (defensive hygiene; the form's own top divider is controlled in Tally)
   -------------------------------------------------------------------------- */
#apply iframe { border: 0; display: block; }

/* --------------------------------------------------------------------------
   Diagonal strike for the "old way" stat numbers — crosses each glyph once,
   stays legible
   -------------------------------------------------------------------------- */
.strike-diag { position: relative; display: inline-block; }
.strike-diag::after {
  content: "";
  position: absolute;
  left: -0.04em; right: -0.04em;
  top: 50%;
  height: 0.055em;
  background: #9E938A;
  border-radius: 2px;
  transform: translateY(-50%) rotate(-7deg);
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Subtle parallax for portfolio tiles
   -------------------------------------------------------------------------- */
.parallax { will-change: transform; transition: transform 80ms linear; }

/* --------------------------------------------------------------------------
   Floating CTA
   -------------------------------------------------------------------------- */
.floating-cta { opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none; transition: opacity 300ms ease, transform 300ms ease; }
.floating-cta.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* --------------------------------------------------------------------------
   Placeholder media blocks
   -------------------------------------------------------------------------- */
.ph { background: linear-gradient(135deg, #2A241C 0%, #3A322A 100%); position: relative; overflow: hidden; }
.ph::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9E938A;
}
.tally-embed { aspect-ratio: 1 / 1.2; }

/* --------------------------------------------------------------------------
   Hero shell (no pin — scrolls immediately)
   -------------------------------------------------------------------------- */
.hero-shell { position: relative; }
.hero-pin { position: relative; min-height: 100vh; display: flex; align-items: center; }

/* Step 2 emphasis (legacy, unused) */
.step-emphasis { background: #2A201A; }

/* --------------------------------------------------------------------------
   How it works — pinned scroll-through
   -------------------------------------------------------------------------- */
.hiw-track  { position: relative; height: 200vh; }   /* was 320vh — snappier: ~one scroll motion per step */
.hiw-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
/* Dimming lives on the card (which does NOT overlap the connector line), not on the whole
   step — so the number circle stays fully opaque and masks the line behind it. The old
   opacity:0.28 on .hiw-step made the circle translucent, letting the line show through it. */
.hiw-step   { transition: opacity 400ms ease; }
.hiw-card   { opacity: 0.4; transition: opacity 300ms ease, background 300ms ease; }
.hiw-step.active .hiw-card { opacity: 1; background: #2A201A; }
.hiw-num    { z-index: 1; background: #1A1612; border: 2px solid #9E938A; color: #9E938A; transition: background 300ms ease, color 300ms ease, border-color 300ms ease; }
.hiw-step.active .hiw-num  { background: #B5512A; border-color: #B5512A; color: #F5EFE7; }
.hiw-line-fill { height: 0; transition: height 120ms linear; }

/* --------------------------------------------------------------------------
   Video tile — hover-to-unmute button
   -------------------------------------------------------------------------- */
.unmute-btn {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: rgba(26, 22, 18, 0.75);
  border: 1px solid #332B23;
  border-radius: 50%;
  color: #F5EFE7;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background 200ms ease;
}
.unmute-btn:hover { background: rgba(181, 81, 42, 0.9); border-color: #B5512A; }
[data-lightbox-type="video"]:hover .unmute-btn { opacity: 1; }
/* Always visible on touch devices (no hover) */
@media (hover: none) { [data-lightbox-type="video"] .unmute-btn { opacity: 0.75; } }

@keyframes unmute-pulse {
  0%   { opacity: 0; transform: scale(0.9); }
  20%  { opacity: 1; transform: scale(1); }
  65%  { opacity: 1; transform: scale(1); }
  78%  { opacity: 1; transform: scale(1.15); }
  90%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.unmute-btn--pulse { animation: unmute-pulse 2.8s ease forwards; }
.unmute-btn--shown { opacity: 1; }

/* --------------------------------------------------------------------------
   Lightbox — image + video viewer
   -------------------------------------------------------------------------- */
.lightbox { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); cursor: pointer; }
.lightbox-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.lightbox-content img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 12px; }
.lightbox-content video { max-width: 92vw; max-height: 92vh; border-radius: 12px; background: #000; }
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  background: rgba(26, 22, 18, 0.7); border: 1px solid #332B23; border-radius: 50%;
  color: #F5EFE7; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.25rem; line-height: 1; transition: background 200ms ease;
}
.lightbox-close:hover { background: #B5512A; border-color: #B5512A; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hiw-track  { height: auto !important; }
  .hiw-sticky { position: static !important; min-height: 0 !important; padding: 6rem 0; }
  .hiw-step, .hiw-card { opacity: 1 !important; }
}