/* Atmospheric interludes: water, nature, and material — independent of project imagery. */
.atmosphere { position: relative; background: var(--paper); scroll-margin-top: -16px; }
.atmosphere-stage { position: relative; min-height: 680px; height: 85svh; isolation: isolate; overflow: clip; color: #384b42; }
.water-film, .atmosphere-visual { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.water-film { background: #d5e0d8 url('water-poster.webp') center/cover no-repeat; }
.atmosphere-video, .atmosphere-visual img { width: 100%; height: 100%; object-fit: cover; }
.water-film::after { content: ''; position: absolute; inset: 0; background: rgba(245,248,235,.18); pointer-events: none; }
.water-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 40px var(--gutter) 110px; pointer-events: none; }
.water-title .eyebrow { margin-bottom: 28px; font-size: 10px; letter-spacing: 2px; }
.water-title h2 { font-size: clamp(80px,11.7vw,182px); line-height: .95; font-weight: 400; letter-spacing: -.065em; }
.water-title h2 span { display: block; }
.water-title h2 span:last-child { margin-left: .6em; }
.atmosphere-bottom { position: absolute; bottom: 66px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: end; gap: 24px; font-size: 13px; line-height: 1.7; }
.atmosphere-link { display: inline-flex; gap: 35px; padding: 12px 0; border-bottom: 1px solid currentColor; font-size: 12px; align-items: center; }
.atmosphere-link span { font-size: 24px; }
.atmosphere-note { position: absolute; bottom: 22px; left: var(--gutter); font-size: 8px; letter-spacing: 1.8px; }
.atmosphere-copy { position: absolute; top: 50%; left: var(--gutter); width: 51%; transform: translateY(-50%); }
.atmosphere-copy .eyebrow { font-size: 9px; letter-spacing: 2px; }
.atmosphere-copy h3 { font-size: clamp(58px,7.7vw,118px); line-height: 1.02; font-weight: 400; letter-spacing: -.06em; margin: 40px 0 30px; }
.atmosphere-copy h3 span { padding-left: .45em; }
.atmosphere-copy p { font-size: 14px; line-height: 1.9; margin-bottom: 30px; }
.atmosphere-copy .text-link { color: inherit; }
.atmosphere-nature { background: #f5f4ea; }
.atmosphere-nature .atmosphere-visual { left: 15%; }
.atmosphere-nature .atmosphere-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#f5f4ea 0%,rgba(245,244,234,.97) 19%,rgba(245,244,234,.80) 37%,transparent 67%); pointer-events: none; }
.atmosphere-nature .atmosphere-visual img { object-position: 65% center; }
.atmosphere-stone { color: #554839; background: #efe4d2; }
.atmosphere-stone .atmosphere-stage { color: #554839; }
.atmosphere-stone .atmosphere-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(250,245,235,.97),rgba(250,245,235,.78) 33%,transparent 65%); pointer-events: none; }
.water-ripple { position: absolute; width: 24px; height: 24px; margin: -12px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; pointer-events: none; animation: water-ring 1.7s ease-out forwards; box-shadow: 0 0 0 5px rgba(255,255,255,.11); }
@keyframes water-ring { from { transform: scale(.5); opacity: .75; } to { transform: scale(9); opacity: 0; } }
@media(min-width:1000px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
 .journey-ready .atmosphere { height: 155svh; }
 .journey-ready .atmosphere-water { height: 175svh; }
 .journey-ready .atmosphere-stage { position: sticky; top: var(--header-height,112px); height: calc(100svh - var(--header-height,112px)); min-height: 0; }
 .journey-ready .water-film { clip-path: circle(var(--water-radius,76%) at 50% 47%); }
 .journey-ready .water-title h2 span:first-child { transform: translateX(var(--title-left,0px)); }
 .journey-ready .water-title h2 span:last-child { transform: translateX(var(--title-right,0px)); }
 .journey-ready .water-title .eyebrow { transform: translateY(var(--title-rise,0px)); }
 .journey-ready .atmosphere-nature .atmosphere-visual { clip-path: inset(var(--nature-inset,0%) 0 var(--nature-inset,0%) var(--nature-inset,0%)); }
 .journey-ready .atmosphere-visual img { transform: translate3d(var(--visual-x,0px),var(--visual-y,0px),0) scale(var(--visual-scale,1.04)); }
 .journey-ready .atmosphere-copy { transform: translate3d(0,calc(-50% + var(--atmosphere-rise,0px)),0); }
 .journey-ready .atmosphere-stone .atmosphere-visual { clip-path: inset(0 0 0 var(--stone-inset,0%)); }
 .journey-ready .journey-chapter { height: 145svh; }
 .journey-ready .atmosphere.is-near .atmosphere-visual img { will-change: transform; }
 .journey-ready .atmosphere.is-near .water-title h2 span { will-change: transform; }
}
@media(max-width:999px), (max-height:699px) {
 .atmosphere-stage { min-height: 640px; height: 85svh; max-height: 900px; }
 .water-title h2 { font-size: clamp(70px,13vw,125px); }
 .atmosphere-copy h3 { font-size: clamp(54px,9vw,85px); }
 .atmosphere-copy { width: 74%; }
 .atmosphere-copy p { font-size: 13px; }
}
@media(max-width:600px) {
 .atmosphere-stage { min-height: 600px; height: 88svh; max-height: 790px; }
 .water-title { padding-bottom: 150px; }
 .water-title .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
 .water-title h2 { font-size: clamp(65px,18vw,106px); }
 .water-title h2 span:last-child { margin-left: .2em; }
 .atmosphere-bottom { bottom: 68px; align-items: start; flex-direction: column; gap: 12px; font-size: 12px; }
 .atmosphere-note { bottom: 25px; font-size: 7px; }
 .atmosphere-copy { top: auto; bottom: 75px; width: calc(100% - 2 * var(--gutter)); transform: none; }
 .atmosphere-copy h3 { font-size: clamp(52px,14vw,76px); margin: 26px 0 24px; }
 .atmosphere-copy h3 span { padding-left: .3em; }
 .atmosphere-copy p { font-size: 12px; margin-bottom: 18px; }
 .atmosphere-nature .atmosphere-visual { left: 0; }
 .atmosphere-nature .atmosphere-visual img { object-position: 75% center; }
 .atmosphere-nature .atmosphere-stage::after { background: linear-gradient(0deg,rgba(245,244,234,.98),rgba(245,244,234,.92) 43%,rgba(245,244,234,.12) 86%); }
 .atmosphere-stone .atmosphere-stage::after { background: linear-gradient(0deg,rgba(250,245,235,.98),rgba(250,245,235,.9) 43%,rgba(250,245,235,.1) 86%); }
 .atmosphere-stone .atmosphere-visual img { object-position: 75% center; }
}
@media(prefers-reduced-motion:reduce) {
 .water-ripple { display: none; }
 .atmosphere-visual img, .water-title h2 span { transform: none; }
}
