/* =====================================================================
   Pro Line Finish Carpentry — Soltheia enhancement layer
   Loaded AFTER main.css. Adds:
     1. Calm header call CTA (replaces the 3x blinking pulse)
     2. Orchestrated hero load sequence (built piece by piece)
     3. Conic glow border on the CTA band (the one place it's earned)
     4. Quiet accent-edge wake on service cards (conic's restrained cousin)
     5. Per-tile staggered reveal on the work grid
     6. Barely-there wood-grain texture in deep sections
     7. Typographic rhythm refinements
   Every effect degrades safely under prefers-reduced-motion at the foot.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HEADER CALL CTA — calm, confident, no blinking
   Overrides the .site-header__cta pulse/pop from main.css. Instead of
   demanding attention 3x on load, it sits quietly and rewards intent:
   a soft accent ring that breathes in on hover/focus, plus a gentle
   one-time settle on load so the eye still finds it once.
   --------------------------------------------------------------------- */
.site-header__cta {
  animation: ctaSettle 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.9s 1 both;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.3s var(--ease);
}
/* Kill the old attention-ring entirely. */
.site-header__cta::before {
  content: none !important;
  animation: none !important;
}
@keyframes ctaSettle {
  0%   { transform: translateY(-4px); opacity: 0.65; }
  100% { transform: translateY(0);    opacity: 1; }
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 1px rgba(184, 242, 75, 0.35),
              0 8px 22px -8px rgba(184, 242, 75, 0.4);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   2. HERO LOAD SEQUENCE — built piece by piece
   main.css already fades the hero children in sequence via heroFadeIn
   with staged delays. We deepen it: a touch more travel, a gentle scale
   on the media so it "sets" into place like a panel going up, and a
   slower, more deliberate easing. We don't replace the keyframe names
   main.js / main.css rely on; we enrich the media element only.
   --------------------------------------------------------------------- */
.hero__media {
  animation: heroMediaSet 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s 1 both;
  transform-origin: center bottom;
}
@keyframes heroMediaSet {
  0%   { opacity: 0; transform: translateY(26px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
/* The hero eyebrow already carries its own accent dash from main.css, so
   we do NOT add a second drawn line here — stacking two reads as a stray
   wisp rather than a deliberate accent. The media-set load animation below
   is the hero's enhancement; the divider is left as the original. */

/* ---------------------------------------------------------------------
   3. CTA BAND — conic glow border (the earned placement)
   A slow-rotating conic edge around the "request an estimate" band.
   Uses the mask-composite border trick so only a 1.5px rim glows, never
   a filled box. Colors pulled from the brand accent family so it reads
   as Pro Line, not generic rainbow. Slow (12s) so it's ambient, not busy.
   --------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  margin-inline: var(--gutter);
  /* Tighter than the original full-bleed band: it's a contained panel now,
     so it shouldn't read as a giant slab. */
  padding-block: 2.4rem;
  overflow: visible; /* let the outer glow bleed past the edge */
  /* Neutralize the original full-bleed square background + top border so
     only the rounded glowing panel below shows. */
  background: transparent;
  border-top: 0;
}
/* Tighten the internal rhythm so the panel reads compact and confident. */
.cta-band__inner { gap: 0.55rem; }
.cta-band h2 {
  font-size: var(--fs-2xl);
  max-width: 18ch;
  margin-inline: auto;
}
.cta-band .hero__actions { margin-top: 0.4rem; }
.cta-band__phone { margin-block: 0.1rem; }
/* Opaque dark inner fill, sits ABOVE the blurred glow so the interior
   stays dark and only the edge glows. Inherits the band's own gradient
   look via a solid ink panel. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(184,242,75,.10), rgba(255,255,255,.03) 42%, var(--ink-900));
  z-index: 1;
  pointer-events: none;
}
/* The glowing rim itself: bright conic, masked to a 2.5px border, PLUS a
   drop-shadow filter that throws a soft accent halo outward. One element
   does both the crisp rim and the glow, so there's no full-panel wash. */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(
    from var(--cta-ang, 0deg),
    var(--accent-bright),
    var(--accent),
    var(--accent-deep) 35%,
    var(--accent) 55%,
    var(--accent-bright) 72%,
    rgba(210, 255, 98, 0.95) 85%,
    var(--accent-bright)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(184, 242, 75, 0.55))
          drop-shadow(0 0 14px rgba(184, 242, 75, 0.3));
  animation: ctaSpin 9s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* Content sits above both the fill and the rim. */
.cta-band > * { position: relative; z-index: 3; }

/* Animate the angle via a registered custom property so it's GPU-cheap
   and doesn't trigger layout. Fallback (no @property support) still shows
   a static gradient rim, which looks intentional on its own. */
@property --cta-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ctaSpin {
  to { --cta-ang: 360deg; }
}

/* ---------------------------------------------------------------------
   4. SERVICE CARDS — quiet accent-edge wake (conic's restrained cousin)
   No spinning. On hover/focus, a soft conic rim fades in once and holds,
   pairing with the existing lift+zoom. Restraint: it only appears on
   interaction, so the resting grid stays clean and scannable.
   --------------------------------------------------------------------- */
.service-card {
  position: relative;
  isolation: isolate;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 135deg,
    transparent 0deg,
    var(--accent) 90deg,
    var(--accent-bright) 160deg,
    transparent 250deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.service-card:hover::before,
.service-card:focus-within::before {
  opacity: 0.9;
}

/* ---------------------------------------------------------------------
   5. WORK GRID — per-tile staggered reveal
   main.js staggers across .reveal elements entering together, but the
   work grid is a single .reveal block, so all tiles arrive at once.
   Here each tile becomes independently revealable with its own cascade.
   The JS hook (added in enhance.js) adds .tile-reveal + .is-in.
   --------------------------------------------------------------------- */
.work-grid .work-tile.tile-reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.99);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  transition-delay: var(--tile-delay, 0ms);
  will-change: opacity, transform;
}
.work-grid .work-tile.tile-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   6. WOOD-GRAIN TEXTURE — barely there, in the deep sections
   A faint procedural grain layered into .section--deep so the darkest
   bands feel like finished wood rather than flat ink. Pure CSS gradient
   noise — no image request, no perf cost. Opacity kept very low so it's
   felt, not seen.
   --------------------------------------------------------------------- */
.section--deep {
  position: relative;
  isolation: isolate;
}
.section--deep::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      92deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px,
      rgba(0, 0, 0, 0.02) 4px,
      transparent 5px,
      transparent 9px
    ),
    repeating-linear-gradient(
      88deg,
      rgba(255, 255, 255, 0.008) 0px,
      transparent 2px,
      transparent 22px
    );
  background-size: 14px 100%, 60px 100%;
  mix-blend-mode: overlay;
}
.section--deep > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   7. TYPOGRAPHIC RHYTHM
   Small confidence tweaks: slightly tighter display tracking on large
   headings, a touch more air under section eyebrows, and a more
   deliberate lede measure.
   --------------------------------------------------------------------- */
