/* Glass panels so the page gradient stays visible, with a slow conic rim
   (CodePen Megafry/jEVWqvV, retinted to the site teal and lilac). */

@property --aurora-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes aurora-spin {
  to {
    --aurora-angle: 360deg;
  }
}

body:not(.theme-light) :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-features li,
  .portfolio-case-nav__card
),
body.theme-light :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-features li,
  .portfolio-case-nav__card
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 16px 40px rgba(0, 0, 0, 0.16) !important;
}

body:not(.theme-light) :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-features li,
  .portfolio-case-nav__card
) {
  background: rgba(8, 14, 16, 0.2) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

body.theme-light :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-features li,
  .portfolio-case-nav__card
) {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 14px 36px rgba(20, 24, 22, 0.08) !important;
}

body:not(.theme-light) :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-features li,
  .portfolio-case-nav__card
)::after,
body.theme-light :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-features li,
  .portfolio-case-nav__card
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--aurora-angle),
    rgba(255, 255, 255, 0.05) 0deg,
    #7ef6ff 48deg,
    rgba(255, 255, 255, 0.04) 110deg,
    #d7b6ff 190deg,
    rgba(255, 255, 255, 0.05) 250deg,
    #ffffff 310deg,
    rgba(255, 255, 255, 0.05) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: aurora-spin 14s linear infinite;
  opacity: 0.9;
}

body:not(.theme-light) :is(.faq-item, .contact-card, .contact-form-wrap, .portfolio-case-features li)::after,
body.theme-light :is(.faq-item, .contact-card, .contact-form-wrap, .portfolio-case-features li)::after {
  animation: none;
}

body:not(.theme-light) :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-nav__card
) > :not(.ai-estimator__bg),
body.theme-light :is(
  .about-panel,
  .faq-item,
  .faq-calc-card,
  .ai-estimator,
  .contact-panel,
  .contact-card,
  .contact-form-wrap,
  .portfolio-case-aside__card,
  .portfolio-case-nav__card
) > :not(.ai-estimator__bg) {
  position: relative;
  z-index: 1;
}

/* Portfolio cards: the photo stays opaque, the text panel is the same glass
   as the other blocks so the page gradient shows through. */
body:not(.theme-light) .portfolio-card {
  background: rgba(8, 14, 16, 0.2) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

body.theme-light .portfolio-card {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 14px 36px rgba(20, 24, 22, 0.06) !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.theme-light) :is(
    .about-panel,
    .faq-item,
    .faq-calc-card,
    .ai-estimator,
    .contact-panel,
    .contact-card,
    .contact-form-wrap,
    .portfolio-case-aside__card,
    .portfolio-case-features li,
    .portfolio-case-nav__card
  )::after,
  body.theme-light :is(
    .about-panel,
    .faq-item,
    .faq-calc-card,
    .ai-estimator,
    .contact-panel,
    .contact-card,
    .contact-form-wrap,
    .portfolio-case-aside__card,
    .portfolio-case-features li,
    .portfolio-case-nav__card
  )::after {
    animation: none;
  }
}