/* Pixel-disciplined Liquid Glass treatment for the Raysor product/project fleet.
   This layer intentionally loads after the shared marketing material system so
   catalog-specific geometry can inherit the global motion engine without
   duplicating its pointer and reveal logic. */

:root {
  --fleet-radius-xl: 30px;
  --fleet-radius-lg: 24px;
  --fleet-control-height: 54px;
  --fleet-card-pad: clamp(24px, 2.6vw, 34px);
  --fleet-line: rgba(210,230,250,.14);
  --fleet-line-strong: rgba(222,238,255,.28);
  --fleet-text: #f7fbff;
  --fleet-muted: #9badc0;
  --fleet-glass: rgba(5,13,23,.62);
  --fleet-glass-strong: rgba(6,15,27,.79);
  --fleet-specular: rgba(255,255,255,.16);
}

body.liquid-marketing .product-family-card,
body.liquid-marketing .project-card {
  --fleet-accent: var(--family, var(--project, #6da6ff));
  --surface-lift: 0px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--fleet-accent) 22%, var(--fleet-line));
  background:
    radial-gradient(circle at var(--surface-x, 76%) var(--surface-y, 10%), color-mix(in srgb, var(--fleet-accent) 17%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.082), transparent 31%),
    linear-gradient(122deg, color-mix(in srgb, var(--fleet-accent) 6%, transparent), transparent 58%),
    var(--fleet-glass);
  box-shadow:
    inset 0 1px var(--fleet-specular),
    inset 0 -1px rgba(255,255,255,.025),
    0 1px 0 rgba(255,255,255,.025),
    0 22px 64px rgba(0,0,0,.25),
    0 0 0 1px color-mix(in srgb, var(--fleet-accent) 3%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
  transform:
    perspective(1100px)
    translate3d(0, var(--surface-lift), 0)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition:
    transform 380ms cubic-bezier(.2,.86,.22,1),
    border-color 240ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

body.liquid-marketing .product-family-card {
  min-height: 410px;
  padding: var(--fleet-card-pad);
  border-radius: var(--fleet-radius-xl);
}

body.liquid-marketing .project-card {
  min-height: 300px;
  padding: var(--fleet-card-pad);
  border-radius: var(--fleet-radius-lg);
}

body.liquid-marketing .product-family-card::before,
body.liquid-marketing .project-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--surface-x, 70%) 0%, rgba(255,255,255,.21), transparent 31%),
    linear-gradient(110deg, transparent 8%, rgba(255,255,255,.04) 34%, transparent 58%);
  opacity: .62;
  transform: translateZ(1px);
  transition: opacity 260ms ease;
}

body.liquid-marketing .product-family-card::after,
body.liquid-marketing .project-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--surface-x, 50%) var(--surface-y, 30%), rgba(255,255,255,.12), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 34%);
  opacity: .34;
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

body.liquid-marketing .product-family-card > *,
body.liquid-marketing .project-card > * {
  position: relative;
  z-index: 2;
}

body.liquid-marketing .product-family-card:hover,
body.liquid-marketing .project-card:hover,
body.liquid-marketing .product-family-card:focus-within,
body.liquid-marketing .project-card:focus-within {
  --surface-lift: -6px;
  border-color: color-mix(in srgb, var(--fleet-accent) 42%, var(--fleet-line-strong));
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -1px rgba(255,255,255,.04),
    0 30px 82px rgba(0,0,0,.32),
    0 0 44px color-mix(in srgb, var(--fleet-accent) 11%, transparent);
}

body.liquid-marketing .product-family-card:hover::before,
body.liquid-marketing .project-card:hover::before,
body.liquid-marketing .product-family-card:focus-within::before,
body.liquid-marketing .project-card:focus-within::before {
  opacity: .92;
}

body.liquid-marketing .product-family-card:hover::after,
body.liquid-marketing .project-card:hover::after,
body.liquid-marketing .product-family-card:focus-within::after,
body.liquid-marketing .project-card:focus-within::after {
  opacity: .62;
}

