/* Arana Pool Service: styles for the rebuilt interactions (see public/site.js).
   Template design lives in src/styles; brand colours in src/styles/custom.css. */

/* Rolling link letters: each letter carries a copy of itself 1 line below (text-shadow)
   and slides up one line on hover, staggered left to right. Measured on the demo:
   16px links travel 24px, settle in ~400ms. */
/* The template's own <style> for each label sets the font, the colour (--text) and the
   copy one line below (text-shadow at --line-height-abs). This adds the movement. */
p[class^="rolling-text-inner"] span {
  white-space: pre;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 18ms),
    color 0.25s ease;
}
p[class^="rolling-text-inner"] {
  transition: text-shadow 0.25s ease;
}
@media (hover: hover) {
  a:hover p[class^="rolling-text-inner"] span {
    transform: translateY(calc(-1 * var(--line-height-abs, 1.5em))) !important;
  }
  /* header links darken, footer links brighten (measured on the demo) */
  a[data-framer-name^="Nav"]:hover p[class^="rolling-text-inner"] {
    --text: var(--token-43dd2fe3-598f-4140-813b-cf10e7be82b0, rgb(15, 23, 42)) !important;
  }
  a[data-framer-name="Footer"]:hover p[class^="rolling-text-inner"] {
    --text: var(--token-63147813-9a56-4c6f-bc01-d4ba4034c1c3, rgb(255, 255, 255)) !important;
  }
}

/* Card photos zoom to 1.05 on hover (service and article cards). */
.framer-lux5qc .framer-8w8kzn,
.framer-lux5qc .framer-18oad3m {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .framer-lux5qc:hover .framer-8w8kzn,
  .framer-lux5qc:hover .framer-18oad3m {
    transform: scale(1.05);
  }
}

/* Ticker items bob up and down on a 2.5s wave, a quarter-period apart. */
.aps-ticker > * {
  animation: aps-bob 2.5s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}
@keyframes aps-bob {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
}

/* Phone menu: full-screen sheet like the demo's "Phone Open" variant. */
html.aps-menu-open,
html.aps-menu-open body {
  overflow: hidden;
}
nav[data-open="1"] {
  height: 100dvh !important;
  align-items: flex-start !important;
}
.aps-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  padding-top: 24px;
}
.aps-menu[hidden] {
  display: none;
}
.aps-menu-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* FAQ answers only show in the open state. */
.framer-UezrP.framer-v-1x8v3jq .framer-cr2yan {
  display: none;
}
.framer-UezrP {
  cursor: pointer;
  overflow: hidden;
}

/* Form status line under the submit button. */
.aps-form-note {
  margin: 4px 0 0;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}
.aps-form-note:empty {
  display: none;
}

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

/* Hero ticker: Arana's suburbs in place of the template's placeholder logos. */
.aps-ticker-text {
  margin: 0;
  white-space: nowrap;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--token-43dd2fe3-598f-4140-813b-cf10e7be82b0, rgb(15, 23, 42));
}
@media (max-width: 809.98px) {
  .aps-ticker-text { font-size: 18px; }
}

/* Phone menu link labels (same look as the template's "Nav Phone" links). */
.rolling-text-inner-aps {
  --text: var(--token-dc61a646-5195-4eb7-a4e8-f940806fe8c0, rgb(51, 65, 85));
  --line-height-abs: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
  width: max-content;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 20px;
  user-select: none;
  text-shadow: 0 var(--line-height-abs) 0 var(--text);
}
.rolling-text-inner-aps span {
  color: var(--text);
}
.aps-menu .framer-ibvUR {
  padding: 16px 48px;
  display: flex;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* White logo over the blue hero (see site.js darkHero). */
/* The template recolours its own mono logo with an inline filter; Arana's logo is in colour. */
.framer-hxzQO img {
  filter: none !important;
  transition: filter 0.3s;
}
html.aps-logo-light nav:not([data-open="1"]) .framer-hxzQO img {
  filter: brightness(0) invert(1) !important;
}