/* ============================================================================
   MCT CHEMICALS — WEBSITE 2.0
   FILE: hero-lighting.css  —  4 lighting modes + ambient motion for the HQ
   ----------------------------------------------------------------------------
   The building SVG reads all its colours from CSS variables. Setting
   data-lighting on the .hq wrapper repaints the entire scene — sky, glass,
   sun glow, lit windows, reflections, wet ground — with zero SVG edits.

   Modes: dusk (default, in the SVG), morning, golden, night, rain.
   Motion is lightweight: transforms/opacity only, all reduced-motion safe.
   ========================================================================== */

.hq-wrap { position: absolute; inset: 0; overflow: hidden; }
.hq { width: 100%; height: 100%; display: block; }
.hq svg, svg.hq { width: 100%; height: 100%; }

/* ---------- DUSK (default) : cool blue hour, warm crown, calm ---------- */
.hq {
  --sky-top: #0B2138; --sky-mid: #16324F; --sky-low: #24506E;
  --glow-core: #FFCF8A; --glow-a: .45; --sun-x: 1180; --sun-y: 300;
  --glass-hi: #6FA8C7; --glass-mid: #2E5C7A; --glass-lo: #16324A;
  --refl: #BFE0F2; --refl-op: .12; --refl-op2: .07;
  --win-op: .12; --star-op: 0; --wet-op: .18; --entrance-op: .35;
  --cloud-op: .7;
}

/* ---------- MORNING : bright, cool, optimistic, high key ---------- */
.hq[data-lighting="morning"] {
  --sky-top: #7FB4D8; --sky-mid: #A9D0E8; --sky-low: #D7ECF6;
  --glow-core: #FFF4DA; --glow-a: .5; --sun-x: 340; --sun-y: 230;
  --glass-hi: #CFE9F6; --glass-mid: #7FB2CE; --glass-lo: #4E86A6;
  --face-lit: #6E8CA6; --face-shad: #4C6A82; --side-lit: #567191; --side-shad: #3D5872;
  --refl: #FFFFFF; --refl-op: .28; --refl-op2: .16;
  --win-op: 0; --star-op: 0; --wet-op: .06; --entrance-op: 0;
  --cloud-fill: #C7DEED; --cloud-fill2: #D8EAF5; --cloud-op: .85;
  --city-fill: #6E93AE; --city-op: .4; --tree: #3E5A45; --trunk: #35492E;
  --ground-hi: #B8CBD6; --ground-lo: #8FA9B7; --road-hi: #A7BEC9; --road-lo: #8299A6;
  --lane: #E8F1F6; --crown: #6E8CA6; --podium-hi: #5E7A90; --podium-lo: #46647A;
  --podium-hi: #6A889E; --podium-lo: #4E6C82; --entrance: #5A7A90; --mullion: #4E86A6;
}

/* ---------- GOLDEN HOUR : warm, cinematic, low sun, long light ---------- */
.hq[data-lighting="golden"] {
  --sky-top: #24354F; --sky-mid: #7B5A6A; --sky-low: #E8A25C;
  --glow-core: #FFD08A; --glow-a: .8; --sun-x: 300; --sun-y: 360;
  --glass-hi: #FFD9A6; --glass-mid: #C8895E; --glass-lo: #6E4A54;
  --face-lit: #7A5E5A; --face-shad: #4A3B44; --side-lit: #5E4750; --side-shad: #3A2E38;
  --refl: #FFE7C4; --refl-op: .3; --refl-op2: .18;
  --win-op: .18; --star-op: 0; --wet-op: .22; --entrance-op: .3;
  --cloud-fill: #B87A6A; --cloud-fill2: #D89A6A; --cloud-op: .8;
  --city-fill: #3A2E3E; --city-op: .6; --crown: #8A6A5E;
  --ground-hi: #2A2028; --ground-lo: #140E14; --road-hi: #33232A; --road-lo: #180F14;
}

/* ---------- NIGHT : deep, lit windows, brand glow, premium ---------- */
.hq[data-lighting="night"] {
  --sky-top: #05101F; --sky-mid: #0A1B2E; --sky-low: #0E2438;
  --glow-core: #24435C; --glow-a: .3; --sun-x: 1300; --sun-y: 180;
  --glass-hi: #24506E; --glass-mid: #14304A; --glass-lo: #0A1D2E;
  --face-lit: #1C3346; --face-shad: #0E1F2E; --side-lit: #16293A; --side-shad: #0A1826;
  --refl: #7FB4D8; --refl-op: .06; --refl-op2: .03;
  --win-op: .95; --star-op: 1; --wet-op: .4; --entrance-op: .6;
  --cloud-fill: #0E2338; --cloud-fill2: #12293E; --cloud-op: .5;
  --city-fill: #0A1826; --city-op: .7; --city-win: #FFD48A; --city-win-op: .5;
  --crown: #2A4258; --brand-op: 1; --tree: #08131B;
  --ground-hi: #060E15; --ground-lo: #020609; --road-hi: #0A1820; --road-lo: #04090D;
}