body.liquid-marketing .product-family-card:active,
body.liquid-marketing .project-card:active {
  --surface-lift: -1px;
  transform:
    perspective(1100px)
    translate3d(0, var(--surface-lift), 0)
    rotateX(calc(var(--tilt-x, 0deg) * .45))
    rotateY(calc(var(--tilt-y, 0deg) * .45))
    scale(.992);
  transition-duration: 105ms;
}

/* Cards that visually advertise one destination are fully clickable through the
   existing semantic anchor. The pseudo-element expands the hit target without
   adding a duplicate focusable wrapper or invalid nested links. */
body.liquid-marketing .product-family-card > a:last-child::before,
body.liquid-marketing .project-card > a:last-child::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

body.liquid-marketing .product-family-card:focus-within,
body.liquid-marketing .project-card:focus-within {
  outline: 3px solid color-mix(in srgb, var(--fleet-accent) 58%, white);
  outline-offset: 4px;
}

body.liquid-marketing .product-family-card > a:last-child:focus-visible,
body.liquid-marketing .project-card > a:last-child:focus-visible {
  outline: none;
}

body.liquid-marketing .v1-product-topline {
  min-height: 34px;
  align-items: center;
  margin-bottom: 22px;
}

body.liquid-marketing .v1-product-platform,
body.liquid-marketing .product-family-card .v1-status,
body.liquid-marketing .project-card .eyebrow {
  letter-spacing: .075em;
}

body.liquid-marketing .product-card-icon,
body.liquid-marketing .project-mark {
  transform: translateZ(18px);
  transition:
    transform 420ms cubic-bezier(.2,.86,.22,1),
    box-shadow 320ms ease,
    border-color 260ms ease,
    filter 320ms ease;
}

body.liquid-marketing .product-card-icon {
  width: 70px;
  height: 70px;
  margin: 2px 0 26px;
  border: 1px solid color-mix(in srgb, var(--fleet-accent) 24%, rgba(255,255,255,.11));
  border-radius: 19px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.10),
    0 18px 44px rgba(0,0,0,.34),
    0 0 30px color-mix(in srgb, var(--fleet-accent) 15%, transparent);
}

body.liquid-marketing .project-mark {
  width: 54px;
  height: 54px;
  margin-bottom: 23px;
  border-color: color-mix(in srgb, var(--fleet-accent) 38%, rgba(255,255,255,.12));
  border-radius: 16px;
  background:
    radial-gradient(circle at 35% 12%, rgba(255,255,255,.16), transparent 44%),
    color-mix(in srgb, var(--fleet-accent) 12%, rgba(7,16,28,.72));
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 14px 34px rgba(0,0,0,.26),
    0 0 24px color-mix(in srgb, var(--fleet-accent) 12%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

body.liquid-marketing .product-family-card:hover .product-card-icon,
body.liquid-marketing .product-family-card:focus-within .product-card-icon,
body.liquid-marketing .project-card:hover .project-mark,
body.liquid-marketing .project-card:focus-within .project-mark {
  transform: translate3d(0,-3px,24px) scale(1.035);
  border-color: color-mix(in srgb, var(--fleet-accent) 52%, white);
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    0 24px 52px rgba(0,0,0,.34),
    0 0 40px color-mix(in srgb, var(--fleet-accent) 20%, transparent);
}

body.liquid-marketing .product-family-card h3,
body.liquid-marketing .project-card h3 {
  margin-bottom: 10px;
  color: var(--fleet-text);
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
  transform: translateZ(12px);
}

body.liquid-marketing .product-family-card h3 {
  font-size: clamp(1.7rem, 2.25vw, 2.35rem);
}

body.liquid-marketing .project-card h3 {
  font-size: clamp(1.5rem, 2vw, 2.05rem);
}

body.liquid-marketing .product-family-card > p,
body.liquid-marketing .project-card > p:not(.eyebrow) {
  color: var(--fleet-muted);
  line-height: 1.62;
}

body.liquid-marketing .product-family-card > a:last-child,
body.liquid-marketing .project-card > a:last-child {
  min-height: var(--fleet-control-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--fleet-accent) 22%, rgba(255,255,255,.1));
  border-radius: 15px;
  color: color-mix(in srgb, var(--fleet-accent) 63%, white);
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.10), transparent 48%),
    color-mix(in srgb, var(--fleet-accent) 7%, rgba(5,13,23,.66));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.16);
  font-weight: 780;
  text-decoration: none;
  transform: translateZ(16px);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

