/* The approved dark entrance, followed by a reveal of the real ivory page.
   Load last. Enter sets html.arrival-transitioning + .arrival.is-departing;
   the dialog closes and both classes are cleared after 1800ms. */
@property --arrival-aperture {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0px;
}

html.arrival-pending,
html.arrival-pending body { background:#030c19!important; }
html.arrival-pending body > header,
html.arrival-pending body > main,
html.arrival-pending body > footer { visibility:hidden; }
html.arrival-pending,
html.arrival-open,
html.arrival-transitioning { overflow:hidden; }

#arrival.arrival {
  --accent:#9be6f3;
  --lavender:#b5aff4;
  background:#030c19!important;
  color:#edf6fc!important;
  color-scheme:dark;
  border:0!important;
  box-shadow:none!important;
  outline:none;
}
#arrival.arrival::backdrop { background:#030c19!important; }
#arrival .arrival-shell { background:transparent; border:0; box-shadow:none; }
#arrival .arrival-cinematic {
  background:#030c19!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}
#arrival .arrival-cinematic video {
  mix-blend-mode:normal!important;
  filter:brightness(.95) saturate(.56) hue-rotate(-8deg)!important;
}
#arrival.film-ready .arrival-cinematic { opacity:.27!important; }
#arrival #arrival-canvas {
  z-index:-3;
  filter:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}
