/* Bright technology finish for public/auth screens and usage-log model badges. */
body:has(img[src="/rose-home-hero-v1.webp"]):not(:has(.rose-home-hero)) #root > div {
  background: linear-gradient(135deg, #f8fdff, #eff8ff 48%, #f5f3ff) !important;
}

body:has(img[src="/rose-home-hero-v1.webp"]):not(:has(.rose-home-hero)) #root > div::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(14 165 233 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(14 165 233 / 6%) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  mask-image: linear-gradient(110deg, black, transparent 78%);
  pointer-events: none;
}

body:has(img[src="/rose-home-hero-v1.webp"]):not(:has(.rose-home-hero))
  img[src="/rose-home-hero-v1.webp"] {
  display: none !important;
}

.rose-home-hero {
  isolation: isolate;
  color: #f7fbff;
  background-color: #050c1b !important;
  background-image:
    linear-gradient(
      90deg,
      rgb(3 10 25 / 97%) 0%,
      rgb(4 13 32 / 89%) 35%,
      rgb(5 15 35 / 34%) 61%,
      rgb(5 15 35 / 6%) 100%
    ),
    url("/assets/cyber-city-20261020-hero.webp") !important;
  background-position:
    center,
    58% 48%;
  background-size: cover, cover;
}

.rose-home-hero > [aria-hidden][class*="bg-gradient-to-r"] {
  background: none !important;
}

.rose-home-hero::before,
.rose-home-hero::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.rose-home-hero::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgb(47 225 255 / 21%), transparent 38%),
    conic-gradient(
      from 30deg at 79% 32%,
      transparent 0 19%,
      rgb(57 232 255 / 11%) 20%,
      transparent 23% 54%,
      rgb(128 106 255 / 13%) 56%,
      transparent 59%
    );
  mask-image: linear-gradient(90deg, transparent 25%, black 65%);
}

.rose-home-hero::after {
  right: -35%;
  bottom: -7%;
  left: -35%;
  height: 48%;
  border-top: 1px solid rgb(85 238 255 / 35%);
  background-image:
    linear-gradient(rgb(80 224 255 / 24%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(80 224 255 / 24%) 1px, transparent 1px);
  background-size: 64px 52px;
  mask-image: linear-gradient(transparent, black 45%, transparent);
  opacity: 0.55;
  transform: perspective(460px) rotateX(54deg);
  transform-origin: bottom;
}

.rose-home-tech-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.rose-home-tech-fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.rose-home-hero-art {
  display: none !important;
}

.rose-home-hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  background-image:
    linear-gradient(rgb(80 220 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(80 220 255 / 7%) 1px, transparent 1px),
    radial-gradient(circle at 75% 28%, rgb(34 211 238 / 24%), transparent 33%),
    linear-gradient(115deg, transparent 35%, rgb(34 211 238 / 7%) 50%, transparent 68%) !important;
  background-size:
    42px 42px,
    42px 42px,
    100% 100%,
    100% 100% !important;
  opacity: 1 !important;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 21%, rgb(0 0 0 / 32%) 40%, black 61%);
}

.rose-home-hero-sparkles::before,
.rose-home-hero-sparkles::after {
  position: absolute;
  top: 1%;
  right: -5%;
  width: min(47rem, 61vw);
  aspect-ratio: 1;
  border: 2px solid rgb(79 226 255 / 58%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 31px,
      rgb(56 220 255 / 26%) 32px 33px,
      transparent 34px 72px
    ),
    conic-gradient(
      from 24deg,
      transparent 0 18%,
      rgb(126 249 255 / 94%) 18.4% 18.8%,
      transparent 19.1% 42%,
      rgb(184 145 255 / 92%) 42.4% 42.8%,
      transparent 43.1% 71%,
      rgb(126 249 255 / 85%) 71.4% 71.8%,
      transparent 72.1%
    );
  box-shadow:
    inset 0 0 70px rgb(34 211 238 / 21%),
    0 0 26px rgb(14 215 253 / 44%),
    0 0 110px rgb(99 102 241 / 26%);
  opacity: 0.9;
  transform: rotate(-8deg);
  animation: bright-tech-orbit 24s linear infinite;
  content: "";
}

