/* ============================================================
   ISOBEL — shared glass + shader layer
   Used by every page. Colours are the brand palette only
   (wine / black / pink / paper), mixed with transparency.
   ============================================================ */

:root{
  --glass-blur: blur(18px) saturate(150%);

  /* glass on dark (wine / black) */
  --glass-bg-dark:
    linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 42%, rgba(156,17,48,.12) 100%);
  --glass-edge-dark:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -22px 34px -28px rgba(237,110,149,.22),
    0 30px 60px -34px rgba(7,5,6,.9);

  /* glass on paper */
  --glass-bg-light:
    linear-gradient(155deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.55) 100%);
  --glass-edge-light:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(233,221,225,.95),
    0 26px 50px -32px rgba(90,8,25,.38);

  --ease-silk: cubic-bezier(.2,.7,.2,1);
}

[hidden]{ display:none !important; }

/* ---------- glass utilities ---------- */

.glass{
  background:var(--glass-bg-dark);
  box-shadow:var(--glass-edge-dark);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:0;
}
.glass--light{
  background:var(--glass-bg-light);
  box-shadow:var(--glass-edge-light);
}

/* Liquid refraction (liquid-glass-js technique): Chromium only,
   everyone else keeps the frosted blur above. */
.lg-svg .glass--liquid{
  -webkit-backdrop-filter:url(#isobel-liquid) blur(10px) saturate(160%);
  backdrop-filter:url(#isobel-liquid) blur(10px) saturate(160%);
}

/* pointer glare used by [data-tilt] cards */
[data-tilt]{ position:relative; }
[data-tilt]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(247,168,192,.16), transparent 45%);
  opacity:0; transition:opacity .4s ease;
}
[data-tilt]:hover::after{ opacity:1; }

/* ---------- shader gradient hosts ---------- */

[data-shader]{ position:relative; isolation:isolate; overflow:hidden; }
[data-shader] > .shader-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:0; transition:opacity 1.4s ease; pointer-events:none; display:block;
}
[data-shader] > .shader-canvas.is-on{ opacity:1; }
[data-shader] > :not(.shader-canvas):not(.orbs){ position:relative; z-index:1; }

/* ---------- film grain (very light) ---------- */

.grain{
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- headline word reveal ---------- */

.is-split .w{ display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .is-split .w{
    animation:wordIn 1s var(--ease-silk) both;
    animation-delay:calc(var(--i) * 55ms + .12s);
  }
  @keyframes wordIn{
    from{ opacity:0; transform:translateY(.55em) rotate(2deg); filter:blur(8px); }
    to{ opacity:1; transform:none; filter:blur(0); }
  }
}

/* ---------- soft floating orbs (CSS only, sit behind glass) ---------- */

.orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orbs i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(60px); opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .orbs i{ animation:orbDrift 22s ease-in-out infinite alternate; }
  .orbs i:nth-child(2){ animation-duration:28s; animation-direction:alternate-reverse; }
  .orbs i:nth-child(3){ animation-duration:34s; }
  @keyframes orbDrift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(6vw,-4vh) scale(1.15); }
  }
}

@media print{
  .grain, .orbs, .shader-canvas{ display:none !important; }
}