/* ==========================================================================
   CEES Irrigation Services LLC — motif + motion layer
   Loads AFTER styles.css and only overrides what the direction changes.
   Everything here degrades safely: with CSS or JS missing, the site is v1.1.

   The graphic language is Oscar's own logo geometry, measured in v1:
     10 teeth · gear root at 0.845 R · droplet tip at 1.42 × droplet radius
   js/motif.js draws the gear and droplet from those constants.
   ========================================================================== */

:root {
  --motif-ease: cubic-bezier(.2, .7, .25, 1);
}

/* ---------------------------------------------------------------- hero -- */

.hero-canvas,
.hero-mark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.hero-canvas { inset: 0; width: 100%; height: 100%; display: block; }

.hero-mark {
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: min(600px, 60vw);
  aspect-ratio: 1;
  opacity: .17;
}
.hero-mark svg { width: 100%; height: 100%; overflow: visible; }

/* the diagonal hatch fights the spray arcs — interior pages keep it */
.hero:not(.hero-page)::after { display: none; }

.hero-page .hero-mark {
  right: -140px;
  width: min(420px, 46vw);
  opacity: .13;
}

.hero h1 em { font-style: normal; color: var(--blue-300); }

/* ------------------------------------------------------------ dividers -- */

.arc-divider {
  display: block;
  width: 100%;
  height: clamp(34px, 4.4vw, 60px);
  margin: 0;
}
.arc-divider path { fill: currentColor; }

.arc-divider--navy-paper { background: var(--navy-800); color: var(--paper); }
.arc-divider--paper-tint { background: var(--paper);     color: var(--shell); }
.arc-divider--tint-paper { background: var(--shell);     color: var(--paper); }

/* --------------------------------------------------------------- rules -- */

.rule {
  position: relative;
  overflow: hidden;
  background: var(--line);
}
.rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .9s var(--motif-ease) .1s;
}
/* only a section still waiting to be revealed holds the rule back */
[data-reveal].will-reveal .rule::after { transform: scaleX(0); }

/* --------------------------------------------------------- droplet well -- */

.card-icon {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transition: background-color .32s ease, transform .32s var(--motif-ease);
}
.card-icon svg { transform: rotate(45deg); }
.card:hover .card-icon { background: #d3e6f4; transform: rotate(-45deg) scale(1.06); }

/* --------------------------------------------------------------- cards -- */

.card {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--motif-ease), box-shadow .3s ease, border-color .3s ease;
}
.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--motif-ease);
}
.card:hover { transform: translateY(-5px); }
.card:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------- CEES watermark -- */

.cees-card h3,
.cees-card p { position: relative; z-index: 1; }

.cees-letter {
  position: absolute;
  right: 14px;
  bottom: -6px;
  z-index: 0;
  margin: 0;
  font-size: clamp(4.6rem, 8vw, 7rem);
  line-height: .76;
  color: #e6eff6;
  user-select: none;
  pointer-events: none;
  transition: transform .7s var(--motif-ease), color .4s ease;
}
[data-reveal].will-reveal .cees-letter { transform: translateY(12px); }
.cees-card:hover .cees-letter { color: #d8e8f3; }

/* --------------------------------------------------- feature panel (split) */

.split .panel {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  border-color: rgba(162, 190, 214, .2);
  color: #d3e3ee;
}
.split .panel h3 { color: #fff; }
.split .panel strong { color: #fff; }
.split .panel::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -70px;
  width: 210px; height: 210px;
  border: 1.5px solid rgba(162, 190, 214, .2);
  border-radius: 50%;
}
.split .panel .form-note { color: #a9c4d6; }

.split .panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.split .panel li { margin: 0; padding-left: 26px; position: relative; line-height: 1.5; }
.split .panel li::before {
  content: "";
  position: absolute;
  left: 2px; top: .52em;
  width: 11px; height: 11px;
  background: var(--blue-400);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------- photos -- */
/* Job photos from Oscar. Natural aspect ratios are kept everywhere except the
   home-page band, so no portrait shot ever gets cropped to a letterbox. */

.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.shot figcaption {
  margin-top: 11px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--slate);
  max-width: 62ch;
}

/* home page: one wide feature under the service cards */
.shot--band { margin-top: clamp(38px, 5vw, 60px); max-width: 620px; margin-inline: auto; }
.shot--band figcaption { margin-inline: auto; text-align: center; max-width: 70ch; }

/* services page: supporting shot inside a service block */
.service-block-body .shot { margin-top: 26px; max-width: 560px; }
.service-block-body .shot--portrait { max-width: 340px; }

@media (max-width: 620px) {
  .service-block-body .shot--portrait { max-width: 100%; }
}

/* winterization sequence diagram (services page) */
.wz-diagram { display: block; width: 100%; height: auto; max-width: 620px; }
.wz-diagram .wz-line,
.wz-diagram .wz-arrow,
.wz-diagram .wz-air {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.wz-diagram .wz-line  { stroke: var(--blue-700); stroke-width: 2.2; }
.wz-diagram .wz-arrow { stroke: var(--line);     stroke-width: 2; }
.wz-diagram .wz-air   { stroke: var(--blue-400); stroke-width: 2; }
.wz-diagram .wz-fill  { fill: var(--blue-600); }
.wz-diagram .wz-num {
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px; fill: var(--navy-800);
}
.wz-diagram .wz-lab { font-family: var(--font-body); font-size: 11.5px; fill: var(--slate); }

/* -------------------------------------------------------------- header -- */

.site-header,
.site-header .container,
.brand img {
  transition: min-height .28s ease, width .28s ease, box-shadow .28s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(14, 43, 63, .1); }
.site-header.is-stuck .container { min-height: 68px; }
.site-header.is-stuck .brand img { width: clamp(120px, 13vw, 150px); }

.nav a { transition: background-color .2s ease, color .2s ease; }

/* -------------------------------------------------------------- reveal -- */
/* Nothing is hidden by default. js/motif.js adds .will-reveal only to
   elements that are below the fold, so the page is complete without JS. */

[data-reveal] {
  transition: opacity .7s var(--motif-ease), transform .7s var(--motif-ease);
}
[data-reveal].will-reveal { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- accessibility */

@media (prefers-reduced-motion: reduce) {
  [data-reveal].will-reveal { opacity: 1; transform: none; }
  [data-reveal].will-reveal .rule::after { transform: scaleX(1); }
  [data-reveal].will-reveal .cees-letter { transform: none; }
}

@media (max-width: 620px) {
  .hero-mark { right: -170px; opacity: .12; }
  .cees-letter { right: 10px; bottom: -4px; }
}

@media print {
  .arc-divider, .hero-canvas, .hero-mark { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}