/* The Spin Suite — shared theme styles */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --emerald-950:#07211a;
  --emerald-900:#0b3d2e;
  --emerald-800:#0f4a38;
  --emerald-700:#146349;
  --brass-500:#c9a15a;
  --brass-400:#d7b676;
  --brass-300:#e6cd9c;
  --ivory-100:#f7f2e7;
  --ivory-200:#efe6d3;
  --ink-900:#161512;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Work Sans', system-ui, sans-serif;
  background-color:var(--ivory-100);
  color:var(--ink-900);
}

.font-display{
  font-family:'Fraunces', Georgia, serif;
}

.text-gradient-brass{
  background:linear-gradient(120deg,#e6cd9c 0%,#c9a15a 45%,#a67c3d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.bg-emerald-texture{
  background-color:var(--emerald-900);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201,161,90,0.08) 0%, transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(201,161,90,0.06) 0%, transparent 50%);
}

.divider-brass{
  height:2px;
  width:64px;
  background:linear-gradient(90deg, var(--brass-500), transparent);
}

.card-hover{
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.card-hover:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(11,61,46,0.35);
}

.nav-link{
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0%; height:1px;
  background:var(--brass-500);
  transition:width .3s ease;
}
.nav-link:hover::after{width:100%;}

[x-cloak]{display:none !important;}

.marquee-track{
  animation: marquee 32s linear infinite;
}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.reveal-visible{
  opacity:1;
  transform:translateY(0);
}

::selection{
  background:var(--brass-500);
  color:var(--emerald-950);
}

.scrollbar-thin::-webkit-scrollbar{height:6px; width:6px;}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--brass-500); border-radius:99px;}