:root { --fw-entry-ready: 1; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

.fw-entry-leaving .landing-enter {
  view-transition-name: fw-entry-gate;
}

.fw-entry-leaving .landing-enter-ring {
  animation: fw-entry-ignite 480ms cubic-bezier(.2, .8, .2, 1) both;
}

.fw-entry-leaving .landing-enter-core {
  border-color: #ffce8b;
  box-shadow: inset 0 0 24px #ffb55025, 0 0 75px #ff8a2440;
}

.fw-entry-arriving { background: #08090b; }
.fw-entry-arriving .auth-brand-emblem { view-transition-name: fw-entry-gate; }
.fw-entry-arriving :is(.auth-shell, .auth-decode-layer) { animation: fw-entry-reveal 600ms cubic-bezier(.2, .8, .2, 1) both; }
.fw-entry-native :is(.auth-shell, .auth-decode-layer) { animation: none; }

.fw-entry-native::view-transition { pointer-events: none; }
.fw-entry-native::view-transition-group(*) {
  animation-duration: 680ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

.fw-entry-native::view-transition-old(root) {
  animation: fw-entry-dissolve 520ms ease-in both;
}

.fw-entry-native::view-transition-new(root) {
  animation: fw-entry-reveal 680ms cubic-bezier(.2, .8, .2, 1) both;
}

.fw-entry-native::view-transition-old(fw-entry-gate) {
  animation: fw-entry-gate-out 400ms ease-out both;
}

.fw-entry-native::view-transition-new(fw-entry-gate) {
  animation: fw-entry-gate-in 680ms cubic-bezier(.2, .8, .2, 1) both;
}

.fw-entry-native::view-transition-image-pair(fw-entry-gate) { isolation: isolate; }
.fw-entry-native::view-transition-old(fw-entry-gate),
.fw-entry-native::view-transition-new(fw-entry-gate) { mix-blend-mode: normal; }

@keyframes fw-entry-ignite {
  from { transform: rotate(-36deg) scale(1); opacity: 1; }
  to { transform: rotate(42deg) scale(1.3); opacity: .1; border-color: #ffca87; }
}

@keyframes fw-entry-dissolve {
  to { opacity: 0; filter: blur(6px); transform: scale(1.025); }
}

@keyframes fw-entry-reveal {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes fw-entry-gate-out {
  to { opacity: 0; filter: blur(4px); }
}

@keyframes fw-entry-gate-in {
  0%, 12% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fw-entry-fade-out { to { opacity: 0; } }
@keyframes fw-entry-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px), (pointer: coarse) {
  .fw-entry-arriving :is(.auth-shell, .auth-decode-layer) { animation: fw-entry-fade-in 360ms ease-out both; }
  .fw-entry-native :is(.auth-shell, .auth-decode-layer) { animation: none; }
  .fw-entry-native::view-transition-group(*) { animation-duration: 420ms; }
  .fw-entry-native::view-transition-old(root) { animation: fw-entry-fade-out 180ms ease-out both; }
  .fw-entry-native::view-transition-new(root) { animation: fw-entry-fade-in 320ms 90ms ease-out both; }
  .fw-entry-native::view-transition-old(fw-entry-gate) { animation: fw-entry-fade-out 300ms ease-out both; }
  .fw-entry-native::view-transition-new(fw-entry-gate) { animation: fw-entry-fade-in 420ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-entry-arriving :is(.auth-shell, .auth-decode-layer),
  .fw-entry-leaving .landing-enter-ring { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }
}