/* ==========================================================================
   glade.css  -  the moonlit glade (markup: glade.php, moon and branches: js/glade.js)
   Tune the look with the three strengths and the night colour below.
   Lower a number to make that layer quieter.
   ========================================================================== */
:root {
  --glade-night:  #06142b;   /* the midnight blue at the edges */
  --glade-trunk:  .8;        /* trunks and bark */
  --glade-branch: .55;       /* overhanging branches */
  --glade-moon:   .6;        /* moon and its glow */
}
html.no-glade #ny-glade { display: none; }

#ny-glade { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* Moon: JS moves .gl-moon down the screen as the page scrolls. */
.gl-moon { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: var(--glade-moon);
  transform: translate3d(50vw, 12vh, 0); transition: transform 1.6s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.gl-halo { position: absolute; left: -60vmax; top: -60vmax; width: 120vmax; height: 120vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 200, 240, .17) 0%, rgba(110, 160, 210, .09) 18%, rgba(70, 120, 175, .04) 36%, transparent 58%); }
.gl-disc { position: absolute; left: calc(var(--moon-r, 40px) * -1); top: calc(var(--moon-r, 40px) * -1); width: calc(var(--moon-r, 40px) * 2); height: calc(var(--moon-r, 40px) * 2); border-radius: 50%;
  background: radial-gradient(circle, #f4f8ff 0%, #dbe7f7 45%, rgba(190, 212, 240, .85) 70%, rgba(150, 185, 225, 0) 100%);
  box-shadow: 0 0 60px 26px rgba(170, 205, 245, .3), 0 0 150px 70px rgba(120, 170, 225, .17); filter: blur(5px); opacity: .95; }
/* Mist: soft cloud banks drift slowly across the orb, so it glows through them. */
.gl-cloud { position: absolute; left: calc(var(--moon-r, 40px) * -2.6); top: calc(var(--moon-r, 40px) * -1.1); width: calc(var(--moon-r, 40px) * 5.2); height: calc(var(--moon-r, 40px) * 2.2); filter: blur(8px); will-change: transform, opacity;
  background:
    radial-gradient(ellipse 34% 40% at 28% 55%, rgba(165, 190, 222, .8), transparent 72%),
    radial-gradient(ellipse 30% 36% at 52% 42%, rgba(180, 203, 232, .75), transparent 72%),
    radial-gradient(ellipse 36% 38% at 74% 58%, rgba(160, 188, 220, .75), transparent 72%),
    radial-gradient(ellipse 60% 26% at 50% 66%, rgba(145, 176, 212, .6), transparent 78%); }
.gl-cloud-a { animation: gl-mist-a 46s ease-in-out infinite alternate; }
.gl-cloud-b { top: calc(var(--moon-r, 40px) * -0.4); width: calc(var(--moon-r, 40px) * 6); left: calc(var(--moon-r, 40px) * -3); opacity: .85; animation: gl-mist-b 62s ease-in-out infinite alternate; }
.gl-cloud-c { top: calc(var(--moon-r, 40px) * -1.7); height: calc(var(--moon-r, 40px) * 2); opacity: .75; animation: gl-mist-c 54s ease-in-out infinite alternate; }
@keyframes gl-mist-a { from { transform: translate3d(-24%, 4%, 0); } to { transform: translate3d(22%, -6%, 0); } }
@keyframes gl-mist-b { from { transform: translate3d(24%, -2%, 0); opacity: .5; } to { transform: translate3d(-22%, 6%, 0); opacity: .85; } }
@keyframes gl-mist-c { from { transform: translate3d(-22%, 0, 0); opacity: .45; } to { transform: translate3d(26%, 8%, 0); opacity: .8; } }
:root { --moon-r: clamp(34px, 5vw, 52px); }

/* Ombre: midnight blue closes in from the edges and corners. */
.gl-ombre { position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 38%, transparent 52%, rgba(6, 20, 43, .55) 100%),
    linear-gradient(90deg, var(--glade-night) 0, rgba(6, 20, 43, .78) 7%, rgba(6, 20, 43, 0) 24%, rgba(6, 20, 43, 0) 76%, rgba(6, 20, 43, .78) 93%, var(--glade-night) 100%); }

/* Trunks: bark texture is drawn by the filter in glade.php. */
.gl-trunk { position: absolute; top: 0; height: 100%; width: clamp(64px, 26vw, 440px); opacity: var(--glade-trunk);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 100%); }
.gl-trunk-l { left: 0; }
.gl-trunk-r { right: 0; transform: scaleX(-1); }

/* Branches: JS draws these into the two corner SVGs. */
.gl-branch { position: absolute; top: 0; width: clamp(220px, 46vw, 760px); height: auto; aspect-ratio: 600 / 420; opacity: var(--glade-branch); }
.gl-branch-l { left: 0; }
.gl-branch-r { right: 0; transform: scaleX(-1); }
.gl-branch path { fill: none; stroke: #04101f; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 700px) {
  .gl-ombre { background:
    radial-gradient(150% 100% at 50% 38%, transparent 58%, rgba(6, 20, 43, .5) 100%),
    linear-gradient(90deg, var(--glade-night) 0, rgba(6, 20, 43, .7) 5%, rgba(6, 20, 43, 0) 15%, rgba(6, 20, 43, 0) 85%, rgba(6, 20, 43, .7) 95%, var(--glade-night) 100%); }
  .gl-trunk { width: clamp(48px, 17vw, 90px); }
  .gl-branch { width: clamp(180px, 60vw, 300px); }
  :root { --glade-trunk: .75; --glade-branch: .5; }
}
@media (prefers-reduced-motion: reduce) { .gl-moon { transition: none; } .gl-cloud { animation: none; } }