/* =====================================================================
   Motion layer. Only active when <html> has .motion (set in <head> unless
   the visitor prefers reduced motion). Reveal states use the individual
   `translate` / `scale` / `rotate` properties so they never fight the
   `transform` used by hover tilt.
   ===================================================================== */

/* The hero photo zooms in on load; keep that inside the hero */
.hero { overflow: hidden; }
html { overflow-x: clip; }

/* Scroll progress bar */
.progress { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cyan-deep), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Smooth FAQ open/close where supported */
:root { interpolate-size: allow-keywords; }
.q::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete; }
.q[open]::details-content { block-size: auto; }

/* Buttons: shine sweep */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); translate: -130% 0; }
.btn:hover::after { translate: 130% 0; transition: translate .7s ease; }

/* Nav: underline grows in */
.nav > a, .dd > a { position: relative; }
@media (min-width: 961px) {
  .nav > a::before, .dd > a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--cyan); scale: 0 1; transform-origin: left; transition: scale .3s ease; }
  .nav > a:hover::before, .nav > a.is-active::before, .dd:hover > a::before, .dd.is-active > a::before { scale: 1 1; }
}

/* Hover pops */
.points li .ic, .svc-row .ic, .steps .ic { transition: translate .35s cubic-bezier(.3,1.6,.5,1), rotate .35s cubic-bezier(.3,1.6,.5,1); }
.points li:hover .ic, .svc-row a:hover .ic, .steps li:hover .ic { translate: 0 -4px; rotate: -8deg; }
.card img, .mat-card .svc-img, .recent .svc-img, .gallery img, .split-img, .svc-img, .mat-img, .team-img { transition: filter .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.card, .mat-card { perspective: 900px; }
.card img, .mat-card .svc-img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--hs, 1)); }
.card:hover img, .mat-card:hover .svc-img { --hs: 1.03; filter: saturate(1.15) brightness(1.05); }
.svc:hover .svc-img, .mat:hover .mat-img, .gallery figure:hover img, .recent figure:hover .svc-img { filter: saturate(1.2) brightness(1.06); }
.collage-link g image { transition: filter .4s ease; }
.collage-link g:hover image { filter: saturate(1.25) brightness(1.08); }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- page-load intro ---------- */
  .motion .top { animation: dropIn .8s cubic-bezier(.2,.8,.2,1) both; }
  .motion .hero .hero-img { animation: heroIn 1.8s cubic-bezier(.2,.7,.2,1) both; }
  .motion .hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
  .motion .hero h1 .ln > span { display: inline-block; animation: lineUp 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.25s + var(--i) * .12s); }
  .motion .hero .crumbs, .motion .hero .hero-sub, .motion .hero .btn, .motion .hero .loc, .motion .hero .hero-ctas, .motion .hero .trust {
    animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) both; }
  .motion .hero .crumbs { animation-delay: .15s; }
  .motion .hero .hero-sub { animation-delay: .6s; }
  .motion .hero .btn, .motion .hero .hero-ctas { animation-delay: .75s; }
  .motion .hero .loc, .motion .hero .trust { animation-delay: .9s; }
  .motion .hero .hero-ctas .btn { animation: none; }
  .motion .hero .btn { animation-name: fadeUp; }
  .motion .hero .btn::after { animation: shine 1.1s 1.8s ease both; }

  /* light glint across the hero photo (clip set per layout in JS) */
  .glint { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; animation: glint 1.6s 1s ease-in-out both; }

  /* ---------- scroll reveals ---------- */
  .motion .r-up { opacity: 0; translate: 0 36px; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
  .motion .r-shard { opacity: 0; translate: -26px 22px; scale: .94; transition: opacity .9s ease, translate 1s cubic-bezier(.2,.8,.2,1), scale 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
  .motion .r-up.in, .motion .r-shard.in { opacity: 1; translate: 0 0; scale: 1; }

  .motion .collage g { opacity: 0; scale: .9; transform-box: fill-box; transform-origin: center; transition: opacity .9s ease, scale 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 120ms); }
  .motion .collage.in g { opacity: 1; scale: 1; }
  .collage image { transform-box: fill-box; transform-origin: center; scale: 1.1; translate: 0 var(--py, 0px); }

  /* LOCAL: letters rise, then the L fills in */
  .motion .local .ch { display: inline-block; opacity: 0; translate: 0 40%; transition: opacity .7s ease, translate .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 90ms); }
  .motion .local.in .ch { opacity: 1; translate: 0 0; }
  .motion .local .solid { color: #fff !important; }
  .motion .local.in .solid { color: var(--navy) !important; transition: opacity .7s ease, translate .9s cubic-bezier(.2,.8,.2,1), color .7s ease .75s; }

  /* rules draw in */
  .motion .r-up .cyan-rule, .motion .r-up .dark-rule { scale: 0 1; transform-origin: left; transition: scale .9s cubic-bezier(.2,.8,.2,1) .35s; }
  .motion .r-up.in .cyan-rule, .motion .r-up.in .dark-rule { scale: 1 1; }

  /* cyan zones slide in */
  .motion .estimate .est-bg::before { translate: -14% 0; opacity: 0; transition: translate 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
  .motion .estimate .est-bg::after { translate: 14% 0; opacity: 0; transition: translate 1.1s cubic-bezier(.2,.8,.2,1) .15s, opacity .8s ease .15s; }
  .motion .estimate.in .est-bg::before, .motion .estimate.in .est-bg::after { translate: 0 0; opacity: 1; }

  /* step arrows nudge */
  .motion .steps.in .step-arr svg { animation: nudge 2.4s ease-in-out infinite; }
  .motion .steps.in .step-arr:nth-child(4) svg { animation-delay: .3s; }
  .motion .steps.in .step-arr:nth-child(6) svg { animation-delay: .6s; }

  /* palm fronds sway */
  .frond { animation: sway 6.5s ease-in-out infinite alternate; transform-origin: 2% 75%; }
  .frond-bot { animation-duration: 7.5s; animation-delay: -2s; }

  /* gentle CTA pulse in the header */
  .nav-cta { animation: pulse 3.6s ease-in-out 2.5s infinite; }
}

@keyframes dropIn { from { translate: 0 -100%; opacity: 0; } }
@keyframes heroIn { from { scale: 1.14; opacity: 0; filter: saturate(.5) brightness(1.15); } }
@keyframes lineUp { from { translate: 0 110%; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 24px; } }
@keyframes glint { from { background-position: 130% 0; } to { background-position: -40% 0; } }
@keyframes shine { from { translate: -130% 0; } to { translate: 130% 0; } }
@keyframes nudge { 0%, 70%, 100% { translate: 0 0; } 35% { translate: 6px 0; } }
@keyframes sway { from { rotate: -2.5deg; } to { rotate: 3deg; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,211,234,.55); } 50% { box-shadow: 0 0 0 10px rgba(47,211,234,0); } }

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .card img, .mat-card .svc-img { transform: none !important; }
}