/* An architectural impression: a lightweight, hand-drawn SVG scene. */
.aureum-atmosphere {
  position: relative; overflow: hidden; isolation: isolate; color: var(--ivory);
  background: radial-gradient(ellipse at 67% 35%, #1d4b5a45, transparent 60%), linear-gradient(120deg, #0b253e, #041525 82%);
  border-block: 1px solid #d9b57438;
}
.atmosphere-inner { display: grid; grid-template-columns: .85fr 1.5fr; align-items: center; gap: 5%; padding-block: 75px 60px; }
.atmosphere-copy { padding-block: 25px; position: relative; z-index: 1; }
.atmosphere-copy > .eyebrow { color: var(--gold); font-size: 8px; letter-spacing: 2px; margin-bottom: 30px; }
.atmosphere-copy h2 { font-size: clamp(36px, 3.6vw, 55px); letter-spacing: -1.8px; line-height: 1.18; }
.atmosphere-copy h2 em { color: var(--gold); }
.atmosphere-copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.95; color: #c3d1db; max-width: 310px; margin-top: 25px; }
.atmosphere-copy .text-link { color: var(--ivory); border-color: #d9b57480; margin-top: 28px; font-size: 11px; gap: 36px; }
.atmosphere-copy .text-link:hover { color: var(--gold); }
.atmosphere-art { position: relative; min-width: 0; }
.atmosphere-scene { display: block; width: 100%; height: auto; overflow: visible; }
.atmosphere-caption { display: flex; justify-content: space-between; gap: 20px; padding: 10px 4% 0; color: #c8ae83; font-size: 5.5px; letter-spacing: 1.2px; line-height: 1.8; }
.scene-spark { opacity: .35; transform-box: fill-box; transform-origin: center; }
.scene-orbit { transform-origin: 532px 142px; }
.scene-palm { transform-box: fill-box; transform-origin: center bottom; }
.hero-explore .explore-circle { position: relative; }
.hero-explore .cinema-halo { --halo-bleed: 8px; position: absolute; inset: calc(-1 * var(--halo-bleed)); width: calc(100% + 2 * var(--halo-bleed)); height: calc(100% + 2 * var(--halo-bleed)); margin-left: 0; pointer-events: none; overflow: visible; color: var(--gold); }
.cinema-halo .halo-track { stroke: #d9b57450; stroke-width: .6; }
.cinema-halo .halo-arc { stroke: #f4d7a4; stroke-width: 1; stroke-linecap: round; }
.cinema-halo .halo-star { fill: #fff0ce; }
.location-distance > svg { overflow: visible; }

@media (prefers-reduced-motion: no-preference) {
  .aureum-atmosphere.scene-started .scene-trace { animation: atelier-draw 2.6s cubic-bezier(.25,.1,.25,1) both; }
  .aureum-atmosphere.scene-started .scene-trace-sun { animation-duration: 2.8s; }
  .aureum-atmosphere.scene-started .scene-trace-main { animation-delay: .25s; }
  .aureum-atmosphere.scene-started .scene-trace-terrace { animation-delay: .7s; }
  .aureum-atmosphere.scene-started .scene-trace-detail { animation-delay: 1.1s; animation-duration: 2.2s; }
  .aureum-atmosphere.scene-started .scene-trace-palm { animation-delay: .9s; animation-duration: 2.8s; }
  .aureum-atmosphere.scene-started .scene-trace-land { animation-delay: 1.3s; animation-duration: 2.4s; }
  .aureum-atmosphere.scene-started .scene-orbit { animation: atelier-orbit 48s linear infinite; }
  .aureum-atmosphere.scene-started .scene-sea-near { animation: atelier-tide 10s ease-in-out infinite alternate; }
  .aureum-atmosphere.scene-started .scene-sea-far { animation: atelier-tide 13s -3s ease-in-out infinite alternate-reverse; }
  .aureum-atmosphere.scene-started .scene-palm-left { animation: atelier-palm 9s -2s ease-in-out infinite alternate; }
  .aureum-atmosphere.scene-started .scene-palm-right { animation: atelier-palm 11s ease-in-out infinite alternate-reverse; }
  .aureum-atmosphere.scene-started .scene-spark { animation: atelier-spark 6s ease-in-out infinite; }
  .aureum-atmosphere.scene-started .scene-spark-two { animation-delay: -3s; }
  .aureum-atmosphere:not(.is-active) *, .motion-paused * { animation-play-state: paused !important; }
  .cinema-halo.is-active { animation: atelier-orbit 24s linear infinite; }
  .hero-explore:hover .cinema-halo { animation-duration: 12s; }
  .location-distance.is-active > svg path { animation: atelier-small-tide 5s ease-in-out infinite alternate; }
}
@keyframes atelier-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes atelier-orbit { to { transform: rotate(360deg); } }
@keyframes atelier-tide { from { transform: translateX(-25px); } to { transform: translateX(25px); } }
@keyframes atelier-palm { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@keyframes atelier-spark { 0%, 65%, 100% { opacity: .15; transform: scale(.65); } 78% { opacity: 1; transform: scale(1.15); } 88% { opacity: .4; transform: scale(.85); } }
@keyframes atelier-small-tide { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
@media (max-width: 1050px) {
  .atmosphere-inner { grid-template-columns: .9fr 1.2fr; gap: 3%; padding-block: 55px; }
  .atmosphere-copy h2 { font-size: 36px; letter-spacing: -1px; }
  .atmosphere-copy > .eyebrow { font-size: 6px; letter-spacing: 1.3px; }
  .atmosphere-caption { font-size: 4.5px; letter-spacing: .7px; }
}
@media (max-width: 700px) {
  .atmosphere-inner { grid-template-columns: 1fr; gap: 15px; padding-block: 46px 35px; }
  .atmosphere-copy { padding: 0; }
  .atmosphere-copy h2 { font-size: clamp(32px, 8.8vw, 48px); }
  .atmosphere-copy > .eyebrow { margin-bottom: 23px; }
  .atmosphere-copy > p:not(.eyebrow) { margin-top: 20px; font-size: 11px; max-width: 325px; }
  .atmosphere-copy .text-link { margin-top: 18px; font-size: 10px; }
  .atmosphere-scene { width: 108%; max-width: none; margin-left: -4%; }
  .atmosphere-caption { padding-inline: 0; gap: 10px; font-size: 4px; }
  .hero-explore .cinema-halo { --halo-bleed: 6px; }
}