/* ═══════════════════════════════════════════════════════════
   TUNEX LAMP HERO
   Port of the Aceternity "Lamp" component (React + Tailwind +
   Framer Motion) down to vanilla CSS for the static site.

   Framer Motion's whileInView becomes a single `.is-in` class
   toggled by IntersectionObserver in tunex-lamp.js; every
   animated property is a CSS transition with the original
   0.3s delay / 0.8s duration / ease-in-out timing.

   Palette is remapped to the Tunex brand:
     cyan-500  -> --lamp      (#C41E3A)
     cyan-400  -> --lamp-hot  (hotter red for the filament)
     slate-950 -> --lamp-bg   (#080808)
   ═══════════════════════════════════════════════════════════ */

.lamp-hero {
  --lamp: #c41e3a;
  --lamp-hot: #ff3b57;
  --lamp-bg: #080808;

  /* the cones grow from start -> end when .is-in lands */
  --cone-start: 15rem;
  --cone-end: 30rem;
  /* height of the light rig's box; the filament lands at ~40% of this */
  --stage-h: 30rem;

  position: relative;
  z-index: 0;
  /* The hero centres its single in-flow child (the copy). Doing the centring
     one level up is what makes it predictable: the content box is then just
     "copy + the padding that clears the beam", and the leftover space splits
     evenly above and below it at any viewport height. Centring inside
     .lamp-content instead left the copy sitting low, because its own
     min-height and padding fought the free-space split. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 72px);
  overflow: hidden;
  background: var(--lamp-bg);
}

/* ── NAV OVER THE DARK HERO ────────────────────────────── */

/* The sticky nav is white with a dark wordmark, which reads as a hard slab
   across the top of the beam. While it overlaps the hero it goes glassy-dark
   and the logo is knocked out to white; past the hero it returns to normal. */
.nav {
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* Opaque, not translucent: at scroll 0 the sticky nav sits *above* the hero
   rather than over it, so a semi-transparent black would blend with the white
   body behind it and render mid-grey. Matching --lamp-bg exactly makes the nav
   and hero read as one continuous dark block. */
.nav.nav-over-dark {
  background: #080808;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* None of the Tunex logo files ship a transparent background — every one bakes
   in a white plate — so a white knock-out just yields a solid rectangle.
   The nav is already packed edge-to-edge at 1280px (zero gap between logo,
   links and CTAs), so widening the logo is not an option either. Rounding the
   existing asset costs no extra width and turns its baked-in plate into a
   deliberate badge. Swap in a transparent PNG/SVG wordmark when one exists. */
.nav.nav-over-dark .nav-logo img {
  border-radius: 7px;
}
.nav.nav-over-dark .nav-links a {
  color: rgba(255, 255, 255, 0.62);
}
.nav.nav-over-dark .nav-links a:hover,
.nav.nav-over-dark .nav-links a.active {
  color: #fff;
}
.nav.nav-over-dark .btn-nav-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.nav.nav-over-dark .btn-nav-ghost:hover {
  border-color: #fff;
}

/* ── LIGHT RIG ─────────────────────────────────────────── */

/* The original gives the rig `flex-1` and pulls a single-line headline up by
   -20rem. Our hero carries a tag, headline, paragraph, buttons and three
   metric cards, and that taller content starves a flex-1 stage — the lamp
   collapses upward behind the navbar. Pinning the rig to its own fixed box at
   the top of the hero keeps the beam geometry identical no matter how much
   copy sits underneath it. */
.lamp-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: var(--stage-h);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  transform: scaleY(1.25);
}

/* `inset: auto` keeps each layer at its flex static position, so the
   whole rig stays centred without any left/top arithmetic. */
.lamp-cone {
  position: absolute;
  inset: auto;
  height: 14rem;
  width: var(--cone-start);
  opacity: 0.5;
  color: #fff;
  transition:
    width 0.8s 0.3s ease-in-out,
    opacity 0.8s 0.3s ease-in-out;
}

.lamp-cone--left {
  right: 50%;
  overflow: visible;
  background-image: conic-gradient(
    from 70deg at center top,
    var(--lamp),
    transparent,
    transparent
  );
}

.lamp-cone--right {
  left: 50%;
  background-image: conic-gradient(
    from 290deg at center top,
    transparent,
    transparent,
    var(--lamp)
  );
}

/* the two masks per cone soften where the light meets the floor
   and where it meets the centre line */
.lamp-cone::before,
.lamp-cone::after {
  content: '';
  position: absolute;
  bottom: 0;
  z-index: 20;
  background: var(--lamp-bg);
}

.lamp-cone::before {
  width: 100%;
  height: 10rem;
  -webkit-mask-image: linear-gradient(to top, white, transparent);
  mask-image: linear-gradient(to top, white, transparent);
}

.lamp-cone::after {
  width: 10rem;
  height: 100%;
}

.lamp-cone--left::before,
.lamp-cone--left::after {
  left: 0;
}
.lamp-cone--left::after {
  -webkit-mask-image: linear-gradient(to right, white, transparent);
  mask-image: linear-gradient(to right, white, transparent);
}

.lamp-cone--right::before,
.lamp-cone--right::after {
  right: 0;
}
.lamp-cone--right::after {
  -webkit-mask-image: linear-gradient(to left, white, transparent);
  mask-image: linear-gradient(to left, white, transparent);
}

/* wide soft bar that hides the cones' hard bottom edge */
.lamp-blurbar {
  position: absolute;
  top: 50%;
  height: 12rem;
  width: 100%;
  transform: translateY(3rem) scaleX(1.5);
  background: var(--lamp-bg);
  filter: blur(40px);
}

.lamp-backdrop {
  position: absolute;
  top: 50%;
  z-index: 50;
  height: 12rem;
  width: 100%;
  background: transparent;
  opacity: 0.1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* broad halo */
.lamp-glow {
  position: absolute;
  inset: auto;
  z-index: 50;
  height: 9rem;
  width: 28rem;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: var(--lamp);
  opacity: 0.5;
  filter: blur(64px);
}

/* tight hot core just above the filament */
.lamp-core {
  position: absolute;
  inset: auto;
  z-index: 30;
  height: 9rem;
  width: 8rem;
  transform: translateY(-6rem);
  border-radius: 9999px;
  background: var(--lamp-hot);
  filter: blur(40px);
  transition: width 0.8s 0.3s ease-in-out;
}

/* the filament itself */
.lamp-line {
  position: absolute;
  inset: auto;
  z-index: 50;
  height: 2px;
  width: var(--cone-start);
  transform: translateY(-7rem);
  background: var(--lamp-hot);
  transition: width 0.8s 0.3s ease-in-out;
}

/* caps everything above the lamp so the cones read as a beam */
.lamp-topmask {
  position: absolute;
  inset: auto;
  z-index: 40;
  height: 11rem;
  width: 100%;
  transform: translateY(-12.5rem);
  background: var(--lamp-bg);
}

/* ── LIT STATE ─────────────────────────────────────────── */

.lamp-hero.is-in .lamp-cone {
  width: var(--cone-end);
  opacity: 1;
}
.lamp-hero.is-in .lamp-core {
  width: 16rem;
}
.lamp-hero.is-in .lamp-line {
  width: var(--cone-end);
}

/* ── CONTENT ───────────────────────────────────────────── */

/* sits below the filament rather than being yanked up into it */
.lamp-content {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  /* Fills the hero and centres within it, so the block sits balanced in the
     space under the beam. A fixed top padding was fine when the hero also
     carried three metric cards; with those gone it left the copy stranded at
     the top with a screen of dead space beneath. The padding-top still keeps
     the copy clear of the filament. */
  /* Beam clearance is a MARGIN, not padding. A flex container works out its
     free space from each item's margin box, so a margin-top is subtracted
     before the leftover is split evenly — which is exactly what we want here.
     As padding it lives inside the item, the split ignores it, and the copy
     ends up ~100px low. (Measured: 254px above / 54px below with padding;
     155/155 with margin.) */
  margin-top: 6.3rem;
  padding: 0 24px;
  text-align: center;
}

.lamp-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lamp-hot);
}
.lamp-tag::before,
.lamp-tag::after {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--lamp);
}

