/* MegaCrew — custom layer on top of Tailwind utilities */

:root{
  --ink:#0B1F1C;
  --ink-soft:#171A20;
  --cream:#FAF4E9;
  --gold:#2E8B6F;
  --gold-soft:#6FC7A9;
  --maroon:#C97A1F;
  --ivory:#EDE7DA;
  --slate:#6B6560;
}

html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
}

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

/* ---------- Texture ---------- */
.grain{
  position:relative;
}
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- Nav ---------- */
.nav-shell{
  backdrop-filter: blur(14px);
  background:rgba(15,17,21,.72);
  transition:box-shadow .3s ease, background .3s ease;
}
.nav-shell.scrolled{
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  background:rgba(15,17,21,.92);
}
.nav-link{
  position:relative;
  color:var(--ivory);
  opacity:.78;
}
.nav-link:hover{opacity:1;}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--gold);
  transition:width .25s ease;
}
.nav-link:hover::after{width:100%;}
.nav-link.active{opacity:1;}
.nav-link.active::after{width:100%;}

/* ---------- Buttons ---------- */
.btn-gold{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold) 60%);
  color:var(--ink);
  box-shadow:0 10px 30px -10px rgba(201,162,83,.6), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(201,162,83,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-outline{
  border:1px solid rgba(237,231,218,.35);
  color:var(--ivory);
  transition:border-color .25s ease, background .25s ease;
}
.btn-outline:hover{
  border-color:var(--gold);
  background:rgba(201,162,83,.08);
}

/* ---------- 3D hero card stack ---------- */
.tilt-stage{
  perspective:1400px;
}
.tilt-card{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  will-change:transform;
}
.tilt-card .tilt-inner{
  transform:translateZ(30px);
}

/* ---------- Service / signature cards ---------- */
.card-3d{
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  border:1px solid rgba(15,17,21,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -24px rgba(15,17,21,.35);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.card-3d:hover{
  transform:translateY(-6px) rotateX(2deg);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 32px 55px -22px rgba(15,17,21,.45);
}

.card-dark{
  background:linear-gradient(160deg, #191C22, #0B1F1C 65%);
  border:1px solid rgba(201,162,83,.18);
}

/* gold hairline divider */
.rule-gold{
  height:1px;
  background:linear-gradient(90deg, var(--gold) 0%, rgba(201,162,83,0) 100%);
}

/* ---------- Numbered process ---------- */
.step-num{
  font-family:'Fraunces', serif;
  color:transparent;
  -webkit-text-stroke:1px var(--gold);
}

/* ---------- Reveal on scroll (single orchestrated pass) ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Marquee ---------- */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Misc ---------- */
.text-outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(15,17,21,.18);
}

.glow-gold{
  box-shadow:0 0 0 1px rgba(201,162,83,.25), 0 30px 60px -20px rgba(201,162,83,.35);
}

/* ---------- Go-to-top button ---------- */
.go-top-btn{
  opacity:0;
  transform:translateY(16px) scale(.85);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.go-top-btn.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.go-top-btn:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 16px 34px -10px rgba(46,139,111,.6);
}

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  transition:width .1s linear;
}

/* ---------- Button sheen (elegant hover accent) ---------- */
.btn-gold{ position:relative; overflow:hidden; }
.btn-gold::before{
  content:"";
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.btn-gold:hover::before{ left:130%; }

/* ---------- Nav shell refinement on scroll ---------- */
.nav-shell{ border-bottom:1px solid transparent; }
.nav-shell.scrolled{ border-bottom-color:rgba(46,139,111,.2); }

::selection{background:var(--gold); color:var(--ink);}

input:focus, textarea:focus, select:focus{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}