/**
 * BalticPy Reusable Glassmorphism Components
 * Includes Frosted Glass Navigation Bar, Buttons, Cards, and Badges.
 */

/* ==========================================================================
   Base Glass Utility Class
   ========================================================================== */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ==========================================================================
   Frosted Glass Menu Bar with Logo Cutout Mask
   Fixed navigation with laser-cut logo hole where background remains unblurred.
   ========================================================================== */
.glass-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menu-height);
  z-index: var(--menu-z-index);
  background: transparent;
}

/* Frosted glass surface layer with cutout mask */
.navbar-frosted-surface {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: var(--menu-bg);
  backdrop-filter: var(--menu-blur) var(--glass-saturate) brightness(var(--glass-brightness, 110%));
  -webkit-backdrop-filter: var(--menu-blur) var(--glass-saturate) brightness(var(--glass-brightness, 110%));
  border-bottom: var(--menu-border);
  box-shadow: var(--menu-shadow);

  transition: background var(--transition-normal), 
              box-shadow var(--transition-normal), 
              border-color var(--transition-normal);

  /* Cutout Mask: The snake logo silhouette itself is cut out as a transparent hole,
     while the frosted glass surface seamlessly blends across the rest of the menubar */
  -webkit-mask-image: url('../images/balticpy-cutout-bold.png'), linear-gradient(#000, #000);
  -webkit-mask-position: var(--nav-edge-padding) center, 0 0;
  -webkit-mask-size: var(--logo-cutout-size) var(--logo-cutout-size), 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: destination-out;

  mask-image: url('../images/balticpy-cutout-bold.png'), linear-gradient(#000, #000);
  mask-position: var(--nav-edge-padding) center, 0 0;
  mask-size: var(--logo-cutout-size) var(--logo-cutout-size), 100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract;
}

/* Scrolled state: slightly intensified frosted glass when rolling under */
.glass-navbar.is-scrolled .navbar-frosted-surface {
  background: var(--menu-scrolled-bg);
  box-shadow: var(--menu-scrolled-shadow);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* Edge-to-Edge Navigation Container */
.glass-navbar .nav-container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 var(--nav-edge-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* Brand Cutout Anchor (Sticks directly to the left edge) */
.nav-brand-cutout {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}

.cutout-aperture {
  width: var(--logo-cutout-size);
  height: var(--logo-cutout-size);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}

/* Subtle optic tint filling the laser-cut logo hole (few % tint) */
.cutout-aperture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.12) 0%, rgba(15, 23, 42, 0.20) 100%);
  -webkit-mask-image: url('../images/balticpy-cutout-bold.png');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../images/balticpy-cutout-bold.png');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.nav-brand-cutout:hover .cutout-aperture::before {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.20) 0%, rgba(15, 23, 42, 0.28) 100%);
}

/* Debossed laser-cut overlay defining the physical glass-cut rims */
.cutout-deboss-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.75)) drop-shadow(0 1px 1.5px rgba(255, 255, 255, 0.45));
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.nav-brand-cutout:hover .cutout-deboss-img {
  transform: scale(1.04);
  filter: drop-shadow(0 -1.5px 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 1.5px 2px rgba(255, 255, 255, 0.65)) drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
}

/* 3D Liquid Chrome Emblem for the menubar left edge (refined, tight shadows) */
.cutout-chrome-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* Subtle, crisp lighting */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.nav-brand-cutout:hover .cutout-chrome-icon {
  transform: scale(1.03);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.cutout-brand-text {
  font-weight: 800;
  font-size: 1.35rem;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Right-aligned Navigation Group (Items grouped cleanly on the right edge) */
.nav-right-group {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-left: auto;
}

/* Frosted Glass Contact Button (Translucent see-through glass, pure light frost without dark backing) */
#contactBtn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.50rem 1.25rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

#contactBtn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%), rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.22),
    0 0 16px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

#contactBtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}


.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text-main);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
  transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Mobile Toggle Hamburger */
.nav-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-text-main);
}

.nav-mobile-toggle svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
}

/* ==========================================================================
   Frosted Glass Buttons (.glass-btn)
   Shares the exact frosted glass aesthetic, blur, borders, and shadows.
   ========================================================================== */
.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  vertical-align: middle;

  /* Frosted Glass Core */
  background: var(--btn-glass-bg);
  backdrop-filter: var(--btn-glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--btn-glass-blur) var(--glass-saturate);
  border: var(--btn-glass-border);
  box-shadow: var(--btn-glass-shadow);
  color: var(--color-text-main);

  transition: transform var(--transition-fast), 
              background var(--transition-normal), 
              border-color var(--transition-normal), 
              box-shadow var(--transition-normal),
              color var(--transition-fast);
}

.glass-btn:hover {
  background: var(--btn-glass-hover-bg);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: var(--btn-glass-hover-shadow);
  color: #ffffff;
  transform: translateY(-2px);
}