h1, .hero__title {
  letter-spacing: -0.018em;
}
h2 {
  letter-spacing: -0.012em;
}
.eyebrow {
  margin-bottom: 0.85rem;
}
.hero__lede,
.lede {
  max-width: 46ch;
}

/* ---------------------------------------------------------------------
   8. WORK / GALLERY PAGE — let the photos lead
   The grid was a flat catalog of translucent cards. Here we get out of
   the photos' way: cleaner frame, the image bleeds to the card edges, the
   caption sits on a quiet panel, and a hover state signals the (already
   built) lightbox with a soft accent frame + an "enlarge" cue. We keep
   the existing filter bar and lightbox untouched.
   --------------------------------------------------------------------- */
.gallery-grid {
  gap: 1.15rem;
}
.gallery-grid .project-card {
  position: relative;
  isolation: isolate;
  background: var(--ink-850);
  border-color: var(--rule);
  cursor: pointer;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.35s var(--ease);
}
.gallery-grid .project-card:hover,
.gallery-grid .project-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(184, 242, 75, 0.45);
  box-shadow:
    0 22px 46px -22px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(184, 242, 75, 0.25);
}
/* Soft accent frame that wakes on hover — the gallery's quiet cousin of
   the service-card edge, signalling these are interactive. */
.gallery-grid .project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 215deg,
    transparent 0deg,
    var(--accent) 80deg,
    var(--accent-bright) 150deg,
    transparent 240deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.gallery-grid .project-card:hover::after,
.gallery-grid .project-card:focus-within::after {
  opacity: 0.85;
}
/* "Enlarge" cue — a small glyph that fades up on the image on hover, so
   it's clear the photo opens larger (the lightbox already exists). */
.gallery-grid .project-card picture {
  position: relative;
  display: block;
  overflow: hidden;
}
.gallery-grid .project-card picture::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background-color: rgba(11, 13, 11, 0.72);
  /* expand-arrows icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23d2ff62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
  z-index: 4;
}
.gallery-grid .project-card:hover picture::after,
.gallery-grid .project-card:focus-within picture::after {
  opacity: 1;
  transform: translateY(0);
}
/* Caption panel: a touch more deliberate. */
.gallery-grid .project-card figcaption {
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
}
.gallery-grid .project-card figcaption strong {
  transition: color 0.3s var(--ease);
}
.gallery-grid .project-card:hover figcaption strong {
  color: var(--accent-bright);
}

/* Per-tile staggered reveal for the gallery cards (mirrors the work-grid
   stagger). JS hook added in enhance.js. */
.gallery-grid .project-card.tile-reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.99);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  transition-delay: var(--tile-delay, 0ms);
  will-change: opacity, transform;
}
.gallery-grid .project-card.tile-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   REDUCED MOTION — disable every new animation; keep all content visible
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header__cta { animation: none; }
  .hero__media      { animation: none; }
  .cta-band::before { animation: none; }
  .work-grid .work-tile.tile-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gallery-grid .project-card.tile-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gallery-grid .project-card::after,
  .gallery-grid .project-card picture::after { transition: none; }
  .service-card::before { transition: none; }
}