/* ============================================================
   SUPER GROUP — effects layer
   Per-division colour waves + scroll-clean comparisons + WebGL
   ------------------------------------------------------------
   DIVISION PALETTES — edit the two hex values per division here.
   Each division carries a two-colour "wave". Building Wash is
   cyan → magenta per brand. Others are hero-derived defaults.
   ============================================================ */

/* --accent / --accent-deep / --accent-on drive the global solid fills
   (primary buttons, pills, focus rings, selection). --logo-ink tints the
   masked header/footer shield so the mark carries each section's colour.
   Super Group is orange, Projects is red, Building Wash is pink-purple. */
:root {
  --accent: var(--orange);
  --accent-deep: var(--orange-deep);
  --accent-on: #ffffff;
  --logo-ink: #f2820d;
}
[data-div="group"]        { --div-a: #f7a11a; --div-b: #e8590c;            /* Super Group core — orange */
                            --accent: #e8590c; --accent-deep: #b7220c; --accent-on: #ffffff;
                            --logo-ink: #f2820d; }
[data-div="projects"]     { --div-a: #ef4136; --div-b: #b3121b;            /* Project Commander — red */
                            --accent: #d92027; --accent-deep: #9e0f14; --accent-on: #ffffff;
                            --logo-ink: #ef3a30; }
[data-div="building-wash"]{ --div-a: #db37cb; --div-b: #a626d4;            /* Building Wash — pink-purple */
                            --accent: var(--div-a); --accent-deep: var(--div-b); --accent-on: #ffffff;
                            --logo-ink: #db37cb; }
[data-div="waterproofing"]{ --div-a: #2563eb; --div-b: #22d3ee; }  /* AquaShield */
[data-div="plumbing"]     { --div-a: #0ea5e9; --div-b: #14b8a6; }  /* Aqua Fixer */
[data-div="electrical"]   { --div-a: #facc15; --div-b: #3b82f6; }  /* Electrobolt */
[data-div="roofing"]      { --div-a: #94a3b8; --div-b: #475569; }  /* Skyshield */
[data-div="carpentry"]    { --div-a: #d97706; --div-b: #92400e; }  /* Build Master */
[data-div="painting"]     { --div-a: #a855f7; --div-b: #ec4899; }  /* Colour Crafter */
[data-div="landscaping"]  { --div-a: #4ade80; --div-b: #15803d; }  /* Green Guardian */
[data-div="pest"]         { --div-a: #ef4444; --div-b: #7f1d1d; }  /* Bug Buster */
[data-div="pools"]        { --div-a: #38bdf8; --div-b: #1d4ed8; }  /* Aqua Knight */
[data-div="windows"]      { --div-a: #7dd3fc; --div-b: #e2e8f0; }  /* Clear Vision */
[data-div="assembly"]     { --div-a: #8b5cf6; --div-b: #f97316; }  /* Supersemble */

/* ---------- Colour wave: flowing gradient band ---------- */
.colour-wave {
  position: relative; height: 4px; width: 120px; border-radius: 999px;
  overflow: clip; margin: 18px 0 6px;
  background: rgba(127,127,127,0.12);
}
.colour-wave::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--div-a, var(--orange)) 30%, var(--div-b, var(--orange-deep)) 60%, transparent 100%);
  background-size: 220% 100%;
  animation: wave-pan 3.2s linear infinite;
}
.colour-wave--wide { width: 100%; height: 2px; margin: 0; }
@keyframes wave-pan { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Division-tinted kicker + accents */
[data-div] .kicker { color: var(--div-b); }
[data-div] .kicker::before { background: linear-gradient(90deg, var(--div-a), var(--div-b)); }

/* ---------- Aurora: soft ambient division glow for dark heroes ---------- */
.aurora { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(90px); opacity: 0.16; will-change: transform;
}
.aurora::before { background: var(--div-a, var(--orange)); top: -28vmax; right: -16vmax; animation: aurora-a 16s ease-in-out infinite alternate; }
.aurora::after  { background: var(--div-b, var(--orange-deep)); bottom: -32vmax; left: -14vmax; animation: aurora-b 19s ease-in-out infinite alternate; }
@keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-8vmax,6vmax,0) scale(1.15); } }
@keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(7vmax,-5vmax,0) scale(0.95); } }

/* ---------- Three.js canvas mounts ---------- */
.fx-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-canvas canvas { width: 100%; height: 100%; display: block; }
.hero .hero-inner, .hero .scroll-cue { position: relative; z-index: 1; }

/* Hero ambient 3D field (assets/js/hero3d.js). Layers over the gradient base
   and aurora, beneath the headline + form. Pointer-through so the hero stays
   fully usable; the gradient remains the visible default if WebGL is absent. */
.hero-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-3d .hero3d-canvas { width: 100%; height: 100%; display: block; }
.bw-hero .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-3d { display: none; } }

/* ---------- Scroll-clean comparison (from sgbuildingwash, upgraded) ---------- */
.clean-stack { display: grid; gap: clamp(28px, 4vw, 56px); }
.clean-card {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  border-radius: var(--radius-lg); overflow: clip;
  background: var(--white); border: 1px solid var(--line);
}
.clean-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.clean-card:nth-child(even) .compare-stage { order: 2; }

.compare-stage {
  position: relative; min-height: clamp(380px, 58vh, 640px);
  overflow: clip; isolation: isolate; background: var(--graphite);
}
.compare-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; pointer-events: none;
}
.compare-after {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
/* Squeegee edge that travels with the wipe */
.wipe-edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, var(--div-a, #fff), var(--div-b, #fff));
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--div-a, #fff) 60%, transparent);
  transform: translateX(0); opacity: 0; will-change: transform, opacity;
}
.compare-label {
  position: absolute; top: 18px; z-index: 3; padding: 9px 14px; border-radius: 999px;
  background: rgba(8, 9, 11, 0.5); color: var(--white);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800;
}
.compare-label.before { right: 18px; }
.compare-label.after { left: 18px; }
.clean-progress {
  position: absolute; left: 28px; right: 28px; bottom: 26px; height: 4px;
  border-radius: 999px; background: rgba(255,255,255,0.25); overflow: clip; z-index: 4;
}
.clean-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--div-a, #fff), var(--div-b, #fff));
  border-radius: 999px;
}
.clean-content {
  padding: clamp(30px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: center;
}
.clean-content .ci-index {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--div-b, var(--orange)); margin-bottom: 18px;
}
.clean-content h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.clean-content p { font-size: 0.99rem; }
.clean-content .btn { align-self: flex-start; margin-top: 26px; }
@media (max-width: 880px) {
  .clean-card, .clean-card:nth-child(even) { grid-template-columns: 1fr; }
  .clean-card:nth-child(even) .compare-stage { order: 0; }
  .compare-stage { min-height: 54vh; }
}

/* ---------- Word-split headline reveal ---------- */
.split-line { display: inline-block; overflow: clip; vertical-align: bottom; }
.split-word { display: inline-block; will-change: transform; }

/* ---------- Division card colour treatment ---------- */
.division-card .dc-wave { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; }
.division-card .dc-wave::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--div-a), var(--div-b), transparent);
  background-size: 220% 100%; animation: wave-pan 3.4s linear infinite;
}
.division-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 60% at 70% 100%, color-mix(in srgb, var(--div-b, var(--orange)) 32%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.division-card:hover::before { opacity: 1; }
.division-card .pill--live { background: linear-gradient(90deg, var(--div-a, var(--orange)), var(--div-b, var(--orange-deep))); }

/* ---------- Roster: division colour chips ---------- */
.roster-row .rr-chip {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 4px;
  background: linear-gradient(135deg, var(--div-a, #565b61), var(--div-b, #3a3e44));
  box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.roster-row:hover .rr-chip { transform: scale(1.3); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--div-a, #fff) 55%, transparent); }
a.roster-row:hover .rr-name { color: var(--div-a); transition: color 0.25s; }
.roster-row.is-soon .rr-chip { opacity: 0.45; }

/* ---------- Roster: "more trades" row with glowing RGB dot ---------- */
.roster-more .rr-name { color: #c4c8cd; }
.roster-more .rr-trade { color: #80868d; }
.rr-dot-rgb {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%;
  background: #ff3b3b; animation: rgbpulse 6s linear infinite;
}
@keyframes rgbpulse {
  0%   { background: #ff3b3b; box-shadow: 0 0 10px 2px rgba(255,59,59,0.65); }
  25%  { background: #ffd23b; box-shadow: 0 0 10px 2px rgba(255,210,59,0.65); }
  50%  { background: #3bff7a; box-shadow: 0 0 10px 2px rgba(59,255,122,0.65); }
  75%  { background: #3b9bff; box-shadow: 0 0 10px 2px rgba(59,155,255,0.65); }
  100% { background: #ff3b3b; box-shadow: 0 0 10px 2px rgba(255,59,59,0.65); }
}

/* ---------- Stats: scrub-tinted numerals on division pages ---------- */
[data-div] .stat .num .unit { color: var(--div-b); }

/* ---------- Reduced motion: dissolve instead of wipe, kill ambience ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .colour-wave::before, .division-card .dc-wave::before { animation: none; }
  .fx-canvas { display: none; }
  .compare-after { clip-path: none; opacity: 1; }
  .wipe-edge { display: none; }
  .rr-dot-rgb { animation: none; background: #8a8f96; box-shadow: 0 0 8px 1px rgba(138,143,150,0.5); }
}