/* ==========================================================================
   Akasya Bullion — "Molten Metal" theme
   Obsidian-black canvas with animated gold/silver metallic gradients,
   glass panels, a cursor-reactive spotlight glow and a marquee ticker.
   No particle canvas, no 3D scene, no procedural "mine" imagery — every
   decorative surface here is a pure-CSS metallic gradient instead.
   ========================================================================== */

:root {
  --gold-1: #fbe9b8;
  --gold-2: #eec868;
  --gold-3: #c99a3a;
  --gold-4: #8a6a24;
  --silver-1: #f4f6f8;
  --silver-2: #cdd4dc;
  --silver-3: #98a2b0;
  --silver-4: #5a6572;
  --obsidian: #0a0908;
  --obsidian-soft: #15130f;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- Reveal-on-scroll base state -----------------------------------------
   Elements are visible by default (no-JS / slow-JS visitors still get full
   content). reveal.js adds .reveal-armed once IntersectionObserver is
   confirmed available, which is what actually hides elements right before
   fading/rising them into place. */
[data-reveal],
[data-reveal-item] {
  opacity: 1;
}
.reveal-armed [data-reveal],
.reveal-armed [data-reveal-item] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-armed [data-reveal].is-visible,
.reveal-armed [data-reveal-item].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.split-word {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
}
.reveal-armed .split-word {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--word-delay, 0s);
}
.reveal-armed [data-split-text].is-visible .split-word {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-armed [data-reveal],
  .reveal-armed [data-reveal-item],
  .reveal-armed .split-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Decorative host ------------------------------------------------------
   Generic wrapper for any section carrying aurora blobs / grain / vignette. */
.deco-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Aurora blobs ----------------------------------------------------------
   Large, softly blurred metallic gradient orbs that drift slowly — the
   site's signature ambient motif, replacing the old procedural "mine"
   strata/veins. Purely CSS: no canvas, no per-frame JS. */
.aurora-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
.aurora-blob--gold {
  background: radial-gradient(circle at 35% 35%, rgba(238, 200, 104, 0.55), rgba(201, 154, 58, 0.18) 60%, transparent 75%);
}
.aurora-blob--silver {
  background: radial-gradient(circle at 60% 40%, rgba(205, 212, 220, 0.4), rgba(90, 101, 114, 0.14) 60%, transparent 75%);
}
.aurora-blob--slow {
  animation-duration: 34s;
}
.aurora-blob--reverse {
  animation-direction: alternate-reverse;
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, -4%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-4%, 3%, 0) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob {
    animation: none;
  }
}

/* Fine grain, screened over dark surfaces for a filmic, non-flat finish */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.12;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 15%, transparent 40%, rgba(4, 3, 2, 0.65) 100%);
}

/* ---- Metallic gradient text -------------------------------------------- */
.metallic-text,
.metallic-text-silver {
  /* repeat (not no-repeat) is what makes the sheen loop seamlessly — as
     the gradient exits one edge, the next repeated tile is already
     entering the other, instead of sweeping once and hard-resetting. */
  background-repeat: repeat;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: metallicSheen 7s linear infinite;
}
.metallic-text {
  background-image: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 28%, var(--gold-4) 45%, var(--gold-2) 62%, var(--gold-1) 100%);
}
.metallic-text-silver {
  background-image: linear-gradient(100deg, var(--silver-1) 0%, var(--silver-2) 28%, var(--silver-4) 45%, var(--silver-2) 62%, var(--silver-1) 100%);
}
@keyframes metallicSheen {
  to {
    background-position: -200% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .metallic-text,
  .metallic-text-silver {
    animation: none;
  }
}

.font-display {
  font-family: "Playfair Display", "Inter", serif;
  letter-spacing: -0.01em;
}

/* ---- Header: floating inset glass pill, not a full-bleed bar -------------
   A single-row pill, inset from the viewport edges and floating over
   whatever section sits behind it, instead of the old edge-to-edge bar
   with a separate utility row and a centred logo below it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 1.1rem 1rem 0;
  pointer-events: none;
  transition: padding 0.3s ease;
}
.site-header.is-scrolled {
  padding-top: 0.6rem;
}
.site-header__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 72rem;
  padding: 0.65rem 0.9rem 0.65rem 1.1rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.9), rgba(10, 9, 8, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.35s ease, background 0.35s ease;
}
.site-header.is-scrolled .site-header__pill {
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.97), rgba(10, 9, 8, 0.92));
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(238, 200, 104, 0.15);
}
/* display is left to Tailwind's hidden/flex utilities at each usage site —
   this class only owns cosmetics, never layout, so there's no specificity
   tie between a CDN-injected Tailwind stylesheet and this one. */
.site-header__icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
  color: var(--silver-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-header__icon-btn:hover {
  background: rgba(238, 200, 104, 0.18);
  color: var(--gold-1);
}

/* Nav pills — metallic gold-tinted fill on hover */
.nav-pill {
  position: relative;
  border-radius: 9999px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.nav-pill:hover,
.nav-pill:focus-visible {
  background: linear-gradient(135deg, rgba(238, 200, 104, 0.22), rgba(201, 154, 58, 0.08));
  color: #fff;
}

/* Metallic sheen sweep — used on primary CTA buttons */
.cta-shimmer {
  position: relative;
  overflow: hidden;
}
.cta-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 48%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
}
.cta-shimmer:hover::after {
  transform: translateX(130%);
}

/* ---- Mobile slide-in menu panel -------------------------------------------- */
.mobile-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 3, 2, 0.65);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 59;
}
.mobile-panel-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: linear-gradient(160deg, #17140f 0%, #0a0908 100%);
  border-left: 1px solid rgba(238, 200, 104, 0.25);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-panel.is-open {
  transform: translateX(0);
}
.mobile-panel__link {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mobile-panel.is-open .mobile-panel__link {
  opacity: 1;
  transform: translateX(0);
}
.mobile-panel__link:nth-child(1) { transition-delay: 0.04s; }
.mobile-panel__link:nth-child(2) { transition-delay: 0.08s; }
.mobile-panel__link:nth-child(3) { transition-delay: 0.12s; }
.mobile-panel__link:nth-child(4) { transition-delay: 0.16s; }
.mobile-panel__link:nth-child(5) { transition-delay: 0.2s; }
.mobile-panel__link:nth-child(6) { transition-delay: 0.24s; }
.mobile-panel__link:nth-child(7) { transition-delay: 0.28s; }
.mobile-panel__link:nth-child(8) { transition-delay: 0.32s; }

html.menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__utility,
  .site-header__main,
  .site-header__logo-img,
  .mobile-panel,
  .mobile-panel-backdrop,
  .mobile-panel__link {
    transition: none !important;
  }
}

/* ---- Signature divider ------------------------------------------------
   One consistent motif between every section: a slim silver-gold-silver
   gradient hairline with a glowing rotated gem at its centre. Replaces the
   old wave dividers + tone separators (two competing motifs) with a single
   mark used everywhere, dark or light section alike. */
.divider-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--silver-3) 15%, var(--gold-2) 50%, var(--silver-3) 85%, transparent);
  opacity: 0.6;
}
.divider-glow--top {
  bottom: auto;
  top: 0;
}
.divider-glow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 0 16px 2px rgba(238, 200, 104, 0.55);
}

