/* DS Electrical — Elite Interactions Layer */

/* ── Reduced motion gate ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-scale,
  [data-count], .tilt-card, .btn-magnetic,
  .hero h1 em, .btn-pulse { animation: none !important; transition: none !important; }
}

/* ── Page fade-in ── */
@keyframes ds-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
body { animation: ds-page-in 0.45s ease both; }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.is-visible { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-scale.is-visible { opacity: 1; transform: none; }

/* Stagger: set --i on children via JS */
.stagger-children > * {
  transition-delay: calc(var(--stagger-i, 0) * 80ms) !important;
}

/* Stagger+reveal combo: parent is observed, children cascade in */
.stagger-children.reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--stagger-i, 0) * 70ms) !important;
}
.stagger-children.reveal.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ── Nav scroll state ── */
.nav {
  transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease !important;
}
.nav-scrolled {
  height: 58px !important;
  background: rgba(10,9,8,0.98) !important;
  box-shadow: 0 2px 30px rgba(0,0,0,0.5) !important;
  border-bottom-color: rgba(212,164,74,0.1) !important;
}

/* ── Gold shimmer on hero headline accent ── */
@keyframes ds-gold-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.hero h1 em {
  background: linear-gradient(90deg,
    #b8944f 0%,
    #f5d485 35%,
    #d4a44a 50%,
    #f5d485 65%,
    #b8944f 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ds-gold-shimmer 5s linear infinite;
}

/* ── 3D card tilt ── */
.tilt-card {
  will-change: transform;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

/* ── Pulse glow on primary CTA ── */
@keyframes ds-pulse {
  0%, 100% { box-shadow: 0 12px 36px rgba(212,164,74,.35), 0 2px 0 rgba(255,255,255,.18) inset; }
  50%       { box-shadow: 0 16px 50px rgba(212,164,74,.65), 0 2px 0 rgba(255,255,255,.18) inset; }
}
.btn-pulse {
  animation: ds-pulse 2.8s ease-in-out infinite !important;
}

/* ── Nav link underline slide ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold, #d4a44a);
  border-radius: 2px;
  transition: width 0.22s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* ── Active/online indicator pulse on hero tag ── */
@keyframes ds-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
.hero-tag span::before {
  position: relative;
}
.hero-tag span::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #5a9e6f;
  border-radius: 50%;
  animation: ds-ping 2s cubic-bezier(0,0,0.2,1) infinite;
  opacity: 0;
}

/* ── Booking strip card enhanced hover ── */
.bs-card {
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1),
              border-color 0.2s ease,
              background 0.2s ease,
              box-shadow 0.22s ease !important;
}
.bs-card:hover {
  box-shadow: 0 12px 40px rgba(212,164,74,0.18) !important;
}

/* ── Magnetic button wrapper ── */
.btn-magnetic {
  display: inline-flex;
  transition: transform 0.2s ease !important;
}

/* ── Service card row border glow ── */
.svc-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.svc-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* ── Stat counter reveal ── */
[data-count] {
  display: block;
}

/* ── Reviews photo parallax wrapper ── */
.reviews-photo {
  overflow: hidden;
}
.reviews-photo img {
  transition: transform 0.6s ease;
  will-change: transform;
}

/* ── Section tag gold line ── */
.bs-tag, .svcf-tag, .section-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.bs-tag::before, .svcf-tag::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 2px;
  background: var(--gold, #d4a44a);
  border-radius: 2px;
  transition: width 0.5s ease 0.3s;
}
.bs-tag::after, .svcf-tag::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 2px;
  background: var(--gold, #d4a44a);
  border-radius: 2px;
  transition: width 0.5s ease 0.3s;
}
.is-visible .bs-tag::before,
.is-visible .bs-tag::after,
.is-visible .svcf-tag::before,
.is-visible .svcf-tag::after,
.bs-tag.line-in::before,
.bs-tag.line-in::after,
.svcf-tag.line-in::before,
.svcf-tag.line-in::after {
  width: 1.5rem;
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid rgba(212,164,74,0.7);
  outline-offset: 3px;
}

/* ── Ken Burns on hero image ── */
@keyframes ds-ken-burns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.07) translate(-0.8%, -0.5%); }
  100% { transform: scale(1.04) translate(0.8%, 0.5%); }
}
.hero-img img.ds-kb {
  animation: ds-ken-burns 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── Cursor follower (desktop only) ── */
.ds-cursor-dot, .ds-cursor-ring {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
}
.ds-cursor-dot {
  width: 7px;
  height: 7px;
  background: #d4a44a;
  z-index: 100000;
}
.ds-cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(212, 164, 74, 0.55);
  transition: width 0.18s ease, height 0.18s ease, border-color 0.18s ease;
}
.ds-cursor-ring.ds-ring-hover {
  width: 52px;
  height: 52px;
  border-color: rgba(212, 164, 74, 0.9);
}

/* ── Nav CTA glow pulse ── */
@keyframes ds-nav-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 164, 74, 0.5); }
  60%       { box-shadow: 0 0 0 9px rgba(212, 164, 74, 0); }
}
.nav-cta {
  animation: ds-nav-cta-pulse 2.6s ease-in-out infinite;
}

/* ── Hero headline word cascade ── */
.ds-hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) skewX(-2deg);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--hw, 0) * 85ms + 120ms);
}
body.ds-loaded .ds-hw {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion extras ── */
@media (prefers-reduced-motion: reduce) {
  .ds-cursor-dot, .ds-cursor-ring { display: none !important; }
  .hero-img img.ds-kb { animation: none !important; }
  .nav-cta { animation: none !important; box-shadow: none !important; }
  .ds-hw { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Trust strip (tstrip) ── */
.tstrip{background:var(--light2,#eee9e0);padding:2.5rem clamp(1.5rem,5vw,4rem);border-top:1px solid var(--light3,#e2dbd0);border-bottom:1px solid var(--light3,#e2dbd0)}
.tstrip-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.tstat-num{font-size:1.9rem;font-weight:900;color:var(--text-dark,#1a1714);font-family:'JetBrains Mono',monospace;line-height:1}
.tstat-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted,#6b6560);margin-top:.5rem}
@media(max-width:768px){.tstrip-inner{grid-template-columns:repeat(2,1fr);gap:1.5rem}}