/* Custom utilities that complement Tailwind */
:root{
  --auric-ink:#0A0A0A;
  --auric-gold:#D4AF37;
  --auric-gold-600:#B8902F;
  --auric-gold-200:#F5E6A8;
}
html{
  scroll-behavior: smooth;
}
/* Subtle noise overlay for depth */
.noise:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.035%22/></svg>');
  background-size:200px 200px;
  z-index:10;
}
/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.in{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Gold underline for active nav link */
.nav-active{
  position:relative;
}
.nav-active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg, var(--auric-gold-200), var(--auric-gold), var(--auric-gold-600));
  transform-origin:left;
  transform:scaleX(1);
}
/* Button focus ring tune */
.button-gold:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(212,175,55,.35);
}
/* Hero parallax wrapper */
.parallax{
  perspective:1000px;
}
.parallax .layer{
  transform-origin: center center;
  will-change: transform;
}
/* Card hover */
.card {
  position: relative;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease,
    opacity .2s ease;
  overflow: hidden;
}

/* Soft highlight on hover */
.card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at top left,
      rgba(245, 230, 168, 0.35),
      transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
  background-color: rgba(255, 255, 255, 0.97);
}

.card:hover::before {
  opacity: 1;
}

/* Thin scrollbar for long copy on desktop */
@media (min-width:1024px){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#e6e6e6;border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:#d6d6d6}
}



/* Header: fixed + hide on scroll */

#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.9);
  /* Backdrop blur comes from Tailwind classes too, but this keeps it smooth */
  backdrop-filter: blur(12px);

  transform: translateY(0);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
  box-shadow: none;
}

/* Make sure content isn’t under the fixed header */
body {
  padding-top: 4.5rem; /* ~72px */
}

/* Slightly smaller padding-top on very small screens */
@media (max-width: 600px) {
  body {
    padding-top: 4.25rem;
  }
}

/* When scrolled and pinned (visible after you scroll back up) */
#main-header.header--pinned {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Hidden state: slide completely out of view */
#main-header.header--hidden {
  transform: translateY(-110%);
  box-shadow: none;
}

/* Gold CTA pulse */
@keyframes gold-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(212, 175, 55, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

/* Only animate the main hero CTA; others you can opt-in by adding this class */
.button-pulse {
  animation: gold-pulse 3.2s ease-out infinite;
}