.rose-home-hero-sparkles::after {
  top: 7%;
  right: 0;
  width: min(34rem, 43vw);
  border: 2px dashed rgb(183 157 255 / 64%);
  background:
    conic-gradient(
      from 18deg,
      transparent 0 23%,
      rgb(167 139 250 / 20%) 24%,
      transparent 26% 72%,
      rgb(94 234 255 / 21%) 74%,
      transparent 76%
    ),
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 42px,
      rgb(181 119 255 / 26%) 43px 44px,
      transparent 45px 88px
    );
  box-shadow:
    inset 0 0 55px rgb(167 139 250 / 18%),
    0 0 36px rgb(139 92 246 / 22%);
  animation-direction: reverse;
  animation-duration: 18s;
  animation-delay: -4s;
}

.rose-home-hero-sparkles::before {
  top: 1%;
  right: -5%;
  width: min(47rem, 61vw);
  border-radius: 50%;
}

.rose-home-hero > .mx-auto {
  position: relative;
  z-index: 1;
}

.rose-home-hero h1 {
  color: #f8fbff;
  text-shadow: 0 2px 18px rgb(4 12 31 / 75%);
}

.rose-home-hero h1 > span {
  background-image: linear-gradient(105deg, #8df8ff 5%, #69c6ff 35%, #b69cff 67%, #f0c6ff 90%);
  background-size: 200% 100%;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgb(88 166 255 / 25%));
}

/* Preserve readable labels in both header implementations and hover states. */
header.pointer-events-none nav a:not(.header-guide-link):not([href="/sign-in"]),
.rose-app-header nav a:not(.header-guide-link) {
  color: #2d405d;
  font-weight: 600;
}

.dark header.pointer-events-none nav a:not(.header-guide-link):not([href="/sign-in"]),
.dark .rose-app-header nav a:not(.header-guide-link) {
  color: #e1ecfb;
}

.rose-app-header nav a:not(.header-guide-link):hover,
.rose-app-header nav a:not(.header-guide-link):focus-visible {
  color: #03618b;
}

.dark .rose-app-header nav a:not(.header-guide-link):hover,
.dark .rose-app-header nav a:not(.header-guide-link):focus-visible {
  color: #86f1ff;
}

