/* OMNIS RP — animated signal paths. Load last.
   Pure CSS background: independent light paths + perspective orbits.
   The original ambient lighting, tilt and interaction intensity are retained. */
:root {
  --om-flow-speed: 26s;
  --om-orbit-speed: 38s;
  --om-photo-speed: 28s;
  --om-glow-strength: 28%;
}
.portal-page, .portal-hero { background: transparent; }
.ambient-background {
  background: radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 62%),
    radial-gradient(ellipse at 93% 78%, color-mix(in srgb, var(--teal) 5%, transparent), transparent 65%);
}
/* Ambient field restored at its original intensity. */
.ambient-background::before {
  content: ''; position: absolute; inset: -15%; pointer-events: none;
  background: radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--teal) 4%, transparent), transparent 50%);
  animation: om-atmosphere 32s ease-in-out infinite alternate;
}
@keyframes om-atmosphere { from { transform: translate3d(-2%, -2%, 0); } to { transform: translate3d(2%, 4%, 0); } }
/* Reuse the existing decorative span; no woven texture or external mask. */
.ambient-weave {
  position: absolute; inset: -20%; display: block; opacity: 1;
  background: none; mask: none; -webkit-mask: none; animation: none; transform: none;
  will-change: auto; pointer-events: none;
}
.ambient-weave::before, .ambient-weave::after {
  content: ''; position: absolute; width: 150%; height: 45%; left: -25%; top: 10%;
  background: linear-gradient(174deg, transparent 42%, color-mix(in srgb, var(--teal) 3%, transparent) 47%,
    color-mix(in srgb, var(--teal) 23%, transparent) 49.8%, color-mix(in srgb, var(--teal) 23%, transparent) 50%,
    color-mix(in srgb, var(--teal) 4%, transparent) 50.4%, transparent 57%);
  mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  animation: om-signal-flow var(--om-flow-speed) ease-in-out infinite alternate;
}
.ambient-weave::after {
  top: 52%; opacity: .65;
  animation-duration: 34s; animation-delay: -12s; animation-direction: alternate-reverse;
}
@keyframes om-signal-flow {
  0% { transform: translate3d(-6%, -14%, 0) rotate(-5deg); }
  50% { transform: translate3d(3%, 12%, 0) rotate(1deg); }
  100% { transform: translate3d(7%, 28%, 0) rotate(5deg); }
}
.ambient-background::after {
  content: ''; position: absolute; width: 120%; height: 90%; left: -10%; top: 18%;
  opacity: .65; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 48%, color-mix(in srgb, var(--teal) 13%, transparent) 48.1%, transparent 48.4%,
    transparent 67%, color-mix(in srgb, var(--teal) 18%, transparent) 67.1%, transparent 67.4%,
    transparent 87%, color-mix(in srgb, var(--teal) 9%, transparent) 87.1%, transparent 87.4%);
  mask: linear-gradient(90deg, #000, transparent 45%, #000);
  -webkit-mask: linear-gradient(90deg, #000, transparent 45%, #000);
  transform-origin: center;
  animation: om-orbits var(--om-orbit-speed) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes om-orbits {
  from { transform: perspective(850px) rotateX(52deg) rotateZ(-15deg) translate3d(-4%, -2%, 0); }
  to { transform: perspective(850px) rotateX(62deg) rotateZ(8deg) translate3d(4%, 8%, 0); }
}
.om-effects-idle .ambient-weave::before, .om-effects-idle .ambient-weave::after { animation-play-state: paused !important; }
.om-effects-static .ambient-weave::before, .om-effects-static .ambient-weave::after { animation: none !important; }
@media (max-width:767px), (prefers-reduced-motion:reduce) {
  .ambient-weave::before, .ambient-weave::after { animation: none !important; }
}

.om-effects-card { position: relative; }
.om-effects-glow, .om-effects-bezel {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 2px; z-index: 2;
  -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;
}
.om-effects-glow {
  opacity: 0;
  background: radial-gradient(180px circle at var(--om-glow-x, 50%) var(--om-glow-y, 50%), var(--teal), transparent 80%);
  transition: opacity .25s ease;
}
@supports not (mask-composite: exclude) {
  .om-effects-glow, .om-effects-bezel { display: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  #app .om-effects-card {
    transform: perspective(1000px) rotateX(var(--om-tilt-x, 0deg)) rotateY(var(--om-tilt-y, 0deg));
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .om-effects-card.om-effects-hover {
    border-color: color-mix(in srgb, var(--teal) 65%, var(--line));
    box-shadow: 0 12px 32px #0002;
  }
  .om-effects-card.om-effects-hover > .om-effects-glow { opacity: .7; }
}
#app .om-effects-card:focus-within { transform: none; transition: none; }
.om-effects-card:focus-within > .om-effects-glow { opacity: .45; }

.om-effects-photo-frame { overflow: hidden; }
.om-effects-photo {
  translate: 0 var(--om-photo-y, 0px);
  scale: 1.045;
}
.om-effects-photo.om-effects-inview {
  animation: om-photo-breathe var(--om-photo-speed) ease-in-out infinite alternate;
}
@keyframes om-photo-breathe { from { scale: 1.045; } to { scale: 1.075; } }
/* Enough vertical overscan for the existing, bounded hero parallax. */
.hero .final-hero-media, .hero-visual .final-hero-media { inset: -48px 0; }

:where(.btn, .header-cta, .final-gallery-controls button, .footer-socials a) {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:where(.btn, .header-cta, .final-gallery-controls button, .footer-socials a):is(:hover, :focus-visible) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 25%, transparent),
    0 5px 22px color-mix(in srgb, var(--teal) var(--om-glow-strength), transparent);
}
:where(.btn, .header-cta, .final-gallery-controls button, .footer-socials a):active { transform: scale(.985); }

.news-stream > .om-effects-bezel {
  padding: 3px;
  background: linear-gradient(125deg, transparent 30%, color-mix(in srgb, var(--teal) 45%, transparent) 48%, transparent 65%);
  background-size: 300% 300%;
  animation: om-bezel-reflection 22s ease-in-out infinite alternate;
}
@keyframes om-bezel-reflection { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.om-effects-idle :is(.om-effects-photo, .om-effects-bezel),
.om-effects-idle .ambient-weave,
.om-effects-idle .ambient-background::before,
.om-effects-idle .ambient-background::after { animation-play-state: paused !important; }

.om-effects-static .ambient-weave,
.om-effects-static .ambient-background::before,
.om-effects-static .ambient-background::after,
.om-effects-static :is(.om-effects-photo, .om-effects-bezel) { animation: none !important; }
.om-effects-static .om-effects-photo { translate: none; scale: 1; }
.om-effects-static .hero .final-hero-media, .om-effects-static .hero-visual .final-hero-media { transform: none; }
.om-effects-static .om-effects-card { transform: none !important; }
.om-effects-static .om-effects-glow { display: none; }

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .ambient-weave, .ambient-background::before, .ambient-background::after,
  .om-effects-photo, .news-stream > .om-effects-bezel { animation: none !important; }
  .om-effects-photo { translate: none; scale: 1; }
  .hero .final-hero-media, .hero-visual .final-hero-media { inset: 0; transform: none; }
  .om-effects-card { transform: none !important; }
  .om-effects-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.btn, .header-cta, .final-gallery-controls button, .footer-socials a) { transition: none; }
  :where(.btn, .header-cta, .final-gallery-controls button, .footer-socials a):active { transform: none; }
}
@media print {
  .om-effects-glow, .om-effects-bezel, .ambient-background { display: none !important; }
  #app, .om-effects-card, .om-effects-photo { opacity: 1 !important; transform: none !important; translate: none !important; scale: 1 !important; animation: none !important; }
}

/* Whitelist steps: the same image / copy / button system as the entry cards. */
.access-page .panel {
  clip-path: none; filter: none; border: 1px solid var(--line);
  border-radius: var(--card-radius); background: var(--panel); box-shadow: none;
}
.access-page .panel::before, .access-page .access-status::after { display: none; }
.access-page .steps { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.access-page .om-step-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 0; overflow: hidden; isolation: isolate; clip-path: none; filter: none;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--card-radius);
  box-shadow: none;
}
.access-page .om-step-card::before, .access-page .om-step-card::after { display: none; }
.om-step-media { display: block; position: relative; overflow: hidden; height: 132px; flex: none; }
.om-step-media img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.om-step-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0b111660, transparent); pointer-events: none; }
.om-step-content { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 20px; }
.access-page .om-step-card > .om-step-content { position: static; z-index: auto; }
.access-page .om-step-card .step-no {
  position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0;
  padding: 6px 10px; border: 1px solid #617580; border-radius: 6px;
  background: #071013e8; color: var(--teal-soft); font: 600 .875rem/1 var(--body);
  width: auto; height: auto; letter-spacing: .04em;
}
.access-page .om-step-card h3 { margin: 0; font: 600 28px/1.12 var(--display); letter-spacing: .005em; text-transform: none; }
.access-page .om-step-card p { margin: 0 0 6px; font-size: .9375rem; line-height: 1.7; color: var(--muted); }
.access-page .om-step-card .step-action {
  margin: auto 0 0; width: 100%; min-height: 44px; padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  clip-path: none; border: 1px solid #5b747e; border-radius: 8px;
  background: transparent; color: var(--paper); font: 600 .875rem/1.4 var(--body);
  letter-spacing: 0; text-transform: none; text-decoration: none;
}
.access-page .om-step-card .step-action::before, .access-page .om-step-card .step-action::after { display: none; }
.access-page .om-step-card .step-action-primary { background: var(--teal); color: #10191d; border-color: var(--teal); }
.access-page .om-step-card .step-action:hover { background: var(--teal-soft); color: #10191d; border-color: var(--teal-soft); }
.access-page .om-step-card .step-action:active { transform: scale(.985); }
@media (max-width:900px) {
  .access-page .steps { grid-template-columns: 1fr; }
  .om-step-media { height: 160px; }
}
@media (prefers-reduced-motion:reduce) {
  .access-page .om-step-card .step-action:active { transform: none; }
}
@media print {
  .om-step-media { display: none; }
  .access-page .om-step-card { background: white; color: black; break-inside: avoid; }
}