.glass-btn:active {
  transform: translateY(0);
  box-shadow: var(--btn-glass-shadow);
}

/* Button Variants */
.glass-btn-primary {
  background: var(--btn-primary-bg);
  border: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
  color: #ffffff;
}

.glass-btn-primary:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35) 0%, rgba(99, 102, 241, 0.4) 100%);
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 12px 32px -4px rgba(56, 189, 248, 0.45), 0 0 20px rgba(56, 189, 248, 0.3);
}

.glass-btn-pill {
  border-radius: var(--btn-radius-pill);
}

.glass-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

.glass-btn-lg {
  padding: 0.95rem 2rem;
  font-size: 1.05rem;
  border-radius: 14px;
}

/* Subtle light shimmer sweep on hover */
.glass-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.glass-btn:hover::before {
  left: 100%;
}

/* ==========================================================================
   Frosted Glass Cards (.glass-card)
   Used for services, value props, tech stack highlights.
   ========================================================================== */
.glass-card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--glass-shadow);
  position: relative;
  transition: transform var(--transition-normal), 
              border-color var(--transition-normal), 
              box-shadow var(--transition-normal);
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: var(--glass-shadow-lg), 0 0 24px rgba(56, 189, 248, 0.12);
}

/* ==========================================================================
   Frosted Glass Badges & Pills (.glass-badge)
   ========================================================================== */
.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: rgba(56, 189, 248, 0.08);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Company Data Modal Popover (.company-modal)
   Light Frosted Glass Popover under the Menubar Contact button
   ========================================================================== */
.company-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.company-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Invisible click-capturing backdrop (NO darkening, NO background blur) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2000;
}

/* Positioned right below the menubar under the Contact button */
.modal-dialog-container {
  position: fixed;
  top: calc(var(--menu-height) + 10px);
  right: var(--nav-edge-padding);
  z-index: 2001;
  width: 380px;
  max-width: calc(100vw - 2rem);
  padding: 0;
}

/* Light Frosted Glass Card: Matches the bright frosty sheen of the menubar */
.glass-modal-card {
  position: relative;
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(12, 18, 34, 0.55);
  backdrop-filter: var(--glass-blur-heavy) var(--glass-saturate) brightness(125%);
  -webkit-backdrop-filter: var(--glass-blur-heavy) var(--glass-saturate) brightness(125%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--btn-radius, 16px);
  box-shadow: 
    0 20px 48px -8px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  padding: 1.6rem 1.5rem 1.4rem;
  transform: translateY(-8px) scale(0.97);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.company-modal.is-active .glass-modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  transform: scale(1.08);
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.25rem;
  margin-bottom: 1.15rem;
  padding-right: 1.5rem;
}

.modal-company-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.modal-company-tagline {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e2e8f0;
  letter-spacing: 0.01em;
}

/* Official Registry Data Details Block */
.modal-registry-details {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  margin-bottom: 1.15rem;
  text-align: left;
}

.registry-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.registry-label {
  color: #cbd5e1;
  font-weight: 500;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.registry-val {
  color: #ffffff;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.registry-val.font-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* Modal Action Buttons (Email & Phone: Clean Frosted Glass with White Text) */
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

.modal-action-btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.90rem;
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%), rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.modal-action-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

.modal-action-btn:active {
  transform: translateY(0);
}

.modal-phone-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

@media (max-width: 480px) {
  .modal-dialog-container {
    right: 1rem;
    left: 1rem;
    width: auto;
  }
}

/* ==========================================================================
   Heavy 3D Physical Turntable Carousel (.catalog-section)
   Cards stand ON the wide frosted glass turntable disc.
   Cards billboard forward towards the viewer and smoothly shrink, darken,
   and vanish into the atmospheric mist as they travel along the turntable.
   ========================================================================== */
.catalog-section {
  padding: 3.5rem 0 5.5rem;
  position: relative;
  z-index: 1;
  --turntable-card-w: 480px;
  --turntable-card-h: 560px;
  overflow-x: clip;
}

@media (max-width: 1024px) {
  .catalog-section {
    --turntable-card-w: 410px;
    --turntable-card-h: 530px;
  }
}

@media (max-width: 768px) {
  .catalog-section {
    --turntable-card-w: 330px;
    --turntable-card-h: 500px;
  }
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2rem;
}

.catalog-title-group {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.catalog-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.catalog-heading {
  margin: 0;
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.catalog-subheading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* ==========================================================================
   3D Turntable Stage Container
   ========================================================================== */
.turntable-stage {
  position: relative;
  width: 100%;
  height: 640px;
  overflow: visible;
  user-select: none;
  cursor: grab;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  touch-action: pan-y;
}

@media (max-width: 1024px) {
  .turntable-stage {
    height: 600px;
  }
}

@media (max-width: 768px) {
  .turntable-stage {
    height: 550px;
  }
}

.turntable-stage.is-dragging {
  cursor: grabbing;
}

/* ==========================================================================
   3D Rotor & Cards Assembly
   Rotary perspective cards billboarding forward with progressive downward shift.
   ========================================================================== */
.turntable-rotor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.turntable-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--turntable-card-w);
  height: var(--turntable-card-h);
  margin-left: calc(-0.5 * var(--turntable-card-w));
  transform-origin: 50% 50%; /* Center scaling for true perspective depth */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.45rem 1.45rem 1.35rem;
  border-radius: var(--radius-xl, 20px);
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(15, 23, 42, 0.22) 100%),
    rgba(30, 41, 59, 0.32);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 
    0 20px 48px -8px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Front card (The focused one being read, stands proudly on the front glass) */
.turntable-card.is-front {
  cursor: default;
  border-color: rgba(255, 255, 255, 0.75);
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.18) 45%, rgba(15, 23, 42, 0.18) 100%),
    rgba(30, 41, 59, 0.26);
  box-shadow: 
    0 24px 56px -8px rgba(0, 0, 0, 0.40),
    0 0 32px rgba(255, 255, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.turntable-card:not(.is-front):hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 
    0 20px 44px -8px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

/* Card Glow Mesh (Hover Aura) */
.card-glow-mesh {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 75%);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.turntable-card.is-front .card-glow-mesh,
.turntable-card:hover .card-glow-mesh {
  opacity: 1;
  transform: scale(1.15);
}

/* Card Top Meta: Icon + Category */
.card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.card-icon-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.turntable-card.is-front .card-icon-wrapper,
.turntable-card:hover .card-icon-wrapper {
  transform: scale(1.05);
  background: rgba(56, 189, 248, 0.18);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.5);
}

