/* Meet & Greet — motion is optional; every component is visible without JS. */
.aurora-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background: var(--mg-gradient-field);
}

/* Keep the bright field behind the photographs, with a dark reading area. */
.aurora-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #160F3E 0%, #160F3EEB 31%, #160F3E40 60%, transparent 82%);
}
.inner-hero .aurora-layer {
  opacity: .7;
  mask-image: linear-gradient(90deg, transparent 68%, #000 100%);
}

.home-hero .motion-toggle { background: #160F3EEB; border-color: #FFFFFF65; }
.home-hero .composition-label { background: #160F3EEB; color: #FFFFFF; padding: 5px 8px; border-radius: 5px; }

@media (max-width: 800px) {
  .home-hero .aurora-layer {
    background: radial-gradient(ellipse at 85% 68%, #DFDF00 0%, #00B88C 17%, transparent 40%), linear-gradient(160deg, #080322 0%, #160F3E 40%, #007CB9 69%, #00B7CA 100%);
  }
  .home-hero .aurora-layer::after {
    background: linear-gradient(180deg, #160F3E 0%, #160F3EF5 43%, #160F3E90 58%, transparent 77%);
  }
  .home-hero .aurora-one { top: 40%; right: -18%; width: 100%; height: 50%; }
  .home-hero .aurora-two { bottom: -25%; width: 125%; height: 80%; }
}

.aurora-layer > :is(.aurora-one, .aurora-two, .aurora-three) {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation-play-state: paused;
  filter: blur(24px);
}

.aurora-one {
  width: 55%;
  height: 80%;
  inset: auto;
  right: -3%;
  top: -34%;
  background: radial-gradient(ellipse at center, #DFDF00 0%, #93CE20 20%, transparent 67%);
  opacity: .95;
  animation: mg-aurora-one 23s ease-in-out infinite alternate paused;
}

.aurora-two {
  width: 75%;
  height: 115%;
  inset: auto;
  right: -25%;
  bottom: -43%;
  background: radial-gradient(ellipse at center, #00C7D3 0%, #00B88C 20%, transparent 69%);
  opacity: .9;
  animation: mg-aurora-two 29s ease-in-out infinite alternate paused;
}

.aurora-three {
  width: 65%;
  height: 90%;
  inset: auto;
  left: 28%;
  bottom: -47%;
  background: radial-gradient(ellipse at center, #007CC3 0%, transparent 70%);
  opacity: .8;
  animation: mg-aurora-three 19s ease-in-out infinite alternate paused;
}

.gradient-text {
  color: var(--mg-gradient-pink);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: var(--mg-gradient-type);
    background-size: 240% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: mg-gradient-wash 13s ease-in-out infinite alternate paused;
  }
}

.brand-marquee {
  overflow: hidden;
}

.brand-marquee > .marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: mg-marquee 34s linear infinite paused;
}

.marquee-track > span {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  min-width: max(100vw, 960px);
  padding: 0;
  white-space: nowrap;
}

.hero-photo-float {
  animation: mg-photo-float 10s ease-in-out infinite paused;
}

html[data-motion="running"] :is(.aurora-one, .aurora-two, .aurora-three, .gradient-text, .hero-photo-float),
html[data-motion="running"] .brand-marquee > .marquee-track {
  animation-play-state: running;
}

html[data-motion="paused"] :is(.aurora-one, .aurora-two, .aurora-three, .gradient-text, .hero-photo-float),
html[data-motion="paused"] .brand-marquee > .marquee-track {
  animation-play-state: paused;
}

/* One entrance for the hero; ordinary sections never wait for a reveal. */
html[data-motion-intro="true"] .hero-message h1 {
  animation: mg-title-in 900ms cubic-bezier(.2, .7, .2, 1) both;
}

html[data-motion-intro="true"] .hero-photo-composition {
  animation: mg-photo-in 1100ms 100ms cubic-bezier(.2, .7, .2, 1) both;
}

[data-motion-toggle][hidden] {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.event-tile, .event-identity) {
    transition: transform 400ms cubic-bezier(.2, .7, .2, 1);
    transform-origin: center;
  }

  html[data-motion="running"] :is(.event-tile, .event-identity):hover {
    transform: perspective(1100px) rotateX(1deg) rotateY(-1.5deg) translateY(-3px);
  }

  /* If an identity is inside a photo card, only the outer card tilts. */
  html[data-motion="running"] .event-tile:hover .event-identity {
    transform: none;
  }

  html[data-motion="paused"] :is(.event-tile, .event-identity) {
    transition: none;
  }
}

/* Before JS runs, the operating-system preference takes priority.
   A visitor can explicitly choose to activate motion for this page. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="running"]) :is(.aurora-one, .aurora-two, .aurora-three, .gradient-text, .hero-photo-float, .hero-message h1, .hero-photo-composition),
  html:not([data-motion="running"]) .brand-marquee > .marquee-track {
    animation: none;
  }

  html:not([data-motion="running"]) :is(.event-tile, .event-identity) {
    transform: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

@keyframes mg-aurora-one {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to { transform: translate3d(24%, 18%, 0) scale(1.16); }
}

@keyframes mg-aurora-two {
  from { transform: translate3d(5%, 4%, 0) scale(1.1); }
  to { transform: translate3d(-25%, -18%, 0) scale(.9); }
}

@keyframes mg-aurora-three {
  from { transform: translate3d(-6%, 0, 0) scale(.93); }
  to { transform: translate3d(14%, -22%, 0) scale(1.2); }
}

@keyframes mg-gradient-wash {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes mg-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mg-photo-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes mg-title-in {
  from { opacity: .65; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes mg-photo-in {
  from { opacity: .6; translate: 0 23px; }
  to { opacity: 1; translate: 0 0; }
}