/* =============================================================================
   liquid-glass.css — "liquid glass" treatment + 3D tilt for section cards/boxes
   Inspired by the Apple-style liquid-glass UI kit references.

   Opt-in classes (added in markup / gallery.js):
     .liquid       → the liquid-glass look:
                       • floating drop shadow + bright pillow rim (box-shadow)
                       • prismatic refraction tint bleeding through the glass
                       • a specular sheen that sweeps across on hover
                       • a soft glare that follows the cursor
                       • a 3D transform model that composes tilt + hover lift
     .liquid-tilt  → animations.js drives pointer 3D tilt + the glare position
                     (--rx/--ry/--gx/--gy). Desktop fine-pointer only.

   Tokens only · logical-prop safe · degrades cleanly under reduced motion.
   This file is linked LAST so it can refine earlier component hovers.
   ========================================================================== */

/* Register the animatable custom props with a TYPE. Without this, Chromium
   reads --rx/--ry once inside `transform` and won't re-substitute when JS
   updates them (the tilt would never move). Typed @property fixes that and
   also makes them smoothly interpolable. Unsupported browsers just fall back
   to the static (untilted) glass — a clean progressive enhancement. */
@property --rx           { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --ry           { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --liquid-lift  { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --liquid-scale { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --gx { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --gy { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }

/* ---------------------------------------------------------------------------
   Shared transform model.
   tilt (--rx/--ry) and hover lift (--liquid-lift) compose into ONE transform,
   so JS tilt and CSS hover never fight over the `transform` property.
   --------------------------------------------------------------------------- */
.liquid {
  position: relative;
  overflow: hidden;          /* clip the sheen sweep to the rounded shape */
  isolation: isolate;        /* keep the z-index:-1 layers inside the card  */

  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 0%;
  --liquid-lift: 0px;
  --liquid-scale: 1;

  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rx)) rotateY(var(--ry))
    translateY(var(--liquid-lift)) scale(var(--liquid-scale));

  box-shadow:
    var(--lg-float),
    inset 0 1px 1.5px var(--lg-rim),
    inset 0 0 0 1px var(--lg-rim-soft),
    inset 0 -16px 30px -22px var(--lg-rim);

  transition:
    transform var(--dur) var(--ease-cinematic),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  /* NOTE: no persistent `will-change` here — promoting 30+ glass layers
     permanently makes scrolling janky (the pinned hero appears to "stick").
     animations.js sets will-change only on the card being hovered/tilted. */
}
.liquid:hover { --liquid-lift: -8px; }

/* the goey gallery frame morphs its padding on hover — keep that transition */
.goey-item.liquid {
  transition:
    transform var(--dur) var(--ease-cinematic),
    box-shadow var(--dur) var(--ease-out),
    padding var(--dur) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   Prismatic refraction — soft brand-colored light bleeding through the glass.
   Only on translucent .glass cards (NOT the opaque goey gradient frames).
   --------------------------------------------------------------------------- */
.glass.liquid {
  background-color: var(--glass-bg);
  background-image:
    radial-gradient(75% 60% at 12% 0%,    var(--lg-tint-1), transparent 60%),
    radial-gradient(70% 55% at 100% 18%,  var(--lg-tint-2), transparent 55%),
    radial-gradient(85% 75% at 82% 100%,  var(--lg-tint-3), transparent 60%),
    radial-gradient(60% 55% at 0% 92%,    var(--lg-tint-4), transparent 55%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(155%);
  backdrop-filter: blur(var(--glass-blur)) saturate(155%);
}

/* Methodology timeline cards: client asked for a FLAT fill here — no liquid-glass
   gradient and no sheen/glare. Solid surface, keep the border/shadow + tilt. */
.timeline__card.glass.liquid {
  background-image: none;
  background-color: var(--surface-raised);
}
.timeline__card.liquid::before,
.timeline__card.liquid::after { display: none; }

/* Client request: Academic-stages cards + Vision/Mission cards must be a plain
   WHITE (theme surface) fill — NO gradient, NO sheen, NO shadow. */
.stages-card.glass.liquid,
.about__card.glass.liquid,
.axis-tile.glass.liquid {
  background-image: none;
  background-color: var(--surface-raised);
  box-shadow: none;
}
.stages-card.liquid::before, .stages-card.liquid::after,
.about__card.liquid::before, .about__card.liquid::after,
.axis-tile.liquid::before, .axis-tile.liquid::after { display: none; }

/* Contact form: client wants NO gradient — plain white fill, no liquid tint/sheen. */
.contact__form.glass.liquid,
.wa-form.glass.liquid {
  background-image: none;
  background-color: var(--surface-raised);
}
.contact__form.liquid::before,
.contact__form.liquid::after,
.wa-form.liquid::before,
.wa-form.liquid::after { display: none; }

/* ---------------------------------------------------------------------------
   Sheen sweep (::before) + cursor glare (::after).
   • On .glass cards they sit BEHIND the text (z-index:-1, kept inside by
     isolation) so contrast is never harmed.
   • On goey frames they sit ABOVE the image (z-index:1) — no text there.
   --------------------------------------------------------------------------- */
.glass.liquid::before,
.glass.liquid::after,
.goey-item.liquid::before,
.goey-item.liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* specular streak — parked off-edge, sweeps across on hover */
.glass.liquid::before,
.goey-item.liquid::before {
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, .55) 47%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-130%);
  transition: transform .9s var(--ease-out);
}
.glass.liquid:hover::before,
.goey-item.liquid:hover::before { transform: translateX(130%); }

/* glare — radial highlight at the cursor (position fed by animations.js) */
.glass.liquid::after,
.goey-item.liquid::after {
  background: radial-gradient(
    closest-side at var(--gx) var(--gy),
    rgba(255, 255, 255, .5),
    transparent 75%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.glass.liquid:hover::after,
.goey-item.liquid:hover::after { opacity: .6; }

.glass.liquid::before,
.glass.liquid::after { z-index: -1; }
.goey-item.liquid::before,
.goey-item.liquid::after { z-index: 1; }

/* ---------------------------------------------------------------------------
   Compose tilt with components that already declare a hover transform
   (value cards + axis tiles). Higher specificity routes them through the vars
   so the 3D tilt survives the hover state. Their box-shadow/border hovers,
   and the value-card accent ::after glow, are left untouched.
   --------------------------------------------------------------------------- */
.value-card.liquid:hover,
.axis-tile.liquid:hover {
  transform:
    perspective(1100px)
    rotateX(var(--rx)) rotateY(var(--ry))
    translateY(var(--liquid-lift)) scale(var(--liquid-scale));
}
.value-card.liquid:hover { --liquid-lift: -6px; }
.axis-tile.liquid:hover  { --liquid-lift: -6px; }

/* ---------------------------------------------------------------------------
   Dark theme — soften the bright white sweep/glare so it reads as cool light.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .glass.liquid::before,
[data-theme="dark"] .goey-item.liquid::before {
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, .26) 47%,
    rgba(255, 255, 255, 0) 60%
  );
}
[data-theme="dark"] .glass.liquid::after,
[data-theme="dark"] .goey-item.liquid::after {
  background: radial-gradient(
    closest-side at var(--gx) var(--gy),
    rgba(213, 172, 232, .42),
    transparent 75%
  );
}

/* ---------------------------------------------------------------------------
   Reduced motion / coarse pointer: keep a clean STATIC liquid glass —
   no tilt, no sweep; a faint centered glare is fine.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .liquid { transform: none; transition: box-shadow var(--dur) var(--ease-out); }
  .liquid:hover { --liquid-lift: 0px; }
  .value-card.liquid:hover,
  .axis-tile.liquid:hover { transform: none; }
  .glass.liquid::before,
  .goey-item.liquid::before { display: none; }
  .glass.liquid:hover::after,
  .goey-item.liquid:hover::after { opacity: .3; }
}