/* Quiet photographic atmosphere; foreground layout and controls stay intact. */
.atmosphere {
  --ambient-photo-opacity: .27;
  --ambient-mobile-opacity: .15;
  --ambient-cloud-x: 82%;
  --ambient-cloud-y: 16%;
  --ambient-shadow-x: 97%;
  --ambient-shadow-y: 88%;
  --ambient-image-position: right center;
  position: relative;
  isolation: isolate;
}
.atmosphere > .ambient-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}
.ambient-frame > .ambient-layer {
  position: absolute;
  inset: -18px 0;
  display: block;
  min-width: 0;
  pointer-events: none;
  user-select: none;
}
.ambient-layer[data-parallax] {transform:none;will-change:auto;}
.ambient-layer[data-motion-active="true"] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.ambient-layer > picture {position:absolute;inset:0;display:block;width:100%;height:100%;}
.ambient-layer .ambient-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--ambient-image-position);
  opacity: var(--ambient-photo-opacity);
  mask-image: linear-gradient(90deg, transparent 0%, #0001 22%, #0007 49%, #000 79%);
  transform: none;
  will-change: auto;
}
.ambient-layer::before,
.ambient-layer::after {content:"";position:absolute;inset:0;pointer-events:none;}
.ambient-layer::before {
  background:
    linear-gradient(270deg, var(--ambient-ivory, #f8f5ef), transparent 7%),
    linear-gradient(90deg, var(--ambient-ivory, var(--paper, #f8f5ef)) 0%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 95%, transparent) 24%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 60%, transparent) 49%, transparent 83%),
    linear-gradient(0deg, var(--ambient-ivory, var(--paper, #f8f5ef)) 0%, transparent 19%, transparent 78%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 70%, transparent) 100%);
}
.ambient-layer::after {
  background:
    radial-gradient(ellipse at var(--ambient-cloud-x) var(--ambient-cloud-y), color-mix(in srgb, var(--ambient-cream, #e8dccb) 42%, transparent), transparent 49%),
    radial-gradient(ellipse at var(--ambient-shadow-x) var(--ambient-shadow-y), color-mix(in srgb, var(--ambient-shade, #bcae98) 13%, transparent), transparent 56%),
    radial-gradient(ellipse at 21% 49%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 67%, transparent), transparent 54%);
}
.atmosphere-subtle {--ambient-photo-opacity:.17;--ambient-mobile-opacity:.11;}
.atmosphere-hero {--ambient-photo-opacity:.50;--ambient-mobile-opacity:.24;}
.service-editorial-hero.atmosphere {--ambient-photo-opacity:.40;--ambient-mobile-opacity:.19;}

/* Service-specific cloud placement adds variation without another image or
   animation. The gradients stay behind the same readable left-hand fade. */
.atmosphere:is([data-atmosphere="working-process"], [data-atmosphere="business-planning"], [data-atmosphere="thailand-market-entry"]) {
  --ambient-cloud-x: 76%;
  --ambient-cloud-y: 79%;
  --ambient-shadow-y: 14%;
  --ambient-image-position: 86% center;
}
.atmosphere:is([data-atmosphere="clear-agreement"], [data-atmosphere="financial-feasibility"], [data-atmosphere="company-profile"]) {
  --ambient-cloud-x: 94%;
  --ambient-cloud-y: 28%;
  --ambient-shadow-x: 79%;
  --ambient-image-position: right 35%;
}
.atmosphere:is([data-atmosphere="project-brief"], [data-atmosphere="business-translation"], [data-atmosphere="gemstone-sourcing"]) {
  --ambient-cloud-x: 71%;
  --ambient-cloud-y: 37%;
  --ambient-shadow-x: 94%;
  --ambient-shadow-y: 82%;
  --ambient-image-position: 91% center;
}
.atmosphere[data-atmosphere="platform-confidence"] {
  --ambient-cloud-x: 89%;
  --ambient-cloud-y: 44%;
  --ambient-shadow-y: 9%;
}
.atmosphere-subtle > .ambient-frame > .ambient-layer::before {
  background:
    linear-gradient(90deg, var(--ambient-ivory, var(--paper, #f8f5ef)) 0%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 90%, transparent) 40%, transparent 91%),
    linear-gradient(0deg, var(--ambient-ivory, var(--paper, #f8f5ef)), transparent 34%, transparent 76%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 70%, transparent));
}
/* Legacy reveal hooks never make information dependent on JavaScript. */
html.motion-ready .reveal,
html.motion-ready .reveal:not(.is-visible) {opacity:1!important;transform:none!important;}

@media (max-width: 900px) {
  .ambient-frame > .ambient-layer {inset:-8px 0 auto;height:min(100%,620px);}
  .ambient-layer[data-parallax],
  .ambient-layer[data-motion-active="true"] {transform:none!important;will-change:auto;}
  .ambient-layer .ambient-image {
    object-position: right top;
    opacity: var(--ambient-mobile-opacity);
    mask-image: linear-gradient(120deg, transparent 0%, #0003 44%, #000 86%);
  }
  .ambient-layer::before {
    background:
      linear-gradient(90deg, var(--ambient-ivory, var(--paper, #f8f5ef)), color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 75%, transparent) 40%, transparent 93%),
      linear-gradient(0deg, var(--ambient-ivory, var(--paper, #f8f5ef)) 0%, color-mix(in srgb, var(--ambient-ivory, #f8f5ef) 80%, transparent) 16%, transparent 69%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-layer[data-parallax],
  .ambient-layer[data-motion-active="true"] {transform:none!important;will-change:auto;}
}
html[data-motion="off"] .ambient-layer[data-parallax] {transform:none!important;will-change:auto;}