/*
 * Liquid Depth — restrained 3D glass accents for the editorial theme.
 * This layer is intentionally additive: removing this file restores the
 * underlying site without changing its layout or content.
 */

:root {
  --ld-navy: 25, 34, 48;
  --ld-blue: 68, 91, 135;
  --ld-coral: 169, 102, 83;
  --ld-gold: 185, 154, 89;
  --ld-paper: 242, 239, 232;
  --ld-ease: cubic-bezier(.2, .78, .16, 1);
}

body.liquid-depth {
  cursor: auto;
}

/* Ambient sculptural forms: visible as atmosphere, never as content boxes. */
.liquid-depth-ambient {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.liquid-depth-blob {
  position: absolute;
  display: block;
  width: clamp(260px, 32vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--ld-paper), .3);
  border-radius: 46% 54% 61% 39% / 37% 42% 58% 63%;
  opacity: .14;
  background:
    radial-gradient(circle at 27% 20%, rgba(255,255,255,.72), transparent 15%),
    radial-gradient(circle at 65% 72%, rgba(var(--ld-blue),.42), transparent 50%),
    linear-gradient(145deg, rgba(var(--ld-paper),.28), rgba(var(--ld-blue),.16) 52%, rgba(var(--ld-coral),.15));
  box-shadow:
    inset 18px 20px 54px rgba(255,255,255,.23),
    inset -24px -26px 66px rgba(var(--ld-navy),.18),
    0 24px 70px rgba(var(--ld-navy),.08);
  transform: translate3d(0,0,0);
  will-change: transform, border-radius;
}

.liquid-depth-blob::after {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 53% 47% 42% 58% / 58% 39% 61% 42%;
  content: "";
}

.liquid-depth-blob--one {
  top: -14%;
  right: -9%;
  animation: liquid-depth-drift-one 18s ease-in-out infinite alternate;
}

.liquid-depth-blob--two {
  bottom: -20%;
  left: -10%;
  width: clamp(300px, 38vw, 720px);
  opacity: .1;
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,.54), transparent 16%),
    radial-gradient(circle at 70% 60%, rgba(var(--ld-coral),.38), transparent 52%),
    linear-gradient(150deg, rgba(var(--ld-paper),.2), rgba(var(--ld-gold),.14) 55%, rgba(var(--ld-blue),.1));
  animation: liquid-depth-drift-two 22s ease-in-out infinite alternate;
}

@keyframes liquid-depth-drift-one {
  0% { transform: translate3d(0,0,0) rotate(-8deg) scale(1); border-radius: 46% 54% 61% 39% / 37% 42% 58% 63%; }
  55% { transform: translate3d(-3vw,4vh,0) rotate(4deg) scale(1.04); border-radius: 55% 45% 42% 58% / 46% 61% 39% 54%; }
  100% { transform: translate3d(-1vw,8vh,0) rotate(12deg) scale(.97); border-radius: 39% 61% 52% 48% / 57% 43% 57% 43%; }
}

@keyframes liquid-depth-drift-two {
  0% { transform: translate3d(0,0,0) rotate(7deg) scale(.96); border-radius: 51% 49% 41% 59% / 45% 58% 42% 55%; }
  60% { transform: translate3d(5vw,-3vh,0) rotate(-5deg) scale(1.04); border-radius: 42% 58% 57% 43% / 62% 38% 62% 38%; }
  100% { transform: translate3d(2vw,-7vh,0) rotate(-11deg) scale(1); border-radius: 58% 42% 49% 51% / 42% 54% 46% 58%; }
}

/* A fine refractive edge for the navigation, without creating another box. */
body.liquid-depth .site-header {
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(var(--ld-navy),.08),
    0 20px 58px rgba(var(--ld-navy),.11);
}

body.liquid-depth .site-header::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(420px 80px at 18% -20%, rgba(255,255,255,.66), transparent 62%),
    linear-gradient(105deg, transparent 18%, rgba(255,255,255,.18) 45%, transparent 70%);
  content: "";
  pointer-events: none;
  opacity: .72;
}

