/* Trial 2026-10-06: extra finish on top of the approved design. Remove this file and its link to go back. */

/* Hero: the illustrated water, spillway, solar panels and battery move a little.
   Boxes are hero-bg design units (image drawn 2000u wide, 34u above .hero-world); masks come from tools/hero_masks.py. */
.hero-life{display:none}
.motion .hero-life{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.life{position:absolute;display:block;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.life i{position:absolute;display:block}
.life-water{left:calc(690*var(--u));top:calc(481*var(--u));width:calc(810*var(--u));height:calc(227*var(--u));-webkit-mask-image:url("../assets/top/motion/water-mask.png");mask-image:url("../assets/top/motion/water-mask.png")}
.life-water i{top:0;bottom:0;left:calc(-300*var(--u));right:calc(-300*var(--u));background:url("../assets/top/motion/life-glint.png") 0 0/calc(300*var(--u)) calc(150*var(--u));animation:life-drift-r 30s linear infinite,life-twinkle 3.4s ease-in-out infinite alternate}
.life-water i+i{background-position:calc(150*var(--u)) calc(72*var(--u));animation:life-drift-l 42s linear infinite,life-twinkle 3.4s ease-in-out -1.7s infinite alternate}
.life-spill{left:calc(1104*var(--u));top:calc(580*var(--u));width:calc(94*var(--u));height:calc(44*var(--u));-webkit-mask-image:url("../assets/top/motion/spill-mask.png");mask-image:url("../assets/top/motion/spill-mask.png")}
.life-spill i{left:0;right:0;top:calc(-40*var(--u));bottom:0;background:url("../assets/top/motion/life-fall.png") 0 0/calc(48*var(--u)) calc(40*var(--u));opacity:.85;animation:life-fall .75s linear infinite}
.life-solar{left:calc(160*var(--u));top:calc(366*var(--u));width:calc(872*var(--u));height:calc(210*var(--u));-webkit-mask-image:url("../assets/top/motion/solar-mask.png");mask-image:url("../assets/top/motion/solar-mask.png")}
.life-solar i{inset:0;background:linear-gradient(104deg,transparent 0 40%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.5) 52%,transparent 60% 100%);transform:translate3d(-100%,0,0);animation:life-sweep 7.5s cubic-bezier(.5,0,.3,1) 1.2s infinite}
.life-glow{position:absolute;left:calc(1338*var(--u));top:calc(672*var(--u));width:calc(26*var(--u));height:calc(38*var(--u));opacity:0;filter:drop-shadow(0 0 calc(4*var(--u)) rgba(46,226,170,.85));animation:life-charge 3.2s ease-in-out infinite}
.life-bolt{inset:0;background:#52f2c0;-webkit-mask-image:url("../assets/top/motion/bolt-mask.png");mask-image:url("../assets/top/motion/bolt-mask.png")}
.hero-life.is-paused i,.hero-life.is-paused .life-glow{animation-play-state:paused}
@keyframes life-drift-r{from{transform:translate3d(calc(-300*var(--u)),0,0)}to{transform:translate3d(0,0,0)}}
@keyframes life-drift-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-300*var(--u)),0,0)}}
@keyframes life-twinkle{from{opacity:.12}to{opacity:.78}}
@keyframes life-fall{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(40*var(--u)),0)}}
@keyframes life-sweep{0%{transform:translate3d(-100%,0,0)}30%,100%{transform:translate3d(100%,0,0)}}
@keyframes life-charge{0%,52%,100%{opacity:0}66%{opacity:1}74%{opacity:.4}84%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.hero-life,.motion .hero-life{display:none}}

/* C3 Folded corners read as real paper: the flap darkens from the crease to its tip and drops a faint shadow on the sheet. */
.job-card:after,.door:after{background:linear-gradient(to bottom left,transparent 50%,#1f4c69 50%,#092b43 100%) right top/var(--fold) var(--fold) no-repeat}
.job-card:before,.door:before,.door:hover:before,.door:focus-visible:before{
  background-image:linear-gradient(to bottom left,transparent 25%,rgba(9,43,67,.14) 25%,rgba(9,43,67,0) 58%);
  background-size:calc(2*var(--fold)) calc(2*var(--fold));background-position:right top;background-repeat:no-repeat;background-origin:border-box}

/* B4 Mouse only: a pointed card lifts off the page and its corner folds a little further. */
@property --fold{syntax:'<length>';inherits:true;initial-value:0px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .job-card,.door{transition:--fold .42s cubic-bezier(.3,.7,.2,1),translate .42s cubic-bezier(.3,.7,.2,1),filter .42s ease}
  .job:hover .job-card{--fold:calc(40*var(--u));translate:0 calc(-6*var(--u));filter:drop-shadow(0 calc(14*var(--u)) calc(16*var(--u)) rgba(9,43,67,.16))}
  .door:hover,.door:focus-visible{--fold:calc(44*var(--u));translate:0 calc(-6*var(--u));filter:drop-shadow(0 calc(14*var(--u)) calc(16*var(--u)) rgba(9,43,67,.28))}
  @media (max-width:1023px){
    .job:hover .job-card{--fold:34px;translate:0 -5px;filter:drop-shadow(0 12px 14px rgba(9,43,67,.16))}
    .door:hover,.door:focus-visible{--fold:30px;translate:0 -5px;filter:drop-shadow(0 12px 14px rgba(9,43,67,.28))}
  }
}

/* D1 PC only: the three JOBS cards arrive as one pile and are dealt to their columns (top/motion.js).
   The moving rules exist only while .is-dealing is set, so the finished cards are the approved layout itself. */
.jobs-list.is-dealing .job{translate:var(--dx,0px) var(--lift,0px);rotate:var(--rot,0deg);scale:var(--sc,1);transform-origin:50% 72%;
  filter:drop-shadow(0 calc(var(--shade,0) * 22px) calc(var(--shade,0) * 30px) rgba(9,43,67,calc(var(--shade,0) * .2)))}
.jobs-list.is-dealing .job-img{translate:0 var(--rise,0px);opacity:var(--show,1)}