body:has(.rose-home-hero) header nav {
  color: #f4faff;
  background: linear-gradient(115deg, rgb(5 17 37 / 96%), rgb(9 28 52 / 94%));
  border: 1px solid rgb(105 219 255 / 42%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    0 12px 36px rgb(0 0 0 / 30%),
    0 0 24px rgb(34 211 238 / 13%);
  backdrop-filter: blur(18px);
}

body:has(.rose-home-hero) header nav:not([class*="bg-background/60"]) {
  height: 56px;
  margin-top: 5px;
  border: 1px solid rgb(112 219 255 / 30%);
  border-radius: 14px;
  padding-inline: 16px;
}

body:has(.rose-home-hero) header nav a:not(.header-guide-link):not([href="/sign-in"]),
body:has(.rose-home-hero) header nav button:not(.header-guide-link) {
  color: #edf7ff !important;
  font-weight: 600;
}

body:has(.rose-home-hero) header nav a[href="/pricing"]:not(.header-guide-link) {
  color: #91f2ff !important;
}

body:has(.rose-home-hero) header nav a[href^="https://status."]:not(.header-guide-link) {
  color: #d5c4ff !important;
}

body:has(.rose-home-hero) header nav a:not([href="/sign-in"]):hover,
body:has(.rose-home-hero) header nav button:hover {
  color: #fff !important;
  background-color: #183c60 !important;
  background-image: none !important;
  box-shadow:
    inset 0 0 0 1px rgb(98 225 255 / 35%),
    0 0 18px rgb(34 211 238 / 12%);
}

body:has(.rose-home-hero) header nav .header-guide-tutorial {
  color: #0a4e85 !important;
}

body:has(.rose-home-hero) header nav .header-guide-support {
  color: #9a244c !important;
}

.dark body:has(.rose-home-hero) header nav .header-guide-tutorial {
  color: #b8e8ff !important;
}

.dark body:has(.rose-home-hero) header nav .header-guide-support {
  color: #ffd0e0 !important;
}

body:has(.rose-home-hero) header nav .header-guide-link:hover {
  color: #fff !important;
}

header nav a:focus-visible,
header nav button:focus-visible {
  outline: 2px solid #21b8e4;
  outline-offset: 3px;
}

body:has(.rose-home-hero) div.fixed.inset-0.z-40 nav a:not(.header-mobile-guide) {
  color: #293f60;
  font-weight: 600;
}

.dark body:has(.rose-home-hero) div.fixed.inset-0.z-40 nav a:not(.header-mobile-guide) {
  color: #e2edff;
}

/* Reserve the right side for the illustration, without the API demo overlay. */
.rose-home-hero > .mx-auto > .landing-animate-fade-up:last-child {
  display: none !important;
}

.rose-home-hero .text-muted-foreground,
.rose-home-hero .text-muted-foreground\/80,
.rose-home-hero .text-muted-foreground\/60,
.rose-home-hero .text-muted-foreground\/50 {
  color: #c8dbef !important;
}

.rose-home-hero > .mx-auto > div:first-child > div:first-child {
  border-color: rgb(93 226 255 / 44%);
  background: rgb(15 112 165 / 28%);
  color: #b8f4ff;
  box-shadow: 0 0 25px rgb(34 211 238 / 18%);
}

.rose-home-hero a,
.rose-home-hero .group {
  border-color: rgb(114 215 255 / 32%);
  color: #eaf7ff;
  background-color: rgb(8 22 48 / 52%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 4px 16px rgb(0 0 0 / 20%);
  backdrop-filter: blur(10px);
}

.rose-home-hero a:hover,
.rose-home-hero .group:hover {
  border-color: rgb(94 228 255 / 76%);
  background-color: rgb(11 57 87 / 68%);
  box-shadow: 0 0 22px rgb(34 211 238 / 22%);
}

.rose-home-hero a[href="/sign-up"],
.rose-home-hero a[href="/dashboard"] {
  border: 1px solid #8bf4ff;
  color: #041a2f;
  background: linear-gradient(110deg, #9bfaff, #72c8ff 75%, #b4b5ff);
  box-shadow:
    0 0 24px rgb(54 212 255 / 26%),
    inset 0 1px rgb(255 255 255 / 75%);
  font-weight: 700;
}

.rose-home-hero a[href="/sign-up"]:hover,
.rose-home-hero a[href="/dashboard"]:hover {
  color: #041a2f;
  background: linear-gradient(110deg, #c5fdff, #91dbff 75%, #cecbff);
  box-shadow: 0 0 38px rgb(54 212 255 / 42%);
}

body:has(.usage-log-model-badge) main {
  background-image:
    linear-gradient(rgb(14 165 233 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(14 165 233 / 5%) 1px, transparent 1px),
    radial-gradient(ellipse at 100% 0, rgb(34 211 238 / 13%), transparent 35%),
    radial-gradient(ellipse at 0 100%, rgb(139 92 246 / 8%), transparent 32%);
  background-size:
    44px 44px,
    44px 44px,
    100% 100%,
    100% 100%;
}

/* Keep the pet restore control clear of the usage-log pagination footer. */
body:has(.usage-log-model-badge) #rose-site-pet-restore-v1 {
  bottom: 76px;
}

@media (max-width: 767px) {
  body:has(.usage-log-model-badge) #rose-site-pet-restore-v1 {
    bottom: calc(8.8rem + env(safe-area-inset-bottom));
  }
}

body:has(.usage-log-model-badge) main > div:nth-child(2) > div:has(.usage-log-model-badge) {
  border-color: rgb(14 165 233 / 34%) !important;
  background-image: linear-gradient(
    135deg,
    rgb(255 255 255 / 93%),
    rgb(238 250 255 / 90%) 54%,
    rgb(247 243 255 / 90%)
  ) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 95%),
    0 0 0 1px rgb(34 211 238 / 8%),
    0 18px 50px -32px rgb(14 116 144 / 52%) !important;
}

body:has(.usage-log-model-badge) main > div:nth-child(2) > div:has(.usage-log-model-badge)::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #22d3ee 18%,
    #60a5fa 52%,
    #a78bfa 82%,
    transparent
  );
  background-size: 200% 100%;
  animation: bright-tech-data-flow 4.4s linear infinite;
  content: "";
  pointer-events: none;
}

