/*
 * LIQUID GLASS — site-wide experiment (launch pages).
 * Loaded after launch.css from templates/components/launch/head.html; delete that <link> to revert everything here.
 *
 * Same treatment as the reserve page's .lg: no hard border — a frosted, saturated blur, a soft inner highlight,
 * and light catching the rim (a gradient masked to a 1px ring: bright top-left, fading, faint kick bottom-right).
 */

:root {
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 55%, rgba(255, 255, 255, 0.07) 100%);
  --lg-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.11) 100%);
  /* Large surfaces (tiles, panels): same glass, lighter so text-heavy cards stay calm */
  --lg-fill-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0.05) 100%);
  --lg-rim: linear-gradient(135deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.16) 20%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0.14) 82%,
    rgba(255, 255, 255, 0.5) 100%);
  --lg-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), inset 0 -1px 1px rgba(255, 255, 255, 0.06), 0 12px 34px rgba(0, 0, 0, 0.35);
  --lg-shadow-hover: inset 0 1px 1px rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.1), 0 14px 38px rgba(0, 0, 0, 0.4);
  --lg-blur: blur(24px) saturate(1.8);
}

/* ---------- Rim light (shared) ---------- */
/* ::before where free; ::after on components whose ::before is already taken (spec-tile spotlight) */
.floating-navbar::before,
.btn--primary::before,
.btn--secondary::before,
.what-it-does-carousel__dots::before,
.ent-badge::before,
.ent-feature::before,
.ent-cta__panel::before,
.spec-tile::after,
.ent-use::after,
.what-it-does-section__frame::after,
.feature-card::after,
.about-glass__bg::after,
.about-team-card-flip__back::after,
.opt-out-modal::after,
.video-view-btn::before,
.section-video-nav-btn::before,
.section-video-close-btn::before,
.section-video-canvas-wrap::before,
.ent-pdf-fab::before,
.timeline__badge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn--primary,
.btn--secondary,
.what-it-does-carousel__dots,
.ent-badge,
.ent-feature,
.ent-cta__panel,
.ent-use,
.what-it-does-section__frame,
.feature-card:not(.about-team-card-flip__front),
.opt-out-modal {
  position: relative;
  isolation: isolate;
}
/* The About team flip faces stay position: absolute (stacked front/back for the 3D flip) — never override that */

/* ---------- Navbar ---------- */
.floating-navbar {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(12, 12, 14, 0.45) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

/* ---------- Buttons (incl. the developer page's violet ones — glass now, no purple) ---------- */
.btn--primary,
.btn--secondary,
.btn--violet,
.btn--violet-outline {
  border-color: transparent !important;
  background: var(--lg-fill) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow) !important;
  color: var(--white) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn--violet:hover,
.btn--violet:focus-visible,
.btn--violet-outline:hover,
.btn--violet-outline:focus-visible {
  border-color: transparent !important;
  background: var(--lg-fill-hover) !important;
  box-shadow: var(--lg-shadow-hover) !important;
  color: var(--white) !important;
}

.btn--primary:active,
.btn--secondary:active {
  transform: scale(0.99);
}

/* ---------- Cards and tiles ---------- */
.spec-tile,
.ent-feature,
.ent-cta__panel {
  border-color: transparent !important;
  background: var(--lg-fill-soft);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

/* Developer tiles: cursor spotlight goes white to match the glass */
.spec-tile::before {
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, -20%), rgba(255, 255, 255, 0.09), transparent 60%);
}

/* Image cards keep their image; they get the rim and the lift */
.ent-use,
.what-it-does-section__frame {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* ---------- Home "Take a closer look": spec pills / open card, arrows, close, and the video panel ---------- */
/* Same see-through glass as the site's buttons (the product shows through, frosted); a soft text shadow keeps the white
   text legible over the bright turntable */
.video-view-btn,
.section-video-nav-btn {
  position: relative;
  isolation: isolate;
}

.section-video-close-btn {
  isolation: isolate;
}

.video-view-btn,
.video-view-btn.active,
.section-video-nav-btn,
.section-video-close-btn {
  border-color: transparent !important;
  background: var(--lg-fill) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.video-view-btn:hover,
.video-view-btn:focus-visible,
.section-video-nav-btn:hover,
.section-video-nav-btn:focus-visible,
.section-video-close-btn:hover,
.section-video-close-btn:focus-visible {
  border-color: transparent !important;
  background: var(--lg-fill-hover) !important;
  box-shadow: var(--lg-shadow-hover) !important;
}

/* The video panel itself (desktop): rim light instead of a hard border */
.section-video-canvas-wrap {
  border-color: transparent !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* Enterprise "Save as PDF" floating button, and the Developer status pills (they keep their lavender label) */
.ent-pdf-fab,
.timeline__badge {
  position: relative;
  isolation: isolate;
  border-color: transparent !important;
  background: var(--lg-fill) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

.ent-pdf-fab {
  position: fixed;
}

.ent-pdf-fab:hover,
.ent-pdf-fab:focus-visible {
  background: var(--lg-fill-hover) !important;
  box-shadow: var(--lg-shadow-hover);
}

/* About team cards: the name panel joins its card with a soft inner highlight, not a hard top line */
.about-team-card__content {
  border-top-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---------- Small capsules ---------- */
.ent-badge,
.what-it-does-carousel__dots {
  border-color: transparent !important;
  background: var(--lg-fill) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

/* ---------- About + Careers ---------- */
/* Glass cards: About image cards, Careers job cards (team front cards are photo cards: rim + lift only) */
.feature-card:not(.feature-card--bg-image) {
  border-color: transparent !important;
  background: var(--lg-fill-soft);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

.feature-card:not(.feature-card--bg-image):hover {
  background: var(--lg-fill-hover);
  box-shadow: var(--lg-shadow-hover);
}

.feature-card--bg-image {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* About intro panel (scales sideways on scroll; the rim rides along on the same layer) */
.about-glass__bg {
  border-color: transparent;
  background: var(--lg-fill-soft);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

/* Team card back: dark frosted glass over the blurred photo */
.about-team-card-flip__back {
  border-color: transparent;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.about-team-card-flip__back-glass {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.05) 100%), rgba(0, 0, 0, 0.55);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* Modals (privacy, Made in USA, careers apply) */
.opt-out-modal {
  border-color: transparent !important;
  background: var(--lg-fill-soft), rgba(14, 14, 16, 0.6);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow);
}

/* Careers résumé drop zone: soft glass well, dashed edge kept so it still reads as a drop target */
.careers-resume-drop {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

/* Print (enterprise "Save as PDF"): masks, backdrop blur and soft shadows don't print — flat, quiet glass instead */
@media print {
  .floating-navbar::before,
  .btn--primary::before,
  .btn--secondary::before,
  .what-it-does-carousel__dots::before,
  .ent-badge::before,
  .ent-feature::before,
  .ent-cta__panel::before,
  .spec-tile::after,
  .ent-use::after,
  .what-it-does-section__frame::after,
  .feature-card::after,
  .about-glass__bg::after,
  .about-team-card-flip__back::after,
  .opt-out-modal::after {
    display: none !important;
  }

  .ent-feature,
  .ent-cta__panel,
  .ent-badge,
  .spec-tile {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .spec-tile,
  .ent-feature,
  .ent-cta__panel,
  .ent-badge,
  .ent-use,
  .floating-navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}