/* Expressive movement stays on the navigation and small glass surfaces. */
.luma-motion-ready .luma-nav-lens {
  transition: none !important;
  transform-origin: center;
  background: linear-gradient(
    135deg,
    #ffffffee 0%,
    #ffffff78 42%,
    #ffffffbd 68%,
    #e2f2ff91 100%
  );
  backdrop-filter: blur(5px) saturate(190%);
  -webkit-backdrop-filter: blur(5px) saturate(190%);
  box-shadow:
    0 5px 14px #427caa25,
    inset 0 1px 0 #ffffffbb;
  border-color: #fff;
}
.luma-nav-lens:before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid #ffffff40;
  pointer-events: none;
}
.luma-nav-lens:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 5%,
    #ffffffaa 25%,
    transparent 51%,
    #93d1fd40 79%,
    transparent
  );
  opacity: calc(0.28 + var(--lens-energy, 0) * 0.65);
}
.luma-lens-hover .luma-nav-lens {
  box-shadow:
    0 6px 18px #427caa32,
    inset 0 1px 1px #ffffffcc;
}
.luma-navigation a {
  position: relative;
  transition:
    color 0.25s,
    scale 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.luma-navigation a:hover {
  background: transparent !important;
  box-shadow: none !important;
  scale: 1.07;
}
.luma-motion-ready .luma-brand,
.luma-motion-ready .luma-nav-actions {
  transition:
    translate 0.8s cubic-bezier(0.2, 1, 0.25, 1),
    box-shadow 0.4s,
    background 0.4s;
  translate: 0 0;
}
.luma-motion-ready .luma-header.is-docked .luma-brand {
  translate: var(--dock-brand-x, 0px) 0;
  background: rgba(249, 253, 255, 0.8);
}
.luma-motion-ready .luma-header.is-docked .luma-nav-actions {
  translate: var(--dock-actions-x, 0px) 0;
  background: rgba(249, 253, 255, 0.8);
}
.luma-header.is-docked .luma-navigation {
  background: rgba(249, 253, 255, 0.8);
  box-shadow:
    0 10px 28px #36577322,
    inset 0 1px 0 #fff;
}
.luma-personal-card {
  transform: perspective(900px) rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg));
  transform-origin: center;
  transform-style: preserve-3d;
}
.luma-personal-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--card-light-x, 35%) var(--card-light-y, 15%),
    rgba(255, 255, 255, 0.6),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.5s;
}
.luma-personal-card.luma-tilting:after {
  opacity: 1;
}
.luma-personal-avatar {
  transition:
    translate 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s;
}
.luma-tilting .luma-personal-avatar {
  translate: 0 -4px;
  box-shadow:
    0 15px 28px #416c8c2b,
    inset 0 1px 1px #fff;
}
.luma-motion-ready .luma-moment-card {
  position: relative;
}
.luma-moment-card.luma-card-arriving:after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(
      120deg,
      transparent 10%,
      #fff 40%,
      #a0dbff99 50%,
      transparent 72%
    )
    border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: luma-card-glint 1.4s ease-out both;
}
@keyframes luma-card-glint {
  0% {
    opacity: 0;
    background-position: -300px 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 300px 0;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}
.luma-like-burst {
  position: fixed;
  width: 1px;
  height: 1px;
  z-index: 1500;
  pointer-events: none;
}
.luma-like-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e7799b;
  pointer-events: none;
}
.luma-like-burst i:nth-child(2n) {
  width: 4px;
  height: 8px;
  border-radius: 3px;
  background: #9abbd4;
}
.dark .luma-motion-ready .luma-nav-lens {
  background: linear-gradient(135deg, #c0deff40, #c0deff15 48%, #bde6ff28);
  border-color: #dcecff50;
  box-shadow:
    0 5px 18px #020e2633,
    inset 0 1px 2px #ffffff70,
    inset 0 -1px 2px #a3dbff40;
}
.dark
  .luma-motion-ready
  .luma-header.is-docked
  :is(.luma-brand, .luma-nav-actions, .luma-navigation) {
  background: rgba(35, 53, 72, 0.9);
}
.dark .luma-personal-card:after {
  background: radial-gradient(
    220px circle at var(--card-light-x, 35%) var(--card-light-y, 15%),
    rgba(168, 211, 245, 0.15),
    transparent 72%
  );
}
@media (prefers-reduced-motion: reduce) {
  .luma-motion-ready .luma-brand,
  .luma-motion-ready .luma-nav-actions {
    translate: none !important;
  }
  .luma-personal-card {
    transform: none !important;
  }
  .luma-navigation a:hover {
    scale: none;
  }
  .luma-personal-card:after,
  .luma-card-arriving:after {
    display: none;
  }
  .luma-like-burst {
    display: none;
  }
}
/* The color reveal is visual only; links underneath stay interactive. */
::view-transition,
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) {
  pointer-events: none;
}
/* Responsive layout changes snap to their new baseline; scroll docking still springs. */
.luma-motion-ready .luma-header.luma-dock-resizing .luma-brand,
.luma-motion-ready .luma-header.luma-dock-resizing .luma-nav-actions {
  transition: none !important;
}