/* VIAVR V7: light, depth and movement around the original photographs */
.media-frame {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid #d8b8f32b;
  box-shadow: 0 15px 45px #08040e14, inset 0 1px 0 #fff1ff09;
  transition: border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.media-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 4;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #e1c1fa12 4%, #eddbf77a 24%, #b58add24 40%, #d8be8880 65%, #d3a8ed1f 84%);
  background-size: 240% 180%;
  background-position: 10% 50%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .56;
  transition: opacity .5s;
  animation: frame-light-travel 7s ease-in-out infinite alternate paused;
}
.media-frame > img { border-radius: inherit; }
@supports not (mask-composite: exclude) {
  .media-frame::before { background: none; border: 1px solid #dcc2ed59; padding: 0; }
}
.media-frame:focus-within {
  border-color: #e7c6fb6b;
  box-shadow: 0 20px 65px #160b2738, 0 0 28px #bc87e81c, inset 0 1px 0 #fff1ff15;
}
.media-frame:focus-within::before { opacity: 1; }
.media-frame.experience-running:focus-within::before { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .media-frame:hover {
    border-color: #d8b8f359;
    box-shadow: 0 20px 65px #160b2738, 0 0 35px #c997e816, inset 0 1px 0 #fff1ff15;
  }
  .media-frame:hover::before { opacity: 1; }
  .media-frame.experience-running:hover::before { animation-play-state: running; }
}

.interface-experience {
  --interface-x: 0;
  --interface-y: 0;
  --interface-scroll: 0;
  position: relative;
  isolation: isolate;
  perspective: 1400px;
  padding: clamp(24px, 4vw, 70px) 0;
}
.interface-art-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-inline: auto;
  padding: clamp(10px, 1.45vw, 22px);
  border-radius: clamp(19px, 2.1vw, 34px);
  background: linear-gradient(130deg, #493157ad, #20122eea 54%, #392344a6);
  box-shadow: 0 35px 100px #08031175, inset 0 1px 0 #f0d8ff18;
  transform: translate3d(calc(var(--interface-x) * 5px), calc(var(--interface-y) * 4px + var(--interface-scroll) * -7px), 0) rotateX(calc(var(--interface-y) * -1.3deg)) rotateY(calc(var(--interface-x) * 2deg));
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  transform-origin: 50% 52%;
}
.interface-experience [data-interface-art] {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: inherit;
  filter: none;
  opacity: 1;
}
.interface-ambient {
  position: absolute;
  z-index: -1;
  inset: -7% -3%;
  pointer-events: none;
  opacity: .8;
  transition: opacity .7s;
}
.interface-ambient::before {
  content: '';
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(ellipse at 28% 38%, #a75acd26, transparent 54%), radial-gradient(ellipse at 84% 62%, #ddbc7712, transparent 43%);
  transform: translate(calc(var(--interface-x) * -14px), calc(var(--interface-y) * -10px));
  transition: transform 1s var(--ease);
}
.interface-depth-plane {
  position: absolute;
  left: 4%;
  top: 18%;
  width: 88%;
  height: 67%;
  border: 1px solid #c393e527;
  border-radius: 38px;
  background: linear-gradient(140deg, #80549c0c, #bea1d903 55%, #c0a57407);
  box-shadow: 0 0 45px #6d379910;
  transform: perspective(1400px) rotateX(12deg) rotateZ(-5deg) translate3d(calc(var(--interface-x) * -10px), calc(var(--interface-y) * -8px), 0);
  animation: interface-plane-float 16s ease-in-out infinite alternate paused;
}
.interface-depth-plane--far {
  left: 8%;
  top: 13%;
  width: 84%;
  height: 74%;
  border-color: #d9bd8829;
  transform: perspective(1400px) rotateX(-9deg) rotateZ(6deg) translate3d(calc(var(--interface-x) * -18px), calc(var(--interface-y) * -14px), 0);
  animation-delay: -7s;
  animation-duration: 21s;
}
.interface-focus-orbit {
  position: absolute;
  inset: 0 -2%;
  border: 1px solid #c4a2dc20;
  border-radius: 50%;
  transform: rotate(-13deg) scaleY(.54);
  opacity: .7;
}
.interface-focus-orbit::after {
  content: '';
  position: absolute;
  top: 13%;
  left: 16%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e4c1f1;
  box-shadow: 0 0 20px 4px #c590ed28;
}
.interface-experience.experience-running .interface-depth-plane { animation-play-state: running; }
.interface-experience:focus-within .interface-ambient { opacity: 1; }

#ecosystem, #content-studio { isolation: isolate; }
.spatial-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  opacity: .76;
  contain: paint;
}
.spatial-field::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 4% 45%, #6e387329, transparent 38%), radial-gradient(ellipse at 95% 78%, #5c36782b, transparent 40%);
}
.spatial-field__drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.spatial-field__orbit {
  transform-origin: 50% 50%;
  animation: spatial-precession 32s ease-in-out infinite alternate paused;
}
.spatial-field__orbit--far { animation-delay: -15s; animation-duration: 41s; }
.spatial-field__line {
  stroke-dasharray: 3 12;
  animation: spatial-trace 38s linear infinite paused;
}
.spatial-field__nodes {
  animation: spatial-node-breathe 9s ease-in-out infinite alternate paused;
}
.spatial-field__plane {
  position: absolute;
  width: 54%;
  height: 30%;
  top: 31%;
  left: -16%;
  border: 1px solid #c49ee92b;
  border-radius: 28px;
  background: linear-gradient(145deg, #9463bc0c, transparent 62%);
  transform: perspective(1000px) rotateY(24deg) rotateX(52deg) rotateZ(-24deg);
  box-shadow: 0 0 50px #9863bc08;
  animation: spatial-plane-drift 23s ease-in-out infinite alternate paused;
}
.spatial-field__plane--far {
  top: 65%;
  left: 71%;
  width: 40%;
  height: 19%;
  border-color: #d9c28c1d;
  transform: perspective(1000px) rotateY(-24deg) rotateX(44deg) rotateZ(22deg);
  animation-delay: -11s;
  animation-duration: 30s;
}
.spatial-field.experience-running .spatial-field__orbit,
.spatial-field.experience-running .spatial-field__line,
.spatial-field.experience-running .spatial-field__nodes,
.spatial-field.experience-running .spatial-field__plane { animation-play-state: running; }

.journey-nav {
  --journey-reserve: 185px;
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 27;
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: min(780px, calc(100vw - var(--journey-reserve) * 2 - 36px));
  padding: 6px;
  border: 1px solid #dabaf134;
  border-radius: 999px;
  color: #d9c4e9;
  background: linear-gradient(115deg, #34213bee, #21132fed 68%, #2c2032ed);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 48px #05020c75, inset 0 1px 0 #fff1ff0c;
  transform: translate(-50%, 0);
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #ae8cbc48 transparent;
  -webkit-overflow-scrolling: touch;
}
.journey-nav.is-enhanced:not(.is-visible),
.journey-nav.is-dock-open,
.menu-open .journey-nav,
.modal-open .journey-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 24px);
}
.journey-nav a {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  color: #baa3ca;
  transition: color .3s, background .3s, border-color .3s;
}
.journey-nav a:hover, .journey-nav a:focus-visible { color: #f5e8fc; background: #ddbded12; }
.journey-nav a:focus-visible { outline: 2px solid #e6c6f4; outline-offset: -3px; }
.journey-nav a.is-active {
  color: #f7ecff;
  background: linear-gradient(125deg, #d3abe827, #b3926c18);
  border-color: #d9b9ea2d;
  box-shadow: inset 0 1px 0 #f1dcff12;
}

@keyframes frame-light-travel { to { background-position: 95% 50%; } }
@keyframes interface-plane-float { from { translate: 0 -5px; } to { translate: 0 8px; } }
@keyframes spatial-precession { from { rotate: -3deg; } to { rotate: 4deg; } }
@keyframes spatial-trace { to { stroke-dashoffset: -150; } }
@keyframes spatial-node-breathe { from { opacity: .35; } to { opacity: .8; } }
@keyframes spatial-plane-drift { from { translate: 0 -12px; } to { translate: 9px 15px; } }

html.experience-hidden .media-frame::before,
html.experience-hidden .interface-depth-plane,
html.experience-hidden .spatial-field *,
html.experience-economy .media-frame::before,
html.experience-economy .interface-depth-plane,
html.experience-economy .spatial-field * { animation-play-state: paused !important; }

@media (max-width: 1000px) {
  .journey-nav {
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 30px);
  }
  .journey-nav a { min-height: 40px; padding-inline: 14px; }
}
@media (max-width: 600px) {
  .interface-experience { padding-block: 32px; perspective: none; }
  .interface-art-wrap { padding: 8px; border-radius: 17px; transform: none; }
  .interface-depth-plane { border-radius: 22px; }
  .interface-depth-plane--far { opacity: .6; }
  .interface-focus-orbit { inset: 0 -1%; }
  .spatial-field { opacity: .62; }
  .spatial-field__plane { width: 85%; left: -38%; }
  .spatial-field__plane--far { width: 67%; left: 72%; }
  .journey-nav { border-radius: 25px; padding: 5px; gap: 1px; }
  .journey-nav a { font-size: 10px; min-height: 42px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .media-frame, .media-frame::before,
  .interface-art-wrap, .interface-ambient, .interface-ambient::before,
  .interface-depth-plane, .spatial-field *, .journey-nav, .journey-nav a {
    animation: none !important;
    transition: none !important;
  }
  .interface-art-wrap { transform: none; }
  .interface-ambient::before { transform: none; }
}