#arrival .arrival-atmosphere {
  z-index:-2;
  background:
    radial-gradient(ellipse at 50% 48%,#030c19e8 0%,#030c19b8 22%,#030c1929 46%,transparent 68%),
    linear-gradient(0deg,#030c1970,transparent 18%,transparent 82%,#030c1990)!important;
  mix-blend-mode:normal!important;
}
#arrival .arrival-atmosphere::before {
  background:radial-gradient(ellipse at var(--field-focus-x,50%) var(--field-focus-y,48%),#3093c612 0%,transparent 58%)!important;
}
#arrival .arrival-atmosphere::after { border:0!important; box-shadow:none!important; }
#arrival .arrival-cinematic::after {
  background:radial-gradient(ellipse at 50% 48%,#8de5ff28 0%,transparent 66%)!important;
}

/* These scoped !important rules win over both global light-theme logo rules
   and white-entrance.css without changing the homepage branding. */
#arrival .arrival-brand {
  background:transparent!important;
  mix-blend-mode:screen!important;
  opacity:.96;
}
#arrival .arrival-brand .logo-dark { display:block!important; mix-blend-mode:screen!important; }
#arrival .arrival-brand .logo-light { display:none!important; }
#arrival .arrival-brand .logo-wordmark { filter:brightness(3.5)!important; }
#arrival .arrival-system { color:#96bacb!important; }
#arrival .arrival-system > span { color:#6f91a5!important; }
#arrival .arrival-eyebrow { color:#9ab9cd!important; }
#arrival .arrival-eyebrow i { color:#4b8198!important; }
#arrival #arrival-title {
  color:#f1f6fb!important;
  text-shadow:0 2px 32px #030c19d9!important;
}
#arrival #arrival-title em {
  color:#a3dfee!important;
  background:none!important;
  -webkit-text-fill-color:#a3dfee!important;
  text-shadow:0 2px 30px #030c19a8!important;
}
#arrival .arrival-enter {
  background:linear-gradient(115deg,#10374ac9,#0a2138c4)!important;
  color:#e3f4fb!important;
  border:1px solid #8ad9ec73!important;
  border-radius:999px;
  box-shadow:inset 0 1px #c2efff12,0 7px 35px #00111e52!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#arrival .arrival-enter::before,
#arrival .arrival-enter::after { content:none!important; }
#arrival .arrival-enter:hover {
  background:linear-gradient(115deg,#174b60e6,#102f49e6)!important;
  border-color:#b2eaff!important;
  box-shadow:inset 0 1px #c2efff1a,0 0 35px #5ccbea1c!important;
}
#arrival .arrival-arrow { color:#b6eaff!important; }
#arrival .arrival-enter:focus-visible { outline:2px solid #c3f2ff; outline-offset:6px; }
#arrival .arrival-tools,
#arrival-skip,
#arrival-pause { display:none!important; }

/* Keep the background truly transparent while the aperture opens; an opaque
   top-layer backdrop would otherwise hide the actual homepage underneath. */
html.arrival-transitioning #arrival::backdrop { background:transparent!important; }
html.arrival-transitioning #arrival.is-departing {
  --arrival-aperture:0px;
  pointer-events:none;
  transform:none!important;
  filter:none!important;
  animation:dark-arrival-aperture 1800ms cubic-bezier(.38,.03,.23,1) both,
    dark-arrival-opacity 1800ms linear both!important;
  will-change:opacity,mask-image;
}
@supports ((mask-image:radial-gradient(circle,transparent,#000)) or (-webkit-mask-image:radial-gradient(circle,transparent,#000))) {
  html.arrival-transitioning #arrival.is-departing {
    -webkit-mask-image:radial-gradient(circle at 50% 48%,transparent 0 var(--arrival-aperture),#000 calc(var(--arrival-aperture) + 80px));
    mask-image:radial-gradient(circle at 50% 48%,transparent 0 var(--arrival-aperture),#000 calc(var(--arrival-aperture) + 80px));
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    mask-mode:alpha;
  }
}
html.arrival-transitioning #arrival.is-departing .arrival-content {
  animation:dark-arrival-type-leave 480ms cubic-bezier(.3,0,.6,1) both!important;
}
html.arrival-transitioning #arrival.is-departing .arrival-top {
  animation:dark-arrival-top-leave 430ms ease-in both!important;
}
#arrival.film-entering .arrival-cinematic { opacity:.36!important; transition:opacity 600ms ease-in; }
#arrival.film-entering .arrival-cinematic::after { animation:none!important; opacity:0!important; }
#arrival.film-entering .arrival-atmosphere::before { animation:dark-arrival-entry-light 950ms ease-in both!important; }

/* The content is already behind the dialog. Only the handoff gives it a small
   settling movement; removing the class leaves the normal final styles. */
html.arrival-transitioning body > .header {
  animation:dark-arrival-header-in 1050ms 550ms cubic-bezier(.2,.65,.2,1) both;
  will-change:opacity,transform,filter;
}
html.arrival-transitioning .white-hero-content,
html.arrival-transitioning .white-hero-copy,
html.arrival-transitioning .white-hero .hero-content {
  animation:dark-arrival-home-in 1200ms 400ms cubic-bezier(.2,.65,.2,1) both;
  will-change:opacity,transform,filter;
}
html.arrival-transitioning .white-hero-visual {
  animation:dark-arrival-visual-in 1250ms 350ms cubic-bezier(.2,.65,.2,1) both;
  will-change:opacity,transform,filter;
}

@keyframes dark-arrival-aperture {
  0%,27% { --arrival-aperture:0px; }
  100% { --arrival-aperture:125vmax; }
}
/* Also acts as a smooth fallback when @property or masks are unsupported. */
@keyframes dark-arrival-opacity {
  0%,56% { opacity:1; }
  100% { opacity:0; }
}
@keyframes dark-arrival-type-leave {
  from { opacity:1; transform:none; filter:blur(0); }
  to { opacity:0; transform:translateY(-7px) scale(1.02); filter:blur(5px); }
}
@keyframes dark-arrival-top-leave { to { opacity:0; transform:translateY(-5px); } }
@keyframes dark-arrival-entry-light { 0% { opacity:.3; } 65% { opacity:.7; } 100% { opacity:.15; } }
@keyframes dark-arrival-home-in {
  from { opacity:.3; transform:translateY(20px); filter:blur(5px); }
  to { opacity:1; transform:none; filter:blur(0); }
}
@keyframes dark-arrival-visual-in {
  from { opacity:.35; transform:translateY(15px) scale(1.025); filter:blur(6px); }
  to { opacity:1; transform:none; filter:blur(0); }
}
@keyframes dark-arrival-header-in {
  from { opacity:.45; transform:translateY(-8px); filter:blur(3px); }
  to { opacity:1; transform:none; filter:blur(0); }
}

@media(max-width:700px) {
  #arrival.film-ready .arrival-cinematic { opacity:.19!important; }
  #arrival .arrival-atmosphere {
    background:radial-gradient(ellipse at 50% 48%,#030c19ed 0%,#030c19bf 25%,#030c1929 54%,transparent 78%)!important;
  }
  #arrival.film-entering .arrival-cinematic { opacity:.3!important; }
}
@media(prefers-reduced-motion:reduce) {
  #arrival,
  #arrival *,
  #arrival *::before,
  #arrival *::after,
  html.arrival-transitioning body > .header,
  html.arrival-transitioning .white-hero-content,
  html.arrival-transitioning .white-hero-copy,
  html.arrival-transitioning .white-hero .hero-content,
  html.arrival-transitioning .white-hero-visual {
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
  }
  #arrival { -webkit-mask-image:none!important; mask-image:none!important; }
  #arrival .arrival-atmosphere::before { display:none!important; }
}
html.motion-paused #arrival,
html.motion-paused #arrival *,
html.motion-paused #arrival *::before,
html.motion-paused #arrival *::after,
html.motion-paused.arrival-transitioning body > .header,
html.motion-paused.arrival-transitioning .white-hero-content,
html.motion-paused.arrival-transitioning .white-hero-copy,
html.motion-paused.arrival-transitioning .white-hero .hero-content,
html.motion-paused.arrival-transitioning .white-hero-visual {
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
}
html.motion-paused #arrival { -webkit-mask-image:none!important; mask-image:none!important; }
