/* =========================================================
   GLOBAL TRANSPARENT GLASS SYSTEM
   Load this file AFTER every page-specific CSS file.
   ========================================================= */

:root {
  --glass-bg: rgba(13, 16, 34, 0.22);
  --glass-bg-hover: rgba(13, 16, 34, 0.32);
  --glass-border: rgba(191, 219, 254, 0.20);
  --glass-border-hover: rgba(147, 197, 253, 0.40);
}

#network-bg {
  opacity: 0.68 !important;
}

/* Transparent information blocks across the website */
body :is(
  .hero-note,
  .profile-card,
  .stat-card,
  .value-flow,
  .value-card,
  .cv-overview-card,
  .recommendation-card,
  .explore-card,

  .split-panel,
  .timeline-content,
  .skill-card,
  .hobby-card,
  .quote-panel,

  .project-section,
  .project-media,
  .projects-hero-visual,

  .certificate-card,
  .certificate-image,

  .bi-integration-panel,
  .bi-hero-visual,
  .powerbi-embed-frame,

  .button,
  .chip,
  .badge,
  .lang-toggle,
  .header-social a,

  .application-status-panel,
  .application-status-copy,
  .application-progress-item,
  .application-scope-card,
  .application-coming-next,
  .scope-label,
  .application-status-pill
) {
  background: var(--glass-bg) !important;
  background-image: none !important;
  border-color: var(--glass-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Transparent hover state */
body :is(
  .value-card,
  .cv-overview-card,
  .recommendation-card,
  .explore-card,
  .timeline-content,
  .skill-card,
  .hobby-card,
  .project-section,
  .project-media,
  .projects-hero-visual,
  .certificate-card,
  .certificate-image,
  .bi-integration-panel,
  .bi-hero-visual,
  .powerbi-embed-frame,
  .button,
  .chip,
  .badge,
  .lang-toggle,
  .header-social a,
  .application-status-copy,
  .application-progress-item,
  .application-scope-card,
  .application-coming-next,
  .scope-label,
  .application-status-pill
):hover {
  background: var(--glass-bg-hover) !important;
  background-image: none !important;
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Remove dark/glow pseudo-layers that hide the network.
   CV cards are intentionally excluded so their moving border remains visible. */
body :is(
  .profile-card,
  .recommendation-card,
  .explore-card,
  .value-card
)::before,
body :is(
  .recommendation-card,
  .explore-card,
  .value-card
)::after {
  opacity: 0 !important;
}

/* Small inner icon/label boxes */
body :is(
  .recommendation-icon,
  .value-icon,
  .cv-big-label,
  .cv-card-arrow
) {
  background: rgba(147, 197, 253, 0.055) !important;
  background-image: none !important;
  border-color: rgba(147, 197, 253, 0.16) !important;
  box-shadow: none !important;
}

/* Outer wrappers should stay invisible */
body :is(
  .cv-overview-panel,
  .recommendations-showcase,
  .explore-showcase,
  .powerbi-embed-panel
) {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Images should not create fake dark boxes */
body :is(
  .project-media img,
  .projects-hero-visual img,
  .certificate-image img,
  .bi-hero-visual img,
  .bi-hero-visual video
) {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep Power BI wrapper layout but remove its visible card. */
.powerbi-embed-panel {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Completely remove the outer card behind the spinning gear. */
body #main .application-gear-card.application-gear-card-minimal,
body #main .application-gear-card.application-gear-card-minimal:hover {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 300px;
  gap: 1.4rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body #main .application-gear-card.application-gear-card-minimal::before,
body #main .application-gear-card.application-gear-card-minimal::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body #main .application-gear-wrap {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep CV moving light active after global glass overrides. */
.cv-card-list .cv-overview-card::before {
  opacity: 1 !important;
}

.gear-core {
  opacity: 0.85;
}

.gear-core path {
  fill: var(--gold) !important;
}

.gear-inner-ring {
  stroke: rgba(242, 211, 123, 0.32) !important;
}

.gear-center,
.gear-orbit-dot {
  fill: var(--gold) !important;
}

.gear-orbit-ring {
  stroke: rgba(242, 211, 123, 0.24) !important;
}

/* Mobile menu can remain readable but still slightly glassy. */
@media (max-width: 980px) {
  .primary-nav {
    background: rgba(10, 16, 32, 0.96) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Disabled cards should not inherit global hover movement. */
.cv-overview-card.is-disabled,
.cv-overview-card.is-disabled:hover {
  cursor: not-allowed !important;
  opacity: 0.66 !important;
  transform: none !important;
  border-color: rgba(191, 219, 254, 0.14) !important;
  box-shadow: none !important;
}

.cv-overview-card.is-disabled::before {
  animation: none !important;
  opacity: 0.18 !important;
}

/* =========================================================
   BASE DESKTOP REM DENSITY

   Keep the design's original 80% desktop rem scale before the
   proportional viewport shell is applied. The shell scaling below
   then enlarges or shrinks the whole visible desktop composition
   from the 1536px-wide reference viewport.
   ========================================================= */

@media (min-width: 900px) {
  html {
    font-size: 80% !important;
  }
}


/* =========================================================
   REFERENCE-PROPORTIONAL DESKTOP SCALING

   Reference setup:
   - 1920x1080 physical display
   - 125% OS display scale
   - 100% browser zoom
   - approximately 1536px CSS viewport width

   The JavaScript file assets/js/reference-scale.js wraps the visible
   page content in .reference-scale-shell and scales that shell to the
   current desktop viewport width. This keeps the same relative side
   margins, spacing, text size, media size, and component proportions
   that the design has on the reference setup.

   Mobile/tablet-small viewports below the desktop nav breakpoint keep
   the normal responsive CSS instead of shrinking the full desktop layout.
   ========================================================= */

.reference-scale-shell {
  position: relative;
  z-index: 2;
  transform-origin: 0 0;
}

html.reference-scale-active,
html.reference-scale-active body {
  overflow-x: hidden;
}

html.reference-scale-active .reference-scale-shell {
  max-width: none;
  transform-origin: 0 0;
}

html.reference-scale-transform-fallback .reference-scale-shell {
  transform-origin: 0 0;
}