body.liquid-marketing .product-family-card > a:last-child span,
body.liquid-marketing .project-card > a:last-child span {
  display: inline-block;
  font-size: 1.12em;
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(.2,.86,.22,1);
}

body.liquid-marketing .product-family-card:hover > a:last-child,
body.liquid-marketing .product-family-card:focus-within > a:last-child,
body.liquid-marketing .project-card:hover > a:last-child,
body.liquid-marketing .project-card:focus-within > a:last-child {
  border-color: color-mix(in srgb, var(--fleet-accent) 42%, rgba(255,255,255,.14));
  color: #fff;
  background:
    radial-gradient(circle at 32% 0%, rgba(255,255,255,.15), transparent 50%),
    color-mix(in srgb, var(--fleet-accent) 13%, rgba(5,13,23,.76));
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.22);
}

body.liquid-marketing .product-family-card:hover > a:last-child span,
body.liquid-marketing .product-family-card:focus-within > a:last-child span,
body.liquid-marketing .project-card:hover > a:last-child span,
body.liquid-marketing .project-card:focus-within > a:last-child span {
  transform: translateX(4px);
}

/* The fleet grid should adapt from actual available width instead of carrying
   desktop breakpoint assumptions into split-view/tablet layouts. */
body.liquid-marketing .project-directory,
body.liquid-marketing .v1-grid.v1-grid-2:has(.product-family-card) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr));
  gap: clamp(14px, 1.65vw, 22px);
  align-items: stretch;
}

body.liquid-marketing .project-directory {
  container-type: inline-size;
  container-name: raysor-project-fleet;
}

@container raysor-project-fleet (max-width: 42rem) {
  body.liquid-marketing .project-card {
    min-height: 250px;
  }
}

/* Product-specific material personalities remain related without becoming clones. */
body.liquid-marketing .product-family-card[data-family="territoryhub"] {
  --family: #91b1cc;
  --family2: #517395;
}

body.liquid-marketing .product-family-card[data-family="territory-field"] {
  --family: #8ed9c0;
  --family2: #3c91a4;
}

body.liquid-marketing .product-family-card[data-family="principal"] {
  --family: #2d9cff;
  --family2: #70c5ff;
}

body.liquid-marketing .product-family-card[data-family="deep-orbit"] {
  --family: #9b8dff;
  --family2: #70a9ff;
}

@media (hover: none), (pointer: coarse) {
  body.liquid-marketing .product-family-card,
  body.liquid-marketing .project-card {
    --surface-lift: 0px;
    transform: none;
  }

  body.liquid-marketing .product-family-card > a:last-child,
  body.liquid-marketing .project-card > a:last-child {
    min-height: 56px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.liquid-marketing .product-family-card,
  body.liquid-marketing .project-card,
  body.liquid-marketing .project-mark,
  body.liquid-marketing .product-family-card > a:last-child,
  body.liquid-marketing .project-card > a:last-child {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #0a1421;
  }
}

@media (prefers-contrast: more) {
  body.liquid-marketing .product-family-card,
  body.liquid-marketing .project-card {
    border-color: color-mix(in srgb, var(--fleet-accent) 55%, white);
  }

  body.liquid-marketing .product-family-card > p,
  body.liquid-marketing .project-card > p:not(.eyebrow) {
    color: #d9e5f2;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.liquid-marketing .product-family-card,
  body.liquid-marketing .project-card,
  body.liquid-marketing .product-card-icon,
  body.liquid-marketing .project-mark,
  body.liquid-marketing .product-family-card > a:last-child span,
  body.liquid-marketing .project-card > a:last-child span {
    transform: none !important;
    transition: none !important;
  }
}