body.liquid-depth .site-header > * {
  position: relative;
  z-index: 1;
}

/* Refractive surfaces follow the pointer locally, not as a custom cursor. */
body.liquid-depth .ld-surface {
  --ld-x: 68%;
  --ld-y: 18%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.liquid-depth .ld-refraction {
  position: absolute;
  z-index: 8;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(280px circle at var(--ld-x) var(--ld-y), rgba(255,255,255,.42), rgba(255,255,255,.11) 22%, transparent 52%),
    linear-gradient(125deg, rgba(255,255,255,.14), transparent 30% 68%, rgba(var(--ld-blue),.12));
  content: "";
  mix-blend-mode: soft-light;
  opacity: .18;
  pointer-events: none;
  transition: opacity 360ms var(--ld-ease);
}

body.liquid-depth .ld-surface[data-liquid-active="true"] .ld-refraction {
  opacity: .7;
}

body.liquid-depth .ld-surface img {
  transition: filter 500ms var(--ld-ease), transform 700ms var(--ld-ease);
}

body.liquid-depth .ld-surface[data-liquid-active="true"] img {
  filter: saturate(1.025) contrast(1.015);
}

/* Images gain depth at the edge; no cropping, stretching or shape mutation. */
body.liquid-depth .reel-frame,
body.liquid-depth .project-cover,
body.liquid-depth .case-visual,
body.liquid-depth .case-gallery-frame,
body.liquid-depth .project-index-visual {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(var(--ld-navy),.12),
    0 26px 62px rgba(var(--ld-navy),.14);
}

body.liquid-depth .hero-signature {
  box-shadow:
    inset 18px 18px 38px rgba(255,255,255,.18),
    inset -20px -22px 46px rgba(var(--ld-blue),.16),
    0 34px 76px rgba(var(--ld-navy),.16);
}

body.liquid-depth .profile-portrait-frame {
  outline: 1px solid rgba(var(--ld-blue),.28);
  outline-offset: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 0 0 16px rgba(255,255,255,.08),
    0 30px 72px rgba(var(--ld-navy),.16);
}

/* Liquid highlight for existing actions—shape and typography stay intact. */
body.liquid-depth .ld-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.liquid-depth .ld-action-glow {
  position: absolute;
  z-index: 0;
  top: -80%;
  bottom: -80%;
  left: -48%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg) translateX(-130%);
  transition: transform 760ms var(--ld-ease);
}

body.liquid-depth .ld-action:hover .ld-action-glow,
body.liquid-depth .ld-action:focus-visible .ld-action-glow {
  transform: rotate(18deg) translateX(520%);
}

body.liquid-depth .ld-action > span:not(.ld-action-glow) {
  position: relative;
  z-index: 1;
}

/* Editorial headings retain their serious tone with a controlled optical lift. */
body.liquid-depth :is(.hero-main h1, .projects-intro-copy h1, .cv-intro-heading h1, .case-hero h1, .services-hero h1, .contact-page-hero h1, .profile-identity h1) {
  text-shadow: 0 16px 42px rgba(var(--ld-navy),.08);
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .liquid-depth-ambient { z-index: 1; }
  .liquid-depth-blob { width: min(76vw, 420px); opacity: .09; animation-duration: 28s; }
  .liquid-depth-blob--one { top: -7%; right: -28%; }
  .liquid-depth-blob--two { bottom: -11%; left: -34%; }
  body.liquid-depth .ld-refraction { opacity: .12; }
  body.liquid-depth .profile-portrait-frame { outline-offset: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-depth-blob { animation: none !important; }
  body.liquid-depth .ld-refraction,
  body.liquid-depth .ld-action-glow,
  body.liquid-depth .ld-surface img { transition: none !important; }
}

@media (forced-colors: active) {
  .liquid-depth-ambient,
  body.liquid-depth .ld-refraction,
  body.liquid-depth .ld-action-glow { display: none !important; }
}