/* ---- Scroll-to-top button --------------------------------------------- */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  color: var(--obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(201, 154, 58, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, filter 0.2s ease;
  z-index: 45;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  filter: brightness(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn {
    transition: opacity 0.15s linear, visibility 0.15s linear;
    transform: none;
  }
}

/* ---- Cursor-reactive spotlight glow ---------------------------------------
   Replaces the old ambient particle canvas: a single soft radial glow that
   tracks the pointer across any dark "spotlight-field" section (hero, page
   banners, dark CTAs). On touch devices / reduced motion it sits centred
   and static instead of tracking. */
.spotlight-field {
  position: relative;
  isolation: isolate;
}
.spotlight-glow {
  position: absolute;
  z-index: 0;
  top: var(--sy, 30%);
  left: var(--sx, 50%);
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(238, 200, 104, 0.22), rgba(205, 212, 220, 0.08) 45%, transparent 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: top, left;
}
.spotlight-field:hover .spotlight-glow,
.spotlight-glow.is-active {
  opacity: 1;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .spotlight-glow {
    top: 20%;
    left: 50%;
    opacity: 1;
  }
}

/* ---- Marquee ticker ---------------------------------------------------
   Continuous scrolling strip of metallic badge text — the site's signature
   "extraordinary" motion element, pure CSS (no JS, no canvas). */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.marquee__dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--gold-2);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
  }
}

/* ---- Glass card -----------------------------------------------------------
   Translucent frosted panel for use over dark/aurora backgrounds. */
.glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---- Metallic-edge card ----------------------------------------------
   Light-section cards get a gradient border that only appears on hover,
   drawn with a mask so the fill and border animate independently. */
.edge-card {
  position: relative;
}
.edge-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-2), var(--silver-2), var(--gold-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.edge-card:hover::before {
  opacity: 1;
}

/* ---- Stat / bento tiles ------------------------------------------------ */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* ---- Footer contact chip ------------------------------------------------ */
.footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.footer-chip:hover {
  background: rgba(238, 200, 104, 0.1);
  border-color: rgba(238, 200, 104, 0.3);
  transform: translateY(-1px);
}

/* ---- Cursor-proximity tilt + spotlight glow (see tilt-cards.js) ----------
   Kept on its own element, never combined with [data-reveal-item] — the
   reveal transform and this hover-tilt transform must never fight over the
   same inline style. */
[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-opacity: 0;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-tilt]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--glow-x) var(--glow-y), rgba(238, 200, 104, 0.18), transparent 65%);
  opacity: var(--glow-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-tilt] {
    transform: none !important;
  }
}

/* Keep every decorative layer from ever intercepting clicks/keyboard focus */
.aurora-blob,
.grain-overlay,
.vignette,
.divider-glow,
.spotlight-glow {
  pointer-events: none;
}

/* ---- Hero slider -----------------------------------------------------------
   Crossfading full-bleed slides behind the existing aurora/spotlight/grain
   decorative layers, with arrow + dot controls. Pure CSS transitions,
   driven by a tiny vanilla-JS controller that toggles .is-active. */
.hero-slider {
  overflow: hidden;
}
.hero-slider__track {
  z-index: 1;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.hero-slider__track.is-dragging {
  cursor: grabbing;
}
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hero-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 8s ease-out;
}
.hero-slide.is-active .hero-slide__bg {
  transform: scale(1);
}
.hero-slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 9, 8, 0.92) 0%, rgba(10, 9, 8, 0.72) 45%, rgba(10, 9, 8, 0.4) 100%),
    linear-gradient(0deg, rgba(10, 9, 8, 0.55) 0%, transparent 40%);
}

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}
.hero-slider__arrow--prev {
  left: 1rem;
}
.hero-slider__arrow--next {
  right: 1rem;
}
@media (max-width: 767px) {
  .hero-slider__arrow {
    display: none;
  }
}

.hero-slider__dots {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.hero-slider__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s ease, width 0.2s ease;
}
.hero-slider__dot.is-active {
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  width: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide__bg {
    transition: none;
  }
}