/* =========================================================
   Diamond Blue Renovations — shared styles
   Design tokens live in each page's Tailwind config.
   This file handles what utilities can't do cleanly:
   glass header, hero slider, testimonial marquee,
   before/after comparison, scroll reveal, motion safety.
   ========================================================= */

:root{
  --ink:#0E1B2A;
  --navy:#12283D;
  --gold-deep:#A8791C;
  --gold:#C99A2E;
  --gold-light:#F2D06B;
  --gold-grad:linear-gradient(135deg,#B8860B 0%,#E9C55A 45%,#C99A2E 100%);
  --paper:#F8F7F4;
}

html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* thin gold diamond eyebrow marker */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;font-weight:600;color:var(--gold-deep);}
.eyebrow::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--gold-grad);box-shadow:0 0 0 1px rgba(168,121,28,.25);}

/* ---------- Light glass header ---------- */
.site-header{
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border-bottom:1px solid rgba(184,134,11,.20);
  box-shadow:0 8px 26px -16px rgba(14,27,42,.28);
}
.site-header.scrolled{
  box-shadow:0 10px 30px -14px rgba(14,27,42,.32);
}
.nav-link{position:relative;transition:color .2s ease;}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;border-radius:2px;
}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);}
.nav-link.is-active{font-weight:700;}

/* dropdown */
.has-dropdown > .dropdown{
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.open > .dropdown{opacity:1;visibility:visible;transform:translateY(0);}

/* mobile drawer */
.drawer{transition:transform .3s cubic-bezier(.4,0,.2,1);}
.drawer.closed{transform:translateX(100%);}

/* ---------- Hero slider ---------- */
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
  background-size:cover;background-position:center;will-change:opacity;
}
.hero-slide.is-active{opacity:1;}
.hero-dot{width:34px;height:4px;border-radius:99px;background:rgba(255,255,255,.4);transition:background .25s;}
.hero-dot.is-active{background:var(--gold-light);}

/* ---------- Service + gallery hover zoom ---------- */
.zoom-frame{overflow:hidden;}
.zoom-frame img{transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.zoom-frame:hover img{transform:scale(1.07);}

.lift{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.lift:hover{transform:translateY(-6px);}

/* service card icon puck */
.icon-puck{background:linear-gradient(135deg,rgba(201,154,46,.15),rgba(242,208,107,.28));}

/* ---------- Testimonials marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:flex;gap:1.5rem;width:max-content;animation:scroll-x 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Before / After comparison ---------- */
.compare{position:relative;overflow:hidden;user-select:none;touch-action:none;border-radius:1rem;background:#12283D;cursor:ew-resize;}
.compare .cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.compare .before-img{z-index:2;clip-path:inset(0 50% 0 0);}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold-light);transform:translateX(-1px);z-index:3;}
.compare .knob{
  position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);
  border-radius:99px;background:var(--gold-grad);display:grid;place-items:center;
  box-shadow:0 6px 18px -4px rgba(14,27,42,.55);z-index:4;
}
.compare .tag{position:absolute;bottom:12px;padding:.25rem .6rem;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(14,27,42,.72);color:#fff;z-index:5;}

/* ---------- Gallery filter ---------- */
.filter-btn.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.gallery-item{transition:opacity .3s ease,transform .3s ease;}
.gallery-item.hide{display:none;}

/* ---------- Floating WhatsApp ---------- */
.wa-fab{box-shadow:0 12px 30px -8px rgba(37,211,102,.6);}
.wa-fab .pulse{position:absolute;inset:0;border-radius:99px;background:#25D366;opacity:.55;animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- Forms ---------- */
.field{transition:border-color .2s ease,box-shadow .2s ease;}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,46,.18);}

/* ---------- Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .hero-slide{transition:none;}
  .marquee-track{animation:none;}
}