/* V43 — coherent green atmosphere across Projects, Services, About, Process & Contact.
   Background only: no added illustration, content, typography or layout effects. */
.green-atmosphere{
  position:relative;
  isolation:isolate;
  /* The gradients are deliberately pale enough for the original dark typography. */
  --green-focus-x:78%; --green-focus-y:25%;
  --green-secondary-x:15%; --green-secondary-y:75%;
}
.green-atmosphere::before,
.green-atmosphere::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  pointer-events:none;
  z-index:-1;
}
.green-atmosphere::before{
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse 75% 72% at var(--green-focus-x) var(--green-focus-y), rgba(51,99,69,.19), transparent 74%),
    radial-gradient(ellipse 74% 76% at var(--green-secondary-x) var(--green-secondary-y), rgba(80,123,91,.125), transparent 76%),
    linear-gradient(124deg, rgba(57,106,73,.055), rgba(69,108,78,.095) 58%, rgba(55,101,69,.055));
}
.green-atmosphere::after{
  transform:translateX(-50%);
  transform-origin:center;
  background:
    radial-gradient(ellipse 38% 53% at 70% 38%, rgba(43,90,60,.105), transparent 76%),
    radial-gradient(ellipse 44% 45% at 25% 68%, rgba(74,115,84,.075), transparent 78%);
  filter:blur(28px);
  opacity:.82;
  animation:green-atmosphere-breathe 24s ease-in-out infinite alternate;
}
.green-atmosphere > *{position:relative;z-index:1}
/* V43: add the same restrained green ambience to Selected Works.
   A slightly upper-biased composition supports the large heading; image/card layout stays intact. */
.selected-works.green-atmosphere{
  --green-focus-x:77%; --green-focus-y:19%;
  --green-secondary-x:18%; --green-secondary-y:74%;
}
.services-atmosphere{
  --green-focus-x:80%; --green-focus-y:18%;
  --green-secondary-x:20%; --green-secondary-y:80%;
}
.about-studio{
  --green-focus-x:17%; --green-focus-y:34%;
  --green-secondary-x:81%; --green-secondary-y:78%;
}
.process{
  /* Approximately twice V41's green field, still without obscuring type. */
  --green-focus-x:80%; --green-focus-y:20%;
  --green-secondary-x:35%; --green-secondary-y:84%;
  background:none;
  overflow:visible;
}
.project-inquiry{
  --green-focus-x:70%; --green-focus-y:38%;
  --green-secondary-x:12%; --green-secondary-y:80%;
}
@keyframes green-atmosphere-breathe{
  from{transform:translateX(-50%) translate3d(-18px,7px,0) scale(1)}
  to{transform:translateX(-50%) translate3d(20px,-10px,0) scale(1.045)}
}
@media(max-width:600px){
  .green-atmosphere::before{
    background:
      radial-gradient(ellipse 120% 80% at 70% 29%, rgba(51,99,69,.17), transparent 74%),
      radial-gradient(ellipse 115% 85% at 12% 78%, rgba(80,123,91,.11), transparent 80%),
      linear-gradient(135deg, rgba(57,106,73,.04), rgba(69,108,78,.09));
  }
  .green-atmosphere::after{filter:blur(16px)}
}
@media(prefers-reduced-motion:reduce){
  .green-atmosphere::after{animation:none!important;transform:translateX(-50%)}
}