.lamp-title {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: clamp(52px, 8.5vw, 128px);
  line-height: 0.88;
  letter-spacing: -1px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #8d939c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lamp-title em {
  font-style: normal;
  background: linear-gradient(180deg, #ff5c74 0%, var(--lamp) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lamp-sub {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}
.lamp-sub strong {
  color: #fff;
  font-weight: 700;
}

.lamp-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* the site's secondary button is #0d0d0d, which all but disappears on the
   #080808 hero — swap it for an outline on this section only */
.lamp-btns .btn-b {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.2s, background 0.2s;
}
.lamp-btns .btn-b:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.55);
}

.lamp-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin-top: 10px;
}

.lamp-metric {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
  transition: border-color 0.3s var(--ease, ease);
}
.lamp-metric:hover {
  border-color: rgba(196, 30, 58, 0.45);
}
.lamp-metric-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.lamp-metric-val {
  font-family: 'Bebas Neue', cursive, sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
}
.lamp-metric-val em {
  font-style: normal;
  color: var(--lamp-hot);
}
.lamp-metric-note {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #22c55e;
}

/* ── ENTRANCE (mirrors the Framer Motion h1 tween) ─────── */

.lamp-content > * {
  opacity: 0.5;
  transform: translateY(100px);
  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out;
}
.lamp-hero.is-in .lamp-content > * {
  opacity: 1;
  transform: translateY(0);
}

/* the original used a flat 0.3s delay; a small stagger reads better
   now that the beam lights more than a single headline */
.lamp-hero.is-in .lamp-tag      { transition-delay: 0.30s; }
.lamp-hero.is-in .lamp-title    { transition-delay: 0.30s; }
.lamp-hero.is-in .lamp-sub      { transition-delay: 0.42s; }
.lamp-hero.is-in .lamp-btns     { transition-delay: 0.52s; }
.lamp-hero.is-in .lamp-metrics  { transition-delay: 0.62s; }

.lamp-sub,
.lamp-btns,
.lamp-metrics {
  opacity: 0;
}
.lamp-hero.is-in .lamp-sub,
.lamp-hero.is-in .lamp-btns,
.lamp-hero.is-in .lamp-metrics {
  opacity: 1;
}

/* ── RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 900px) {
  .lamp-hero {
    --cone-start: 9rem;
    --cone-end: 20rem;
    --stage-h: 24rem;
  }
  .lamp-content {
    margin-top: 5rem;
    padding-top: 0;
    gap: 18px;
  }
  .lamp-glow {
    width: 18rem;
  }
}

@media (max-width: 560px) {
  .lamp-hero {
    --cone-start: 7rem;
    --cone-end: 15rem;
    --stage-h: 20rem;
  }
  .lamp-content {
    margin-top: 4.2rem;
    padding-top: 0;
  }
  .lamp-metrics {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .lamp-metric {
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lamp-cone,
  .lamp-core,
  .lamp-line,
  .lamp-content > * {
    transition: none !important;
  }
}