/* =====================================================================
   Extem — site-wide underwater theme
   Ambient ocean lives on <body> (fixed, pure CSS, no stacking risk).
   Sections go transparent; content surfaces become glass.
   The Glimmerka cream showcase keeps its own identity (untouched).
   Load this stylesheet LAST on every page.
   ===================================================================== */

/* ---------------- Ambient ocean ----------------
   Fixed COMPOSITED layer (not background-attachment:fixed): the latter
   repaints the whole gradient every scroll frame and stutters phones. */
body {
  background-color: #bcdcef;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(90vmax 55vmax at 88% -8%, rgba(255, 250, 222, 0.25), rgba(255, 250, 222, 0) 60%),
    radial-gradient(70vmax 50vmax at 6% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    radial-gradient(80vmax 60vmax at 50% 115%, rgba(110, 170, 210, 0.3), rgba(110, 170, 210, 0) 65%),
    linear-gradient(180deg, #ffffff 0%, #e6f3fa 25%, #c2e2f2 50%, #96c8e4 75%, #6fadd6 100%);
}
[data-theme="dark"] body {
  background-color: #020b16;
}
[data-theme="dark"] body::before {
  background-image:
    radial-gradient(80vmax 55vmax at 88% -8%, rgba(150, 190, 240, 0.16), rgba(150, 190, 240, 0) 60%),
    radial-gradient(70vmax 50vmax at 6% 30%, rgba(90, 150, 210, 0.12), rgba(90, 150, 210, 0) 60%),
    radial-gradient(80vmax 60vmax at 50% 115%, rgba(20, 60, 100, 0.25), rgba(20, 60, 100, 0) 65%),
    linear-gradient(180deg, #0d3a5c 0%, #082a46 28%, #051d33 55%, #031223 78%, #010910 100%);
}

/* ---------------- Shells go transparent ---------------- */
.skills,
.why,
section.about,
section.team,
.contact-section,
.work-page,
.legal-page {
  background: transparent;
}

/* Seamless hero melt: start exactly where .hero::after ends,
   then ease back into the ambient water so cards stay readable.
   Light ends in #031a33 (ocean-depth bottom), dark in #010910. */
.skills {
  position: relative;
  margin-top: -1px;
  padding-top: calc(7% + 40px);
  padding-bottom: 34px;
  background: linear-gradient(
    180deg,
    #62a5d4 0px,
    #8ac6ea 200px,
    rgba(138, 198, 234, 0) 420px
  );
}
[data-theme="dark"] .skills {
  background: linear-gradient(
    180deg,
    #010910 0px,
    #031223 160px,
    rgba(2, 11, 22, 0) 380px
  );
}
/* Root pill sits over deep water — keep it glowing, not body text */
.todo-root {
  color: #04263e;
}

/* ---------------- Glass surfaces (light) ---------------- */
.card,
.about-block,
.video-card,
.empty-panel,
.legal-sec {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 32px rgba(6, 60, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------------- Glass surfaces (dark) ---------------- */
[data-theme="dark"] .card,
[data-theme="dark"] .about-block,
[data-theme="dark"] .video-card,
[data-theme="dark"] .empty-panel,
[data-theme="dark"] .legal-sec {
  background: rgba(17, 22, 40, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: rgba(140, 170, 230, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------------- Navbar readability veil (top of page) ---------------- */
.navbar {
  background: linear-gradient(180deg, rgba(2, 14, 30, 0.38), rgba(2, 14, 30, 0));
}

/* Light water is bright — ink the navbar once it floats over it.
   Desktop only: the mobile dropdown panel stays dark with light links. */
@media (min-width: 769px) {
  html:not([data-theme="dark"]) .navbar.scrolled .logo,
  html:not([data-theme="dark"]) .navbar.scrolled nav a,
  html:not([data-theme="dark"]) .navbar.scrolled .menubtn,
  html:not([data-theme="dark"]) .navbar.scrolled .lang-btn,
  html:not([data-theme="dark"]) .navbar.scrolled .theme-toggle,
  html:not([data-theme="dark"]) .navbar.scrolled-color .logo,
  html:not([data-theme="dark"]) .navbar.scrolled-color nav a,
  html:not([data-theme="dark"]) .navbar.scrolled-color .menubtn,
  html:not([data-theme="dark"]) .navbar.scrolled-color .lang-btn,
  html:not([data-theme="dark"]) .navbar.scrolled-color .theme-toggle {
    color: #06345a;
  }
}

/* ---------------- Footer: faint yellow melting out of the blue ----------------
   Light-only: every rule stays under html:not([data-theme]) so the
   dark footer keeps its own glowing whites. */
html:not([data-theme="dark"]) footer {
  background: linear-gradient(180deg, #dfeef7 0%, #eef0e2 50%, #f2e6bd 100%);
  color: #0b2c46;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(120, 110, 70, 0.3);
}
html:not([data-theme="dark"]) footer .f-head {
  border-bottom-color: rgba(11, 44, 70, 0.2);
}
html:not([data-theme="dark"]) footer .f-head h3,
html:not([data-theme="dark"]) footer .f-head > div:first-child > h3 {
  color: #0b2c46;
}
html:not([data-theme="dark"]) footer .f-head p {
  color: rgba(11, 44, 70, 0.7);
}
html:not([data-theme="dark"]) footer .f-head a:not(.email-f, .social-link) {
  color: rgba(11, 44, 70, 0.8);
}
html:not([data-theme="dark"]) footer .f-head a:hover {
  color: #0b2c46;
}
html:not([data-theme="dark"]) footer .contact-links p a {
  color: rgba(11, 44, 70, 0.8);
}
html:not([data-theme="dark"]) footer .contact-links p a:hover {
  color: #0b2c46;
}
html:not([data-theme="dark"]) footer .email-f,
html:not([data-theme="dark"]) footer .social-link,
html:not([data-theme="dark"]) footer .f-head > div:first-child > a {
  color: #0b2c46;
  border-color: rgba(11, 44, 70, 0.35);
}
html:not([data-theme="dark"]) footer .email-f:hover,
html:not([data-theme="dark"]) footer .social-link:hover,
html:not([data-theme="dark"]) footer .f-head > div:first-child > a:hover {
  background: rgba(11, 44, 70, 0.08);
  border-color: rgba(11, 44, 70, 0.6);
  color: #0b2c46;
}
html:not([data-theme="dark"]) footer .copyright {
  color: rgba(11, 44, 70, 0.55);
}
[data-theme="dark"] footer {
  background: linear-gradient(180deg, rgba(3, 16, 30, 0.6), rgba(0, 4, 10, 0.92));
  border-top-color: rgba(140, 170, 230, 0.14);
}

/* Contact divider + video tabs stay legible on water */
.contact-text + .contact-container {
  border-top-color: rgba(5, 5, 95, 0.18);
}
[data-theme="dark"] .contact-text + .contact-container {
  border-top-color: rgba(140, 170, 230, 0.2);
}

/* Form fields keep their readable cream/dark fills */
form input,
form textarea {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Cookie banner + wizard float above the water */
.cookie-banner,
.wiz-overlay {
  /* stacking only — visuals unchanged */
  isolation: isolate;
}

/* ---------------- Font Awesome: swap, don't block ----------------
   FA ships font-display:block (invisible icons up to 3s on slow
   phones). Swap renders fallback glyphs instantly instead. */
.fa-solid,
.fa-regular,
.fa-brands,
.fas,
.far,
.fab,
.fa {
  font-display: swap;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  body::before {
    position: absolute;
  }
}
/* ---------------- Phone diet: blur is the priciest phone pixel ---------------- */
@media (max-width: 768px) {
  .navbar.scrolled,
  .navbar.scrolled-color {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .card,
  .about-block,
  .video-card,
  .empty-panel,
  .legal-sec {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .ocean-glow,
  .light-rays i {
    display: none;
  }
}