/* Trillium Lane — hero window lights (progressive enhancement, homepage hero)
 * Everything is namespaced tlwl- and scoped to #section-2-14.
 * The .tlwl-* elements are injected by lights.js; with JS off nothing changes.
 * Remove the mu-plugin files to restore the site exactly as before. */

#section-2-14 { position: relative; }
#section-2-14 > .ct-section-inner-wrap { position: relative; z-index: 1; }

/* full-bleed layer host behind the hero content */
#section-2-14 > .tlwl-root {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Emulates the section's `background-size: cover; background-position: 50% 15%`
 * with a real box, so the floor-band percentages always map to the same photo
 * rows. 1469/1100 = trillium-towers4.jpg pixel size. Old browsers without
 * aspect-ratio collapse this to zero height => original static hero remains. */
.tlwl-canvas {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -15%);
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 1469 / 1100;
}

.tlwl-base,
.tlwl-band {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* one floor band of the lit photo; --t/--r/--b/--l are % of the photo */
.tlwl-band {
  opacity: 0;
  clip-path: inset(var(--t) var(--r, 0%) var(--b) var(--l, 0%));
}

/* re-applies the section's own left-dark gradient above the light layers,
 * matching #section-2-14's first background layer exactly */
.tlwl-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0));
}

/* ignition — lights.js adds .tlwl-on once the lit image is decoded */
.tlwl-on .tlwl-band.tlwl-fa   { animation: tlwl-flicker-a 0.60s linear var(--d) both; }
.tlwl-on .tlwl-band.tlwl-fb   { animation: tlwl-flicker-b 0.72s linear var(--d) both; }
.tlwl-on .tlwl-band.tlwl-glow { animation: tlwl-glow 1.6s ease-in-out var(--d) both; }

@keyframes tlwl-flicker-a {
  0% { opacity: 0; } 12% { opacity: .90; } 20% { opacity: .12; }
  32% { opacity: .95; } 40% { opacity: .30; } 55% { opacity: 1; }
  70% { opacity: .82; } 100% { opacity: 1; }
}
@keyframes tlwl-flicker-b {
  0% { opacity: 0; } 8% { opacity: .55; } 15% { opacity: .10; }
  25% { opacity: .80; } 34% { opacity: .22; } 47% { opacity: .98; }
  60% { opacity: .70; } 100% { opacity: 1; }
}
@keyframes tlwl-glow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tlwl-band { opacity: 1 !important; animation: none !important; }
}