body:has(.usage-log-model-badge) [class*="bg-card/50"][class*="rounded-lg"][class*="border"] {
  border-color: rgb(14 165 233 / 21%) !important;
  background-image: linear-gradient(
    115deg,
    rgb(240 253 255 / 76%),
    rgb(248 250 255 / 82%)
  ) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 90%),
    0 4px 18px rgb(14 165 233 / 5%);
}

/* Luminous model cores: same layout and copy target as the existing badge. */
@property --rose-model-phase {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.usage-log-model-badge[data-slot="status-badge"] {
  --usage-tech-ink: hsl(var(--usage-model-hue) 60% 94%);
  --usage-tech-line: hsl(var(--usage-model-hue) 96% 73%);
  --usage-tech-accent: hsl(var(--usage-model-accent-hue) 96% 75%);

  position: relative;
  isolation: isolate;
  gap: 10px !important;
  width: fit-content;
  max-width: min(100%, 340px);
  height: 36px !important;
  min-height: 36px !important;
  overflow: hidden;
  border: 1px solid hsl(var(--usage-model-hue) 85% 64% / 70%) !important;
  border-radius: 9999px !important;
  padding: 0 14px 0 8px !important;
  color: var(--usage-tech-ink) !important;
  background:
    radial-gradient(ellipse at 8% 0, hsl(var(--usage-model-hue) 95% 61% / 28%), transparent 65%),
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      hsl(var(--usage-model-hue) 90% 75% / 5%) 11px 12px
    ),
    linear-gradient(115deg, #112439, #0a1224 58%, hsl(var(--usage-model-accent-hue) 35% 17%)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    inset 0 -1px 0 hsl(var(--usage-model-hue) 95% 65% / 14%),
    0 3px 9px rgb(8 25 49 / 16%),
    0 0 12px hsl(var(--usage-model-hue) 95% 62% / 12%) !important;
  filter: none !important;
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.usage-log-model-badge[data-slot="status-badge"]::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--rose-model-phase),
    transparent 0deg 24deg,
    var(--usage-tech-line) 65deg,
    rgb(255 255 255 / 90%) 82deg,
    transparent 112deg 200deg,
    var(--usage-tech-accent) 248deg,
    transparent 292deg
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.9;
  transform: none;
  content: "";
  pointer-events: none;
}

