/* ==========================================================================
   R&L Dynamics — motion & interaction layer for the home page
   Apple-style: soft easing, masked reveals, parallax, subtle depth.
   All entrance states are gated behind html.rl-js (added by rl-dynamics.js)
   so the page renders fully without JavaScript, and behind
   prefers-reduced-motion so nothing moves for users who opt out.
   ========================================================================== */

:root {
  --rl-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Hero title lines are block-level even before JS boots (they replace a <br>) */
.rl-line {
  display: block;
  overflow: hidden;
  /* keep glyph descenders (g, y) from being clipped by the mask */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.rl-line > span { display: block; }

/* ── Boot preloader: logo + loading bar (markup lives in index.dc.html) ─ */
#rl-preloader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #f6f3ec;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .65s ease, visibility .65s ease;
  /* CSS-only failsafe: if JS never boots, fade the overlay out after 9s
     so the page is never permanently covered. */
  animation: rl-pre-failsafe 0s linear 9s forwards;
}
@keyframes rl-pre-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
#rl-preloader.rl-pre-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.rl-loading { overflow: hidden; }
.rl-pre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.rl-pre-inner img {
  height: 72px;
  width: auto;
  display: block;
}
.rl-pre-track {
  width: 190px;
  height: 3px;
  border-radius: 99px;
  background: #e4ddcd;
  overflow: hidden;
}
.rl-pre-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b6f9e, #2ba6e0);
  transition: width .35s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .rl-pre-inner img { animation: rl-pre-breathe 2.2s ease-in-out infinite; }
  @keyframes rl-pre-breathe {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.04); opacity: .85; }
  }
}

