/* Moved out of resources/views/partials/auth-scene.blade.php on 2026-10-11 so browsers cache it.
   Edit THIS file; the partial links it with ?v=<mtime>. */
    .login-bg {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background:
        url('../../assets/images/scene/login-wallpaper.png') center / cover no-repeat,
        linear-gradient(135deg, #0d2549 0%, #14386e 55%, #0a1c38 100%);
      z-index: -2;
    }
    .login-scene {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1; overflow: hidden; pointer-events: none;
    }
    .login-bg::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(255, 255, 255, .18);
      transition: background .3s;
    }
    .night .login-bg::after { background: rgba(4, 10, 26, .45); }

    /* ------------------------------------------------------------------ */
    /* WowDash auth layout restyled as the glass card (no markup change). */
    /* ------------------------------------------------------------------ */
    body, .auth.bg-base { background: transparent !important; }

    .auth-login-panel {
      max-width: 464px;
      background: rgba(8, 16, 38, .10) !important;
      border: 1px solid rgba(255, 255, 255, .10) !important;
      border-radius: 36px !important;
      padding: 40px 36px;
      box-shadow: 0 0 30px rgba(255, 255, 255, .16), 0 0 90px rgba(110, 165, 255, .2) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    /* Light text on the dark glass, whatever the app's data-theme is. */
    .auth-login-panel,
    .auth-login-panel h6,
    .auth-login-panel label,
    .auth-login-panel .form-check-label,
    .auth-login-panel .text-secondary-light,
    .auth-login-panel .text-primary-light,
    .auth-login-panel .toggle-password { color: #e8edf5 !important; }

    .auth-login-panel .form-control {
      border: 1px solid rgba(255, 255, 255, .18) !important;
      background: rgba(10, 20, 44, .45) !important;
      color: #eef3fa !important;
    }
    .auth-login-panel .form-control:focus {
      border-color: rgba(110, 165, 255, .7) !important;
      box-shadow: 0 0 0 3px rgba(110, 165, 255, .22) !important;
      background: rgba(10, 20, 44, .65) !important;
    }
    .auth-login-panel .form-control::placeholder { color: rgba(232, 237, 245, .55) !important; }
    .auth-login-panel .icon-field .icon { color: rgba(232, 237, 245, .72) !important; }

    .auth-login-panel a.text-primary-600 { color: #9ec5ff !important; }
    .auth-login-panel a.text-primary-600:hover { color: #ffffff !important; }

    /* Avatar / QR identity image: gradient-blue glow ring, sized down from
       the app's 130px to match the E-Document login. */
    .auth-login-panel .employee_profile {
      width: 120px !important;
      height: 120px !important;
      object-fit: cover;
      box-shadow:
        0 0 0 4px rgba(111, 177, 255, .9),
        0 12px 32px rgba(31, 111, 224, .45) !important;
    }
    /* The QR code must stay scannable — white plate, no tint. */
    .auth-login-panel .qr_identity_visual { background: #fff; padding: 8px; border-radius: 12px; }

    /* Mobile: drop the glass box entirely — the form sits straight on the
       photo, like the reference login. The sun/moon hide too: on a narrow
       screen they sit right behind the company logo. The layout also
       compacts so the whole form fits a phone screen: the panel's desktop
       padding goes, side gutters shrink, and the logo, avatar, and vertical
       rhythm all size down. */
    @media (max-width: 576px) {
      .auth-login-panel {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
      }
      .sky-sun, .sky-moon { display: none !important; }

      /* svh tracks the real visible height on phones (vh ignores the
         browser chrome); older browsers just keep min-vh-100. */
      .auth.auth-login-layout { min-height: 100svh; }
      .auth-login-layout .auth-right { padding: 20px 16px !important; }

      .auth-login-panel .auth-login-brand { margin-bottom: 20px !important; }
      .auth-login-panel .auth-login-brand img { max-height: 64px; }
      .auth-login-panel .employee_profile { width: 88px !important; height: 88px !important; }
      .auth-login-panel .qr_identity_visual { max-width: 200px; }
      .auth-login-panel .mb-40 { margin-bottom: 20px !important; }
      .auth-login-panel .mb-32 { margin-bottom: 16px !important; }
      .auth-login-panel .mt-32 { margin-top: 16px !important; }
      .auth-login-panel .h-56-px { height: 48px !important; }
      .auth-login-panel .btn.py-16 { padding-top: 12px !important; padding-bottom: 12px !important; }
    
      /* The landscape comes down with the screen: at desktop size the
         turbines and pylons stand as tall as the form itself on a phone.
         Sized, not transformed, so each turbine keeps its own scale. */
      .turbine {
        width: calc(90px * var(--wind-scale, 1) * .58);
        height: calc(150px * var(--wind-scale, 1) * .58);
      }
      .hero-wind .pylon { transform: scale(.58); transform-origin: bottom center; }
      /* The wires are drawn in the 320-unit box the pylons stand in, so they
         only meet the crossarms if they come down by the same .58. */
      .hero-wind .power-lines { transform: scaleY(.58); transform-origin: bottom; }
      .hero-wind .tree {
        width: calc(38px * var(--tree-scale, 1) * .7);
        height: calc(72px * var(--tree-scale, 1) * .7);
      }
      .solar-panel {
        width: calc(80px * var(--solar-scale, 1) * .62);
        height: calc(56px * var(--solar-scale, 1) * .62);
      }
      /* And the turbines stand down on the ridge itself, not up in the sky. */
      .turbine.t1 { bottom: 27px; }
      .turbine.t2 { bottom: 36px; }
      .turbine.t3 { bottom: 30px; }
      .turbine.t4 { bottom: 88px; }
      .turbine.t5 { bottom: 55px; }
}

    /* ------------------------------------------------------------------ */
    /* Sky: sun by day, full moon by night, cross-faded by the theme.     */
    /* ------------------------------------------------------------------ */
    .sky-sun, .sky-moon {
      position: absolute; top: 9%; left: 9%;
      width: 110px; height: 110px; border-radius: 50%;
      transition: opacity 1s ease;
    }
    .sky-sun {
      background: radial-gradient(circle at 42% 38%, #fff3c4 0%, #ffd75e 45%, #ffb52e 100%);
      box-shadow:
        0 0 40px 12px rgba(255, 205, 90, .55),
        0 0 120px 50px rgba(255, 185, 60, .28);
      animation: sun-breathe 6s ease-in-out infinite alternate;
      opacity: 1;
    }
    @keyframes sun-breathe {
      from { box-shadow: 0 0 40px 12px rgba(255, 205, 90, .55), 0 0 120px 50px rgba(255, 185, 60, .28); }
      to   { box-shadow: 0 0 55px 18px rgba(255, 205, 90, .65), 0 0 150px 65px rgba(255, 185, 60, .34); }
    }
    .sky-moon {
      /* The disc itself is drawn by the inline SVG (real lunar phase);
         only the halo lives here, scaled by tonight's illumination.
         Sits 4% higher in the sky than the sun. */
      top: 5%;
      box-shadow:
        0 0 35px 10px rgba(214, 226, 250, calc(.35 * var(--moon-illum, 1))),
        0 0 100px 40px rgba(180, 200, 240, calc(.18 * var(--moon-illum, 1)));
      opacity: 0;
    }
    .sky-moon svg { display: block; width: 100%; height: 100%; }
    .night .sky-sun { opacity: 0; }
    .night .sky-moon { opacity: 1; }

    /* Birds and drones fly by day only — at night the sky holds just the
       moon and clouds. */
    .night .hero-birds, .night .hero-drones { display: none; }

    /* Night falls on the landscape too: after dark the hills, turbines,
       pylons and solar farm dim and desaturate like moonlight, and the
       clouds fade. Daytime look is untouched. */
    .hero-wind, .hero-solar { transition: filter 1s ease; }
    .hero-clouds { transition: opacity 1s ease, filter 1s ease; }
    .night .hero-wind, .night .hero-solar { filter: brightness(.45) saturate(.65); }
    .night .hero-clouds { opacity: calc(var(--cloud-opacity, .45) * .5); filter: brightness(.6); }

    /* Bats take over the night shift: hidden by day, out after dark. They
       ride the same flight paths as the bird flocks, with a faster flap. */
    .hero-bats { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; opacity: var(--bat-opacity, 1); display: none; }
    .night .hero-bats { display: block; }
    .bat-flock {
      position: absolute; top: 18%; left: 0; width: 180px; height: 100px;
      animation: birds-fly 30s linear infinite;
      animation-delay: -15s;
    }
    .bat-flock.flock-2 { top: 29%; animation-name: birds-fly-reverse; animation-delay: -15s; }
    .bat { position: absolute; width: calc(40px * var(--bat-scale, 1)); height: calc(22px * var(--bat-scale, 1)); line-height: normal; }
    .bat svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
    .bat .bwing-l, .bat .bwing-r { transform-box: fill-box; }
    .bat .bwing-l { transform-origin: 100% 50%; animation: bat-flap-l .3s ease-in-out infinite alternate; }
    .bat .bwing-r { transform-origin: 0% 50%; animation: bat-flap-r .3s ease-in-out infinite alternate; }
    @keyframes bat-flap-l { from { transform: rotate(-24deg); } to { transform: rotate(22deg); } }
    @keyframes bat-flap-r { from { transform: rotate(24deg); } to { transform: rotate(-22deg); } }
    .flock-2 .bat svg { transform: scaleX(-1); }
    .bat:nth-child(1) { left: 0; top: 42px; color: #000000; }
    .bat:nth-child(2) { left: 44px; top: 14px; transform: scale(.8); color: #05070b; }
    .bat:nth-child(3) { left: 84px; top: 52px; transform: scale(.7); color: #000000; }
    .bat:nth-child(4) { left: 114px; top: 4px; transform: scale(.9); color: #070a10; }
    .bat:nth-child(5) { left: 142px; top: 34px; transform: scale(.6); color: #000000; }
    .bat:nth-child(6) { left: 58px; top: 76px; transform: scale(.75); color: #05070b; }
    .bat:nth-child(2) .bwing-l, .bat:nth-child(2) .bwing-r { animation-delay: .1s; }
    .bat:nth-child(3) .bwing-l, .bat:nth-child(3) .bwing-r { animation-delay: .2s; }
    .bat:nth-child(4) .bwing-l, .bat:nth-child(4) .bwing-r { animation-delay: .05s; }
    .bat:nth-child(5) .bwing-l, .bat:nth-child(5) .bwing-r { animation-delay: .15s; }
    .bat:nth-child(6) .bwing-l, .bat:nth-child(6) .bwing-r { animation-delay: .25s; }

    /* Clouds drifting slowly, seamless 2560px tile loop. */
    .hero-clouds {
      position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 1; pointer-events: none;
      background: url('../../assets/images/scene/clouds-front.png') repeat-x center calc(100% - 100px);
      background-size: 2560px auto;
      opacity: var(--cloud-opacity, .45);
      /* The cloud PNG ends in an almost-solid white mass and is lifted
         100px off the bottom, which the mountain strip used to cover.
         With the mountain hidden the cut showed as a blue box at the
         page bottom, so the band fades out before it. */
      -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 90%);
      mask-image: linear-gradient(to bottom, #000 55%, transparent 90%);
      animation: clouds-drift var(--cloud-dur, 80s) linear infinite;
    }
    @keyframes clouds-drift {
      from { background-position-x: -2560px; }
      to { background-position-x: 0; }
    }

    /* Birds. */
    .hero-birds { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; opacity: var(--bird-opacity, 1); }
    .bird-flock {
      position: absolute; top: 16%; left: 0; width: 180px; height: 100px;
      animation: birds-fly 38s linear infinite;
      animation-delay: -19s;
    }
    .bird-flock.flock-2 { top: 27%; animation-name: birds-fly-reverse; animation-delay: -19s; }
    @keyframes birds-fly {
      0%   { transform: translateX(-200px) translateY(0); }
      25%  { transform: translateX(25vw)   translateY(-16px); }
      50%  { transform: translateX(50vw)   translateY(8px); }
      75%  { transform: translateX(75vw)   translateY(-12px); }
      100% { transform: translateX(100vw)  translateY(0); }
    }
    @keyframes birds-fly-reverse {
      0%   { transform: translateX(100vw)  translateY(0); }
      25%  { transform: translateX(75vw)   translateY(-12px); }
      50%  { transform: translateX(50vw)   translateY(8px); }
      75%  { transform: translateX(25vw)   translateY(-16px); }
      100% { transform: translateX(-200px) translateY(0); }
    }
    .bird { position: absolute; width: calc(46px * var(--bird-scale, 1)); height: calc(34px * var(--bird-scale, 1)); line-height: normal; }
    .bird svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .bird .body-part { fill: currentColor; }
    .bird .belly { fill: #e9e0cd; opacity: .9; }
    .bird .beak-top, .bird .beak-bottom { fill: #c98d3f; transform-box: fill-box; }
    .bird .beak-top { transform-origin: 0% 100%; animation: beak-top .4s ease-in-out infinite alternate; }
    .bird .beak-bottom { transform-origin: 0% 0%; animation: beak-bottom .4s ease-in-out infinite alternate; }
    @keyframes beak-top { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
    @keyframes beak-bottom { from { transform: rotate(0); } to { transform: rotate(18deg); } }
    .bird .eye { fill: #14181f; }
    .bird .wing, .bird .wing-back {
      fill: currentColor; transform-box: fill-box; transform-origin: 100% 100%;
      animation: wing-flap .55s ease-in-out infinite alternate;
    }
    .bird .wing { filter: brightness(.78); }
    .bird .wing-back { filter: brightness(.55); animation-name: wing-flap-back; }
    @keyframes wing-flap { from { transform: rotate(-12deg); } to { transform: rotate(42deg); } }
    @keyframes wing-flap-back { from { transform: rotate(14deg); } to { transform: rotate(-20deg); } }
    .flock-2 .bird svg { transform: scaleX(-1); }
    .bird:nth-child(1) { left: 0; top: 42px; color: #5d6b7a; }
    .bird:nth-child(2) { left: 44px; top: 14px; transform: scale(.8); color: #79624a; }
    .bird:nth-child(3) { left: 84px; top: 52px; transform: scale(.7); color: #6e6e64; }
    .bird:nth-child(4) { left: 114px; top: 4px; transform: scale(.9); color: #5a6b58; }
    .bird:nth-child(5) { left: 142px; top: 34px; transform: scale(.6); color: #7d5f4c; }
    .bird:nth-child(6) { left: 58px; top: 76px; transform: scale(.75); color: #4c5258; }
    .flock-2 .bird:nth-child(1) { color: #2e5f8a; }
    .flock-2 .bird:nth-child(2) { color: #96502a; }
    .flock-2 .bird:nth-child(3) { color: #2f6f64; }
    .flock-2 .bird:nth-child(4) { color: #5f6b3a; }
    .flock-2 .bird:nth-child(5) { color: #5d4a5f; }
    .flock-2 .bird:nth-child(6) { color: #333a41; }
    .flock-2 .bird { width: calc(52px * var(--bird-scale, 1)); }
    .flock-2 .bird .wing, .flock-2 .bird .wing-back { animation-duration: .42s; }
    .bird:nth-child(2) .wing, .bird:nth-child(2) .wing-back { animation-delay: .15s; }
    .bird:nth-child(3) .wing, .bird:nth-child(3) .wing-back { animation-delay: .3s; }
    .bird:nth-child(4) .wing, .bird:nth-child(4) .wing-back { animation-delay: .1s; }
    .bird:nth-child(5) .wing, .bird:nth-child(5) .wing-back { animation-delay: .25s; }
    .bird:nth-child(6) .wing, .bird:nth-child(6) .wing-back { animation-delay: .4s; }

    /* Airplanes with contrails. */
    .hero-planes { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none; }
    .plane-track {
      position: absolute; left: 0;
      animation: plane-fly var(--plane-dur, 25s) linear infinite;
    }
    .plane-track.p1 { top: 7%; animation-delay: calc(var(--plane-dur, 25s) / -2); }
    .plane-track.p2 { top: 12%; animation-name: plane-fly-reverse; animation-delay: calc(var(--plane-dur, 25s) / -4); }
    .plane-track.p3 { top: 22%; animation-delay: calc(var(--plane-dur, 25s) / -8); }
    @keyframes plane-fly {
      from { transform: translateX(-280px); }
      to { transform: translateX(100vw); }
    }
    @keyframes plane-fly-reverse {
      from { transform: translateX(100vw); }
      to { transform: translateX(-280px); }
    }
    .plane {
      position: relative; width: calc(110px * var(--plane-scale, 1)); height: calc(36px * var(--plane-scale, 1));
      animation: plane-rock 2.2s ease-in-out infinite alternate;
    }
    @keyframes plane-rock {
      from { transform: rotate(-1deg) translateY(0); }
      to { transform: rotate(1deg) translateY(5px); }
    }
    .plane svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .plane .pl-wing, .plane .pl-wing-far { transform-box: fill-box; }
    .plane .pl-wing { transform-origin: 100% 0%; animation: wing-flex 1.1s ease-in-out infinite alternate; }
    .plane .pl-wing-far { transform-origin: 100% 100%; animation: wing-flex-far 1.1s ease-in-out infinite alternate; }
    @keyframes wing-flex { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
    @keyframes wing-flex-far { from { transform: rotate(4deg); } to { transform: rotate(-4deg); } }
    .plane::before {
      content: ''; position: absolute; top: 55%; right: 92%;
      width: calc(190px * var(--plane-scale, 1)); height: 4px;
      border-radius: 999px; transform: translateY(-50%);
      background: linear-gradient(to left, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3) 55%, rgba(255, 255, 255, 0));
      filter: blur(1px);
    }
    .plane::after {
      content: ''; position: absolute; top: 55%; right: 92%;
      width: calc(190px * var(--plane-scale, 1)); height: 8px; transform: translateY(-50%);
      background: repeating-linear-gradient(to left, rgba(255, 255, 255, .5) 0 8px, rgba(255, 255, 255, 0) 8px 20px);
      -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 92%);
      mask-image: linear-gradient(to left, #000 15%, transparent 92%);
      filter: blur(1.5px);
      animation: contrail-flow .5s linear infinite;
    }
    @keyframes contrail-flow { from { background-position-x: 0; } to { background-position-x: -20px; } }
    @keyframes contrail-flow-reverse { from { background-position-x: 0; } to { background-position-x: 20px; } }
    .plane-track.p2 .plane svg { transform: scaleX(-1); }
    .plane-track.p2 .plane::before {
      right: auto; left: 92%;
      background: linear-gradient(to right, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3) 55%, rgba(255, 255, 255, 0));
    }
    .plane-track.p2 .plane::after {
      right: auto; left: 92%;
      background: repeating-linear-gradient(to right, rgba(255, 255, 255, .5) 0 8px, rgba(255, 255, 255, 0) 8px 20px);
      -webkit-mask-image: linear-gradient(to right, #000 15%, transparent 92%);
      mask-image: linear-gradient(to right, #000 15%, transparent 92%);
      animation-name: contrail-flow-reverse;
    }
    .plane .pl-body { fill: #e6ecf3; }
    .plane .pl-wing { fill: #b9c7d6; }
    .plane .pl-wing-far { fill: #94a6b8; }
    .plane .pl-windows { fill: #52657a; }

    /* Wind: scene image strip + turbines, trees, pylons. */
    .hero-wind {
      position: absolute; left: 0; right: 0; bottom: 0; height: 320px;
      z-index: 1; overflow: hidden; pointer-events: none;
    }
    .hero-wind .wind-scene-img {
      position: absolute; left: 0; top: 0; width: 100%; height: 100%;
      object-fit: fill;
      opacity: var(--mountain-opacity, 1);
    }
    .turbine {
      position: absolute;
      width: calc(90px * var(--wind-scale, 1));
      height: calc(150px * var(--wind-scale, 1));
      transform-origin: bottom center;
    }
    .turbine .turbine-pole {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 7%; height: 67%;
      background: linear-gradient(to bottom, #eef2f6, #aeb9c6);
      clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    }
    .turbine .turbine-blades {
      position: absolute; top: 3%; left: 0; width: 100%; aspect-ratio: 1 / 1;
      animation: turbine-spin var(--wind-dur, 3.6s) linear infinite;
    }
    .turbine .turbine-blades svg { display: block; width: 100%; height: 100%; }
    @keyframes turbine-spin { to { transform: rotate(360deg); } }
    .hero-wind .power-lines { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: var(--pylon-opacity, 1); }
    .hero-wind .pylon {
      position: absolute; bottom: 2px; width: 80px; height: 150px; opacity: var(--pylon-opacity, 1);
      -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    }
    .hero-wind .pylon svg { display: block; width: 100%; height: 100%; }
    .hero-wind .tree {
      position: absolute;
      width: calc(38px * var(--tree-scale, 1));
      height: calc(72px * var(--tree-scale, 1));
      transform-origin: bottom center;
      opacity: var(--tree-opacity, 1);
    }
    .hero-wind .tree svg { display: block; width: 100%; height: 100%; }
    .hero-wind .tree.alt svg { filter: hue-rotate(14deg) brightness(1.07); }
    .tree.tr1 { left: 3%; bottom: 14px; }
    .tree.tr2 { left: 10%; bottom: 40px; transform: scale(.8); }
    .tree.tr3 { left: 25%; bottom: 52px; transform: scale(.9); }
    .tree.tr4 { left: 43%; bottom: 34px; transform: scale(.7); }
    .tree.tr5 { left: 58%; bottom: 54px; transform: scale(.85); }
    .tree.tr6 { left: 71%; bottom: 46px; transform: scale(.7); }
    .tree.tr7 { left: 86%; bottom: 34px; transform: scale(.95); }
    .tree.tr8 { left: 95%; bottom: 12px; transform: scale(.8); }
    .tree.tr9 { left: 15%; bottom: 48px; transform: scale(.7); }
    .tree.tr10 { left: 33%; bottom: 44px; transform: scale(.75); }
    .tree.tr11 { left: 50%; bottom: 46px; transform: scale(.65); }
    .tree.tr12 { left: 78%; bottom: 48px; transform: scale(.8); }
    .turbine.t1 { left: 5%; bottom: 70px; }
    .turbine.t2 { left: 17%; bottom: 95px; transform: scale(.72); }
    .turbine.t3 { left: 80%; bottom: 85px; transform: scale(.88); }
    .turbine.t4 { left: 92%; bottom: 150px; transform: scale(.6); }
    .turbine.t5 { left: 30%; bottom: 140px; transform: scale(.78); }
    .turbine.t2 .turbine-blades { animation-delay: -1.3s; }
    .turbine.t3 .turbine-blades { animation-delay: -0.6s; }
    .turbine.t4 .turbine-blades { animation-delay: -2s; }
    .turbine.t5 .turbine-blades { animation-delay: -0.9s; }

    /* Drones. */
    .hero-drones { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none; }
    .drone-track {
      position: absolute; left: 0; top: var(--drone-top, 12%);
      animation: drone-fly var(--drone-dur, 25s) linear infinite;
      animation-delay: calc(var(--drone-dur, 25s) / -2);
      opacity: var(--drone-opacity, 1);
    }
    .drone-track.d2 {
      top: calc(var(--drone-top, 12%) + 8%);
      animation-name: drone-fly-reverse;
      animation-delay: calc(var(--drone-dur, 25s) / -4);
    }
    .drone-track.d3 {
      top: calc(var(--drone-top, 12%) + 16%);
      animation-delay: calc(var(--drone-dur, 25s) / -8);
    }
    @keyframes drone-fly {
      from { transform: translateX(-160px); }
      to { transform: translateX(100vw); }
    }
    @keyframes drone-fly-reverse {
      from { transform: translateX(100vw); }
      to { transform: translateX(-160px); }
    }
    .drone {
      position: relative;
      width: calc(96px * var(--drone-scale, 1));
      height: calc(40px * var(--drone-scale, 1));
      animation: drone-bob 1.6s ease-in-out infinite alternate;
    }
    @keyframes drone-bob { from { transform: translateY(0); } to { transform: translateY(8px); } }
    .drone svg { display: block; width: 100%; height: 100%; }
    .drone .prop {
      transform-box: fill-box; transform-origin: 50% 50%;
      animation: prop-spin var(--prop-dur, .12s) linear infinite alternate;
    }
    @keyframes prop-spin {
      from { transform: scaleX(1); opacity: .9; }
      to { transform: scaleX(.15); opacity: .5; }
    }
    .drone-track.d2 .drone svg { transform: scaleX(-1); }

    /* Solar farm. */
    .hero-solar {
      position: absolute; bottom: -7px; z-index: 1;
      left: var(--solar-left, 0); width: var(--solar-width, 100%);
      display: flex; justify-content: center; align-items: flex-end;
      gap: var(--solar-gap, 12px);
      pointer-events: none; opacity: var(--solar-opacity, 1);
    }
    .solar-panel {
      width: calc(80px * var(--solar-scale, 1));
      height: calc(56px * var(--solar-scale, 1));
      flex: 0 1 auto; min-width: 0;
    }
    .solar-panel svg { display: block; width: 100%; height: 100%; }

    /* Rain. */
    #heroRain {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      overflow: hidden; pointer-events: none; z-index: 3;
    }
    .rain-drop {
      position: absolute; top: -50px; border-radius: 999px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(214, 228, 245, .9));
      transform: rotate(var(--slant, 15deg));
      animation-name: rain-fall;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    @keyframes rain-fall {
      to { transform: translate3d(var(--driftX, 20vh), var(--driftY, 120vh), 0) rotate(var(--slant, 15deg)); }
    }

    /* Phones: three small turbines above the power lines (2026-10-01). Here, after the
       base rules — the phone block at the top of this sheet loses to them on
       source order, so its turbine size and height never applied. */
    @media (max-width: 576px) {
      .turbine {
        width: calc(90px * var(--wind-scale, 1) * .55);
        height: calc(150px * var(--wind-scale, 1) * .55);
      }
      .turbine.t4, .turbine.t5 { display: none; }
      /* Above the power lines: the pylons stand 150px × .58 ≈ 89px tall here. */
      .turbine.t1 { bottom: 95px; }
      .turbine.t2 { bottom: 105px; }
      .turbine.t3 { bottom: 100px; }
      /* The clouds sit low on a phone (2026-10-01): pushed down to the power
         lines, the densest bottom of the strip clipped below the screen. The
         fade, measured from the bottom, hides the cut so no blue box shows. */
      .hero-clouds {
        background-position: center calc(100% + 90px);
        -webkit-mask-image: linear-gradient(to top, transparent 70px, #000 260px);
        mask-image: linear-gradient(to top, transparent 70px, #000 260px);
      }
    }