.card-category-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full, 9999px);
}

/* Card Title & Description */
.card-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.card-description {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: #f1f5f9;
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Live Build Radar / Dynamic Feed Section in Turntable Cards
   ========================================================================== */
.card-feed-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.75rem 0.85rem 0.7rem;
  margin-top: 0.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 16px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.feed-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.feed-header-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.feed-sort-group {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  padding: 0;
}

.feed-sort-btn {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  padding: 0.1rem 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.2;
}

.feed-sort-btn:hover {
  color: rgba(255, 255, 255, 0.90);
}

.feed-sort-btn.is-active {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #ffffff;
  border-radius: 0;
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.feed-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  position: relative;
  display: inline-block;
}

.feed-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.65);
  animation: pulseRadar 2s infinite ease-out;
}

@keyframes pulseRadar {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.feed-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.feed-count-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0.12rem 0.45rem;
  border-radius: 9999px;
}

.card-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-height: 160px;
  max-height: 335px;
  overflow-y: auto;
  padding-right: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.40) transparent;
  overscroll-behavior: contain;
}

@media (max-width: 1024px) {
  .card-feed-list {
    max-height: 300px;
  }
}

@media (max-width: 768px) {
  .card-feed-list {
    max-height: 270px;
  }
}

.card-feed-list::-webkit-scrollbar {
  width: 4px;
}

.card-feed-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.card-feed-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.40);
  border-radius: 4px;
}

.card-feed-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.70);
}

.feed-item-link {
  display: block;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  transition: all 0.18s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.feed-item-link:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.feed-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

/* Drop frames from GitHub and other source tags - just keep clean text */
.feed-source-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

.tag-hackernews {
  color: #fdba74; /* Warm orange */
}

.tag-github {
  color: #e9d5ff; /* Lavender */
}

.tag-lobsters {
  color: #fca5a5; /* Coral */
}

.tag-hackaday {
  color: #fde047; /* Gold */
}

.tag-devto {
  color: #93c5fd; /* Sky blue */
}

.feed-item-score {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.feed-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-item-link:hover .feed-item-title {
  color: #ffffff;
}

.feed-item-snippet {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.34;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-empty-state {
  padding: 1.25rem 0.5rem;
  text-align: center;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
}

/* Fallback Capabilities / Features Bulleted Section (if needed) */
.card-features {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 0;
}

.features-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.features-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.815rem;
  color: #e2e8f0;
  line-height: 1.34;
}

.features-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.38rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 6px var(--color-primary);
}

/* Card Tech Tags Footer */
.card-tech-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.tech-tag {
  font-size: 0.76rem;
  font-weight: 600;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  user-select: none;
  transition: all var(--transition-fast);
}

.turntable-card:hover .tech-tag {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   Turntable Bottom Controls Bar
   Cleanly positioned below the turntable stage
   ========================================================================== */
.turntable-bottom-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  position: relative;
  z-index: 30;
}

/* Pagination Dots */
.carousel-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.50);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-normal);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.70);
  border-color: #ffffff;
}

.carousel-dot.is-active {
  width: 32px;
  border-radius: 6px;
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .catalog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  
  .carousel-controls-group {
    width: 100%;
    justify-content: space-between;
  }
  
  .turntable-stage {
    height: 640px;
  }

  .turntable-platter-base {
    top: 480px;
  }
}