/* Spatial discovery: normal document scrolling, enhanced with local depth. */
.feed-layout-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:20px 0 32px; }
.promenade-stage { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#100f19; }
.promenade-scene { position:absolute; inset:-110px -45px; opacity:0; transition:opacity 1.2s ease; transform:translateY(var(--scene-drift,0px)); }
.promenade-scene img { width:100%; height:100%; object-fit:cover; }
.promenade-scene.is-current { opacity:.78; }
.scene-control { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 36px; padding:18px 22px; border:1px solid #fbd5ed25; border-radius:18px; background:#14121cdb; }
.scene-control .eyebrow { display:block; margin-bottom:6px; color:#ffbedf; }
.scene-control .scene-name { margin:0 0 4px; font-size:1.1rem; }
.scene-control .actions { flex-shrink:0; }
.promenade-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#100f19e8 0%,#100f1970 36%,#100f19a6 100%),linear-gradient(90deg,#100f19b3,transparent 55%,#100f1980); }
.promenade-arc { position:absolute; width:65vw; height:115vh; left:-38vw; top:10vh; border:1px solid #aeeaff70; border-radius:50%; box-shadow:inset -10px 0 30px -24px #c0edff,14px 0 50px -40px #ef96d7; z-index:1; transform:translateY(var(--arc-drift,0px)); }
.promenade-arc:last-child { left:auto; right:-45vw; top:48vh; border-color:#ffb2e438; }
body.promenade-active { isolation:isolate; background:#100f19; }
.promenade-active .brandbar { border-color:#fbd5ed20; }
.promenade-active .brand::before { background:#ffbedf; box-shadow:0 0 18px #ffb3df70; }
.promenade-active .primary { background:#ffbedf; border-color:#ffbedf; color:#271522; }
.promenade-active .primary:hover { background:#ffd7ea; }
.promenade-active .discovery-heading { padding-top:38px; }
.promenade-active .discovery-heading h1 { font-size:clamp(2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.05em; }
.promenade-active .filterbar { padding:16px 0; border-bottom:1px solid #fbd5ed20; }
.promenade-feed { display:flex; flex-direction:column; gap:82px; position:relative; padding:6px 0 72px; }
.promenade-feed .portal-slot {
  width:76%; max-width:700px; margin:0;
}
.promenade-feed .portal-slot:nth-child(even) { margin-left:auto; }
.promenade-feed .glass-post {
  width:100%; max-width:none; margin:0;
  transform:perspective(1200px) translate3d(var(--portal-shift,0px),var(--portal-lift,0px),0) rotateY(var(--portal-turn,0deg)) rotateX(var(--portal-pitch,0deg)) scale(var(--portal-scale,1));
  transform-origin:50% 50%;
  opacity:var(--portal-presence,1);
}
.promenade-feed .glass-post:nth-child(even) { margin:0 0 0 auto; }
.promenade-feed .glass-post:nth-child(3) { margin-top:0; }
.promenade-feed .glass-post .media { aspect-ratio:auto; height:clamp(270px,47vh,490px); }
.promenade-feed .glass-post .media img {
  animation:none;
  transition:none;
  transform:translateY(var(--photo-drift,0px)) scale(1.34);
}
.promenade-feed .glass-post .media::after {
  content:""; position:absolute; inset:-35%; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,#d8efff00 40%,#e8f5ff24 48%,#ffe0f530 50%,transparent 60%);
  transform:translateX(var(--shine-shift,0%));
}
.promenade-feed .glass-post .post-info { padding:19px 22px 22px; }
.promenade-feed .glass-post .post-info > .small { margin-top:8px; }
.promenade-feed .glass-post .post-caption { font-size:1rem; }
.promenade-feed .glass-post::before { opacity:.65; transition:opacity .35s ease; }
.promenade-feed .glass-post.is-in-focus::before, .promenade-feed .glass-post:focus-within::before { opacity:1; }
.promenade-feed .glass-post.is-in-focus::after { border-color:#ffe4f7b3; box-shadow:0 0 15px #ff89d570,inset 0 1px 2px #fff8; }
.promenade-active .feed-end { border-top:1px solid #fbd5ed25; }
@media(min-width:1100px) {
  .promenade-feed .portal-slot:nth-child(even) { max-width:640px; }
  .promenade-feed .portal-slot:nth-child(3n) .media { height:clamp(280px,41vh,420px); }
}
@media(max-width:760px) {
  .feed-layout-bar { align-items:flex-start; flex-direction:column; gap:12px; }
  .promenade-feed { gap:32px; padding-bottom:32px; }
  .promenade-feed .portal-slot { width:100%; max-width:none; }
  .promenade-feed .glass-post .media img { transform:translateY(var(--photo-drift,0px)) scale(1.2); }
  .promenade-feed .glass-post .media { height:auto; aspect-ratio:4/4.2; }
  .promenade-feed .glass-post .post-info { padding:18px 10px 16px; }
  .promenade-scene img { filter:none; }
  .promenade-scene.is-current { opacity:.48; }
  .scene-control { align-items:flex-start; flex-direction:column; padding:16px; }
  .promenade-arc { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .promenade-feed .glass-post { transform:none; }
  .promenade-feed .glass-post .media img { transform:none; }
  .promenade-feed .glass-post .media::after { display:none; }
  .promenade-scene, .promenade-feed .glass-post::before { transition:none; }
}
@media(forced-colors:active) { .promenade-stage { display:none; } }

/* Atmospheric light, not displacement of the original photograph. Localized
   gradients stay behind the UI and animate only transform/opacity. */
.scene-atmosphere { position:absolute; pointer-events:none; }
.atmosphere-water {
  left:25%; right:22%; top:55%; bottom:8%; overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse, #000 12%, transparent 70%);
  mask-image:radial-gradient(ellipse, #000 12%, transparent 70%);
}
.atmosphere-water::before, .atmosphere-water::after {
  content:""; position:absolute; inset:-15%;
  background:repeating-linear-gradient(178deg,transparent 0 12px,#e7c18c4d 13px,transparent 15px 26px,#a4d9fa26 27px,transparent 30px 43px);
  animation:water-glimmer 9s ease-in-out infinite alternate;
}
.atmosphere-water::after { animation-duration:13s; animation-delay:-5s; background-size:100% 73%; }
.atmosphere-mist {
  left:12%; right:7%; top:30%; height:39%;
  background:radial-gradient(ellipse at 24% 60%,#b2c7dc2b,transparent 48%),radial-gradient(ellipse at 70% 40%,#c8d5e322,transparent 48%);
  animation:mist-drift 26s ease-in-out infinite alternate;
}
.atmosphere-lamplight {
  inset:12% 3% 18%;
  background:radial-gradient(ellipse at 13% 43%,#ffb05833,transparent 12%),radial-gradient(ellipse at 89% 63%,#ffd1902b,transparent 13%),radial-gradient(ellipse at 20% 79%,#ffb96a24,transparent 9%);
  animation:lamplight-breathe 8s ease-in-out infinite alternate;
}
.promenade-scene[data-scene="coastal-afterglow"] .atmosphere-water { left:32%; right:12%; top:33%; bottom:27%; }
.promenade-scene[data-scene="coastal-afterglow"] .atmosphere-mist { top:21%; height:30%; }
.promenade-scene[data-scene="glasshouse-garden"] .atmosphere-water { left:30%; right:27%; top:57%; bottom:3%; }
@keyframes water-glimmer {
  from { transform:translate3d(-12px,-5px,0) scaleX(.96); opacity:.18; }
  to { transform:translate3d(17px,7px,0) scaleX(1.06); opacity:.5; }
}
@keyframes mist-drift {
  from { transform:translate3d(-5%,5px,0); opacity:.35; }
  to { transform:translate3d(5%,-12px,0); opacity:.7; }
}
@keyframes lamplight-breathe { from { opacity:.3; } to { opacity:.75; } }
.promenade-stage.is-paused .scene-atmosphere,
.promenade-stage.is-paused .scene-atmosphere::before,
.promenade-stage.is-paused .scene-atmosphere::after { animation-play-state:paused; }
@media(max-width:760px) { .atmosphere-mist { display:none; } }
@media(prefers-reduced-motion:reduce) { .scene-atmosphere { display:none; } }