/* ---------- RAIN : moody, desaturated, wet, reflective, atmospheric ---------- */
.hq[data-lighting="rain"] {
  --sky-top: #1A2530; --sky-mid: #26333E; --sky-low: #38454F;
  --glow-core: #8FA0AD; --glow-a: .2; --sun-x: 800; --sun-y: 200;
  --glass-hi: #5C7480; --glass-mid: #33454F; --glass-lo: #1E2C34;
  --face-lit: #2E3E48; --face-shad: #1C2830; --side-lit: #26343D; --side-shad: #18242C;
  --refl: #AEBEC8; --refl-op: .1; --refl-op2: .05;
  --win-op: .35; --star-op: 0; --wet-op: .5; --entrance-op: .4;
  --cloud-fill: #2A3740; --cloud-fill2: #333F49; --cloud-op: .95;
  --city-fill: #1E2A33; --city-op: .5; --crown: #3A4A54;
  --ground-hi: #1A262E; --ground-lo: #0C1418; --road-hi: #1E2C34; --road-lo: #0E1519;
}

/* ============================================================================
   AMBIENT MOTION  (lightweight — transform/opacity only)
   ========================================================================== */

/* clouds drift slowly, at two speeds for depth */
.hq [data-layer="clouds"] { animation: cloudDrift 90s linear infinite; }
.hq [data-layer="clouds"] g:nth-child(2) { animation: cloudDrift2 130s linear infinite; }
@keyframes cloudDrift  { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
@keyframes cloudDrift2 { from { transform: translateX(30px); }  to { transform: translateX(-30px); } }

/* glass reflection sweep breathes */
.hq [data-layer="reflection"] { animation: reflBreathe 12s var(--ease-standard, ease-in-out) infinite; transform-origin: center; }
@keyframes reflBreathe { 0%,100% { opacity: var(--refl-op, .12); } 50% { opacity: calc(var(--refl-op, .12) * 1.8); } }

/* subtle scene parallax hook (JS sets --px/--py); planes shift by depth */
.hq [data-layer="clouds"]   { will-change: transform; }
.hq [data-layer="city"]     { transform: translate(calc(var(--px,0)*4px), 0); }
.hq [data-layer="building"] { transform: translate(calc(var(--px,0)*8px), calc(var(--py,0)*3px)); }
.hq [data-layer="trees"]    { transform: translate(calc(var(--px,0)*14px), 0); }
.hq [data-layer="road"]     { transform: translate(calc(var(--px,0)*20px), 0); }

/* ---------- RAIN particles (only rendered in rain mode) ---------- */
.hero-rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
.hq[data-lighting="rain"] ~ .hero-rain,
.hq-wrap[data-lighting="rain"] .hero-rain { opacity: 1; }
.hero-rain__drop {
  position: absolute; top: -12%; width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(190,210,225,.5));
  animation: rainfall linear infinite;
}
@keyframes rainfall { to { transform: translateY(120vh); } }

/* ---------- ambient dust/particles (calm modes) ---------- */
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-particles__dot {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--particle, rgba(255,255,255,.4));
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  from { transform: translateY(20px); opacity: 0; }
  10% { opacity: .6; } 90% { opacity: .3; }
  to { transform: translateY(-120px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hq [data-layer="clouds"], .hq [data-layer="clouds"] g:nth-child(2),
  .hq [data-layer="reflection"], .hero-rain__drop, .hero-particles__dot {
    animation: none !important;
  }
}

/* ---------- lighting switcher control ---------- */
.hero-lighting {
  position: absolute; z-index: 6; right: var(--space-5); bottom: var(--space-5);
  display: flex; gap: 6px; padding: 6px;
  background: rgba(10,20,32,.5); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-lighting button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: transparent;
  display: grid; place-items: center; color: #fff; font-size: 15px; line-height: 1;
  transition: transform var(--dur-fast, .15s) ease, background var(--dur-fast,.15s) ease;
}
.hero-lighting button:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }
.hero-lighting button[aria-pressed="true"] { background: var(--accent, #C55A11); border-color: var(--accent, #C55A11); }
.hero-lighting button:focus-visible { outline: 2px solid var(--accent, #C55A11); outline-offset: 2px; }
@media (max-width: 640px) { .hero-lighting { right: 50%; transform: translateX(50%); bottom: var(--space-4); } }

/* sun/glow position per mode (geometry can't take var(); use transform on the group) */
.hq .hq__sun { transition: transform 1.2s var(--ease-standard, ease); }
.hq[data-lighting="morning"] .hq__sun { transform: translate(340px, 230px); }
.hq[data-lighting="golden"]  .hq__sun { transform: translate(300px, 360px); }
.hq[data-lighting="night"]   .hq__sun { transform: translate(1300px, 180px); }
.hq[data-lighting="rain"]    .hq__sun { transform: translate(800px, 200px); }
/* dusk default stays at translate(1180 300) from the SVG attribute */