/* ── Scroll progress bar (element injected by JS) ─────────────────────── */
#rl-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 300;
  background: linear-gradient(90deg, #0b6f9e, #2ba6e0 60%, #e8b06a);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ── Sticky header elevation once the page scrolls ────────────────────── */
header { transition: box-shadow .35s ease; }
html.rl-scrolled header { box-shadow: 0 12px 32px -20px rgba(27, 30, 28, .45); }

@media (prefers-reduced-motion: no-preference) {

  /* ── Scroll-triggered reveals ───────────────────────────────────────── */
  html.rl-js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(7px);
    transition:
      opacity .85s var(--rl-ease),
      transform .85s var(--rl-ease),
      filter .85s var(--rl-ease);
    will-change: opacity, transform, filter;
  }
  html.rl-js [data-reveal].rl-in {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* ── Hero headline: masked line-by-line rise ────────────────────────── */
  html.rl-js .rl-line > span { transform: translateY(114%); }
  html.rl-js.rl-ready .rl-line > span {
    transform: none;
    transition: transform 1.05s var(--rl-ease);
  }
  html.rl-js.rl-ready .rl-line:nth-of-type(2) > span { transition-delay: .12s; }

  /* ── Hero scroll cue ────────────────────────────────────────────────── */
  .rl-scroll-cue {
    position: absolute;
    left: 50%; bottom: 26px;
    transform: translateX(-50%);
    z-index: 2;
    width: 26px; height: 42px;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: 14px;
    pointer-events: none;
  }
  .rl-scroll-cue span {
    position: absolute;
    left: 50%; top: 8px;
    width: 3px; height: 8px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .8);
    animation: rl-cue 2.2s var(--rl-ease) infinite;
  }
  @keyframes rl-cue {
    0%       { transform: translateY(0);    opacity: 0; }
    25%      { opacity: 1; }
    60%      { transform: translateY(14px); opacity: 0; }
    100%     { transform: translateY(14px); opacity: 0; }
  }
  @media (max-width: 860px) { .rl-scroll-cue { display: none; } }

  /* ── Trust strip marquee (desktop only; JS groups the badges) ───────── */
  @media (min-width: 861px) {
    .rl-marquee-clip {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }
    .rl-marquee {
      max-width: none !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      gap: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .rl-marquee-group {
      display: flex;
      align-items: center;
      gap: 40px;
      flex: none;
      padding-right: 40px;
      animation: rl-marquee 38s linear infinite;
    }
    .rl-marquee:hover .rl-marquee-group { animation-play-state: paused; }
    @keyframes rl-marquee { to { transform: translateX(-100%); } }
  }
  @media (max-width: 860px) {
    .rl-marquee-group {
      display: flex;
      align-items: center;
      gap: 20px;
      flex: none;
    }
    .rl-marquee-group[aria-hidden] { display: none !important; }
  }

  /* ── Service cards: depth, tilt surface, cursor glare ───────────────── */
  .rl-services-grid { perspective: 1100px; }
  .rl-service-card {
    position: relative;
    transform-style: preserve-3d;
  }
  @media (hover: hover) and (pointer: fine) {
    .rl-service-card {
      transition:
        transform .55s var(--rl-ease),
        box-shadow .55s var(--rl-ease),
        border-color .3s ease;
    }
    .rl-service-card:hover {
      box-shadow: 0 26px 52px -26px rgba(27, 30, 28, .38);
      border-color: #d5cdb9 !important;
    }
    .rl-glare {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(
        260px circle at var(--gx, 50%) var(--gy, 50%),
        rgba(255, 255, 255, .65),
        transparent 62%
      );
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
    }
    .rl-service-card:hover .rl-glare { opacity: .45; }
  }

  /* ── Review cards: spotlight — hovered card lifts, siblings recede ──── */
  @media (hover: hover) and (pointer: fine) {
    .rl-reviews-grid > div {
      transition:
        transform .45s var(--rl-ease),
        opacity .45s var(--rl-ease),
        box-shadow .45s var(--rl-ease),
        border-color .3s ease;
    }
    .rl-reviews-grid:hover > div:not(:hover) {
      opacity: .5;
      transform: scale(.975);
    }
    .rl-reviews-grid > div:hover {
      transform: translateY(-5px);
      border-color: #4a5145 !important;
      box-shadow: 0 32px 64px -32px rgba(0, 0, 0, .65);
    }
  }

  /* ── Areas map: slow float + hover settle ───────────────────────────── */
  .rl-areas-map { animation: rl-float 7s ease-in-out infinite alternate; }
  @keyframes rl-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
  }
  @media (hover: hover) { .rl-areas-map:hover { animation-play-state: paused; } }

  /* ── CTA section: drifting aurora glow behind the content ───────────── */
  .rl-cta-section {
    position: relative;
    overflow: hidden;
  }
  .rl-cta-section > div { position: relative; z-index: 2; }
  .rl-cta-section::before,
  .rl-cta-section::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 540px; height: 540px;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
  }
  .rl-cta-section::before {
    background: radial-gradient(circle, rgba(43, 166, 224, .55), transparent 65%);
    top: -230px; left: -150px;
    animation: rl-drift-a 16s ease-in-out infinite alternate;
  }
  .rl-cta-section::after {
    background: radial-gradient(circle, rgba(8, 52, 74, .7), transparent 65%);
    bottom: -250px; right: -170px;
    animation: rl-drift-b 19s ease-in-out infinite alternate;
  }
  @keyframes rl-drift-a { to { transform: translate(190px, 90px)  scale(1.15); } }
  @keyframes rl-drift-b { to { transform: translate(-210px, -80px) scale(1.1);  } }

  /* ── Button polish: sheen sweep + arrow nudge ───────────────────────── */
  .rl-sheen {
    position: relative;
    overflow: hidden;
  }
  .rl-sheen::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 50%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--rl-ease);
    pointer-events: none;
  }
  .rl-sheen:hover::after { left: 130%; }

  .rl-hero-btns a span { display: inline-block; transition: transform .35s var(--rl-ease); }
  .rl-hero-btns a:hover span { transform: translateX(4px); }
}

/* ── Mobile floating action bar (element injected by JS) ──────────────── */
#rl-actionbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 120;
  display: none;
  gap: 10px;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom) * .4);
  border-radius: 16px;
  background: rgba(27, 30, 28, .85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  transform: translateY(140%);
  transition: transform .5s var(--rl-ease);
}
#rl-actionbar.rl-show { transform: none; }
@media (max-width: 860px) { #rl-actionbar { display: flex; } }
#rl-actionbar a {
  flex: 1;
  text-align: center;
  padding: 13px 10px;
  border-radius: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}
#rl-actionbar .rl-ab-call {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .4);
}
#rl-actionbar .rl-ab-cta {
  background: #0b6f9e;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  #rl-actionbar { transition: none; }
  .rl-scroll-cue { display: none; }
}