/* ==========================================================================
   SimpliWealth — glassmorphism layer
   --------------------------------------------------------------------------
   Loaded AFTER site.css. Everything here is additive and purely visual:
   site.css is untouched, no copy changes, no markup changes beyond one
   <link> and one <script> per page. Delete those two lines and the site is
   exactly as it was.

   Two jobs:
     1. The animated backdrop (.bg-scene) built by assets/js/backdrop.js
     2. Turning the existing solid-white panels into frosted glass, so the
        backdrop reads through them instead of being hidden behind them
   ========================================================================== */

:root{
  --glass:        rgba(255,255,255,.56);
  --glass-strong: rgba(255,255,255,.74);
  --glass-line:   rgba(255,255,255,.68);
  --glass-blur:   blur(16px) saturate(150%);
  --glass-shadow: 0 18px 50px rgba(32,28,24,.08);
}

/* ==========================================================================
   1. BACKDROP
   Fixed behind everything, never interactive, deliberately faint. Icons are
   stroke-only at 5–10% opacity so body copy always wins the contrast fight.
   Only transform and opacity animate — nothing here triggers layout.
   ========================================================================== */

.bg-scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}

/* The colour wash the frosted panels refract. It lives on this fixed layer
   rather than on <body> so it stays put without background-attachment:fixed,
   which iOS handles badly. */
.bg-scene::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(760px 560px at 6% -4%,   rgba(239,25,99,.10),  transparent 62%),
    radial-gradient(680px 520px at 97% 6%,   rgba(78,112,214,.085),transparent 64%),
    radial-gradient(820px 640px at 46% 104%, rgba(239,25,99,.075), transparent 62%),
    radial-gradient(540px 430px at 78% 62%,  rgba(226,166,58,.06), transparent 66%);
}

/* Stroke styling for every icon in the scene. This has to be a CSS property
   rather than an attribute on the sprite: <use> shadow content inherits from
   the element that references it, not from where the symbol was defined. */
.bg-scene svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---- Soft frosted blobs drifting behind the icon systems ---- */
.bg-blob{
  position:absolute;
  width:var(--d,420px);
  height:var(--d,420px);
  left:var(--x,50%);
  top:var(--y,50%);
  margin:calc(var(--d,420px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 34% 32%,var(--c,rgba(239,25,99,.16)),transparent 66%);
  filter:blur(26px);
  animation:bgDrift var(--dur,64s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}

@keyframes bgDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(var(--dx,40px),var(--dy,-34px),0) scale(var(--sc,1.12))}
}

/* ---- Orbit systems: a family at the centre, life's costs circling it ---- */
.orbit{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  width:var(--size,320px);
  height:var(--size,320px);
  margin:calc(var(--size,320px) / -2);
}

.orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--core,74px);
  height:auto;
  transform:translate(-50%,-50%);
  color:var(--rose);
  opacity:.11;
  animation:coreBreathe var(--breathe,15s) ease-in-out infinite;
}

@keyframes coreBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);    opacity:.11}
  50%    {transform:translate(-50%,-50%) scale(1.06); opacity:.075}
}

/* The faint circular track the icons travel on */
.orbit-track{
  position:absolute;
  inset:var(--inset,14%);
  border:1px dashed rgba(27,28,30,.055);
  border-radius:50%;
}

.orbit-ring{
  position:absolute;
  inset:0;
  animation:orbSpin var(--dur,150s) linear infinite;
  will-change:transform;
}
.orbit-ring--rev{animation-direction:reverse}

@keyframes orbSpin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* Each seat on the ring: rotate to its angle, then push the icon outwards. */
.orb{
  position:absolute;
  inset:0;
  transform:rotate(var(--a,0deg));
}
.orb-pos{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%,-50%);
}

/* Counter-rotation, so a house never hangs upside down. These keyframes undo
   the seat angle AND the ring spin in one animation — --a is inherited from
   .orb, --dur from .orbit. */
.orb-fix{
  display:block;
  animation:orbFix var(--dur,150s) linear infinite;
  will-change:transform;
}
.orbit-ring--rev .orb-fix{animation-direction:reverse}

@keyframes orbFix{
  from{transform:rotate(calc(var(--a,0deg) * -1))}
  to  {transform:rotate(calc(var(--a,0deg) * -1 - 360deg))}
}

.orb-fix svg{
  display:block;
  width:var(--ic,34px);
  height:var(--ic,34px);
  color:var(--ink);
  opacity:.075;
}
.orb-fix svg.is-rose{color:var(--rose);opacity:.10}

/* ---- Free drifters: a few icons loose in the space between systems ---- */
.drift{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  color:var(--ink);
  opacity:.055;
  animation:driftFloat var(--dur,42s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}
.drift svg{display:block;width:var(--ic,30px);height:var(--ic,30px)}
.drift.is-rose{color:var(--rose);opacity:.075}

@keyframes driftFloat{
  from{transform:translate3d(0,0,0) rotate(-6deg)}
  to  {transform:translate3d(var(--dx,26px),var(--dy,-40px),0) rotate(6deg)}
}

/* ---- Content must always sit above the backdrop ---- */
/* Only the statically-positioned regions need lifting. The header (sticky,
   z-index 60) and the floating WhatsApp button (fixed, z-index 70) already
   clear the backdrop on their own — listing them here overwrote both their
   position and their stacking order, which dropped the open mobile menu
   behind <main> and knocked the WhatsApp button back into normal flow. */
main,
.site-footer{position:relative;z-index:1}

/* ---- Guards: motion off, and a lighter scene on small screens ---- */
@media (prefers-reduced-motion:reduce){
  .bg-blob,.orbit-ring,.orb-fix,.orbit-core,.drift{animation:none!important}
}
@media (max-width:980px){
  .orbit{opacity:.72}
  .orbit[data-tier="2"],.drift[data-tier="2"]{display:none}
}
@media (max-width:640px){
  .bg-scene .orbit{transform:scale(.8)}
  .bg-blob{filter:blur(20px)}
}

/* ==========================================================================
   2. FROSTED SURFACES
   site.css paints these solid white; here they become glass so the backdrop
   reads through. @supports keeps the original solid look on browsers without
   backdrop-filter, where translucency alone would just look washed out.
   ========================================================================== */

@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){

  .card,
  .contact-item,
  .about-card,
  .hero-panel{
    background:var(--glass);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border-color:var(--glass-line);
    box-shadow:var(--glass-shadow);
  }

  .hero-panel{
    background:linear-gradient(160deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.52) 46%,
      rgba(253,238,243,.62) 100%);
  }

  .section--paper{background:rgba(255,255,255,.44);border-block-color:var(--glass-line)}
  .section--warm {background:rgba(244,241,236,.46)}

  .strip{
    background:rgba(255,255,255,.52);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }

  .site-header{background:rgba(250,248,245,.60)}
  .site-header.is-stuck{background:rgba(250,248,245,.80)}

  .card:hover,
  .contact-item:hover{
    background:var(--glass-strong);
    border-color:rgba(255,255,255,.9);
  }
}