.usage-log-model-badge[data-slot="status-badge"]::after {
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(
    108deg,
    transparent 35%,
    hsl(var(--usage-model-hue) 95% 82% / 19%) 48%,
    rgb(255 255 255 / 28%) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  opacity: 0;
  transform: none;
  content: "";
  pointer-events: none;
}

.usage-log-model-badge > span {
  position: relative;
  z-index: 2;
  display: flex !important;
  min-width: 0;
  align-items: center;
  gap: 10px !important;
}

/* Both the live portrait wrapper and newer provider-only markup use a core. */
.usage-log-model-badge .usage-log-model-portrait,
.usage-log-model-badge:not(:has(.usage-log-model-portrait))
  > span
  > span:first-child:not(.usage-log-model-name) {
  position: relative !important;
  display: flex !important;
  flex: 0 0 24px !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  overflow: visible;
  border: 1px solid hsl(var(--usage-model-hue) 90% 72% / 72%) !important;
  border-radius: 50% !important;
  color: var(--usage-tech-line) !important;
  background: radial-gradient(
    circle at 35% 25%,
    hsl(var(--usage-model-hue) 80% 60% / 42%),
    #111d30 78%
  ) !important;
  box-shadow:
    inset 0 0 8px hsl(var(--usage-model-hue) 95% 70% / 22%),
    0 0 9px hsl(var(--usage-model-hue) 95% 60% / 24%) !important;
}

.usage-log-model-badge .usage-log-model-portrait::after,
.usage-log-model-badge:not(:has(.usage-log-model-portrait))
  > span
  > span:first-child:not(.usage-log-model-name)::after {
  position: absolute;
  inset: -3px;
  border: 1px dashed hsl(var(--usage-model-hue) 90% 75% / 58%);
  border-right-color: transparent;
  border-left-color: var(--usage-tech-accent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.usage-log-model-badge .usage-log-model-portrait img,
.usage-log-model-badge .usage-log-model-stars {
  display: none !important;
}

.usage-log-model-badge .usage-log-model-provider {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  color: var(--usage-tech-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.usage-log-model-badge .usage-log-model-provider svg,
.usage-log-model-badge:not(:has(.usage-log-model-portrait)) > span > span:first-child svg {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 0 3px hsl(var(--usage-model-hue) 95% 65% / 48%));
}

.usage-log-model-badge .usage-log-model-portrait:not(:has(.usage-log-model-provider))::before {
  color: var(--usage-tech-line);
  content: "AI";
  font:
    800 8px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.usage-log-model-badge .usage-log-model-body {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
}

.usage-log-model-badge .usage-log-model-name {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  width: max-content;
  max-width: 230px;
  overflow: hidden;
  color: var(--usage-tech-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.4;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  text-shadow: 0 0 12px hsl(var(--usage-model-hue) 95% 70% / 22%);
  white-space: nowrap;
}

.usage-log-model-badge[data-slot="status-badge"]:focus-visible {
  outline: 2px solid var(--usage-tech-line) !important;
  outline-offset: 3px;
}

body:has(.usage-log-model-badge) [data-slot="table-container"] {
  background-image:
    linear-gradient(rgb(14 165 233 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(14 165 233 / 6%) 1px, transparent 1px),
    radial-gradient(circle at 100% 0, rgb(34 211 238 / 11%), transparent 35%) !important;
  background-size:
    30px 30px,
    30px 30px,
    100% 100% !important;
}

body:has(.usage-log-model-badge) [data-slot="table"] thead {
  background: linear-gradient(
    90deg,
    rgb(207 250 254 / 92%),
    rgb(219 234 254 / 86%) 58%,
    rgb(237 233 254 / 82%)
  );
  box-shadow: inset 0 -1px 0 rgb(14 165 233 / 24%);
}

.dark body:has(.usage-log-model-badge) [data-slot="table-container"] {
  background-image:
    linear-gradient(rgb(56 189 248 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(56 189 248 / 4%) 1px, transparent 1px),
    radial-gradient(circle at 100% 0, rgb(34 211 238 / 8%), transparent 35%) !important;
}

.dark body:has(.usage-log-model-badge) [data-slot="table"] thead {
  background: linear-gradient(90deg, rgb(8 47 73 / 58%), rgb(46 16 101 / 28%));
}

.dark body:has(.usage-log-model-badge) main > div:nth-child(2) > div:has(.usage-log-model-badge) {
  border-color: rgb(56 189 248 / 34%) !important;
  background-image: linear-gradient(
    135deg,
    rgb(8 20 38 / 92%),
    rgb(8 35 52 / 82%) 54%,
    rgb(31 23 54 / 86%)
  ) !important;
}

.dark body:has(.usage-log-model-badge) [class*="bg-card/50"][class*="rounded-lg"][class*="border"] {
  border-color: rgb(56 189 248 / 26%) !important;
  background-image: linear-gradient(115deg, rgb(7 34 52 / 78%), rgb(23 26 52 / 84%)) !important;
}

@media (hover: hover) {
  .usage-log-model-badge[data-slot="status-badge"]:hover {
    border-color: var(--usage-tech-line) !important;
    box-shadow:
      0 0 0 2px hsl(var(--usage-model-hue) 95% 62% / 12%),
      0 0 24px hsl(var(--usage-model-hue) 95% 62% / 26%) !important;
  }
}

@media (max-width: 639px) {
  .usage-log-model-badge[data-slot="status-badge"] {
    max-width: min(100%, 300px);
  }
}

@media (max-width: 767px) {
  .rose-home-hero {
    background-image:
      linear-gradient(
        90deg,
        rgb(3 10 25 / 94%) 0%,
        rgb(4 13 32 / 82%) 47%,
        rgb(5 15 35 / 48%) 100%
      ),
      url("/assets/cyber-city-20261020-hero.webp") !important;
    background-position:
      center,
      68% center;
    background-size:
      cover,
      auto 100%;
  }

  .rose-home-hero-sparkles::before {
    top: 5%;
    right: -75%;
    width: 29rem;
    opacity: 0.74;
  }

  .rose-home-hero-sparkles::after {
    top: 10%;
    right: -56%;
    width: 23rem;
  }

  .rose-home-hero h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rose-home-hero::before {
    animation: rose-hero-aura 9s ease-in-out infinite;
  }

  .rose-home-hero h1 > span {
    animation: bright-tech-data-flow 10s ease-in-out infinite alternate;
  }

  .usage-log-model-badge[data-slot="status-badge"]::before {
    animation: rose-model-rim 6s linear infinite;
    animation-delay: calc(var(--usage-model-hue) * -0.04s);
  }

  .usage-log-model-badge[data-slot="status-badge"]::after {
    animation: rose-model-sweep 8s ease-in-out infinite;
    animation-delay: calc(var(--usage-model-hue) * -0.03s);
  }

  .usage-log-model-badge .usage-log-model-portrait::after,
  .usage-log-model-badge:not(:has(.usage-log-model-portrait))
    > span
    > span:first-child:not(.usage-log-model-name)::after {
    animation: rose-model-core 16s linear infinite;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .usage-log-model-badge[data-slot="status-badge"]:hover::before {
    animation: rose-model-rim 3s linear infinite;
  }

  .usage-log-model-badge[data-slot="status-badge"]:hover::after {
    animation: rose-model-sweep 3.5s ease-in-out infinite;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rose-home-hero::before,
  .rose-home-hero h1 > span,
  .rose-home-hero-sparkles::before,
  .rose-home-hero-sparkles::after,
  body:has(.usage-log-model-badge)
    main
    > div:nth-child(2)
    > div:has(.usage-log-model-badge)::before,
  .usage-log-model-badge[data-slot="status-badge"],
  .usage-log-model-badge[data-slot="status-badge"]::before,
  .usage-log-model-badge[data-slot="status-badge"]::after,
  .usage-log-model-badge .usage-log-model-portrait::after,
  .usage-log-model-badge:not(:has(.usage-log-model-portrait))
    > span
    > span:first-child:not(.usage-log-model-name)::after {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes rose-hero-aura {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes rose-model-rim {
  to {
    --rose-model-phase: 360deg;
  }
}

@keyframes rose-model-core {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rose-model-sweep {
  0%,
  65% {
    opacity: 0;
    background-position: 150% 0;
  }
  72% {
    opacity: 0.8;
  }
  88%,
  100% {
    opacity: 0;
    background-position: -50% 0;
  }
}

@keyframes bright-tech-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes bright-tech-orbit {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(352deg);
  }
}

@keyframes bright-tech-data-flow {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@keyframes bright-tech-scan {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}