/* ==========================================================================
   Floating sacred-geometry layer
   --------------------------------------------------------------------------
   A decorative, non-interactive layer of sacred-geometry SVGs that sits behind
   the page content and drifts very slowly.

   Two things make it safe to put behind a whole storefront:

   1. It is inert. `pointer-events: none` and `aria-hidden` on the container mean
      it can never take a click or reach a screen reader.
   2. It never sits under text. sacred-shapes.js measures the real line boxes of
      every piece of text on the page and only places a shape in space that is
      genuinely empty, so nothing here needs to fight the content for legibility.

   The SVGs are applied as a MASK, not as an image, so the colour lives in CSS
   (`background-color`) and one file can be tinted per shape.

   Sizing, position, colour and the animation variables are all written by the
   JS. This file only describes how a shape behaves once it has been placed.
   Everything tunable lives in config/sacred_shapes.php.
   ========================================================================== */

/*
   The layer sits BEHIND the page content, and getting there needs one thing from
   the page itself.

   <html> on this storefront carries its own black background, which stops the body
   background propagating to the canvas. Body then paints its artwork as an ordinary
   in-flow block — and in the root stacking context that happens AFTER negative
   z-index layers. So a `z-index: -1` child of body sinks below the very artwork it
   is meant to decorate, which is why an earlier version of this layer was invisible
   and got reported as "disabled".

   Making body a stacking context fixes it: within one, the element's own background
   paints first, THEN its negative z-index children, THEN its content. The shapes
   land exactly where they belong — over the background image, under everything else.

   `isolation: isolate` is used rather than `position: relative; z-index: 0` on
   purpose: it creates the stacking context WITHOUT creating a containing block, so
   no absolutely-positioned element anywhere on the storefront shifts. The class is
   added by the JS, so a page with the layer switched off is untouched.
*/
.sg-isolated {
    isolation: isolate;
}

.sg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Height is set in px by the JS to match the full document, so the layer
       scrolls with the content instead of being pinned to one screen. */
    height: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;

    /* Behind every piece of page content, above the body's background artwork.
       See the .sg-isolated note at the top of this file — that rule is what makes
       this value work instead of burying the layer under the background image. */
    z-index: -1;

    /* The blend belongs on the LAYER, not on the shapes. This element is a stacking
       context, which isolates its children — a mix-blend-mode on a .sg-shape would
       blend against the layer's own empty backdrop and do nothing at all. Applied
       here, the whole field blends with the page behind it: `screen` lifts the
       geometry out of the dark template, `multiply` sinks it into the light one. */
    mix-blend-mode: var(--sg-blend, screen);
}

.sg-shape {
    position: absolute;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    /* `contain` keeps the whole figure inside its box. The SVG viewBoxes are
       cropped tight to the geometry, so the figure fills that box properly
       rather than floating in dead space. */
    -webkit-mask-size: contain;
    mask-size: contain;
    /* Fades in via .sg-shape--in once placed. A shape is only ever corrected
       while it is still transparent, so the reader never sees one move. */
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    will-change: transform;
    animation: sg-drift var(--sg-duration, 26s) ease-in-out var(--sg-delay, 0s) infinite;

    /* ══ DO NOT ROTATE THESE FIGURES ══
       Every shape stays upright, always. This is a client requirement, not a
       stylistic preference: these are sacred figures and showing one off its axis
       is held to be inauspicious. It is also how they read correctly — they are
       radially symmetric, so a Sri Yantra at 37 degrees just looks like a mistake,
       which is what an earlier "the details are bending" report was describing.

       Stated explicitly here so it survives future edits. The drift animation below
       translates on Y only, and nothing in sacred-shapes.js writes a rotation.
       Do not add `rotate`, and do not add a rotate() to any transform. */
    rotate: 0deg;
}

/* A slow vertical breath, nothing more — translate on Y, no rotation and no
   scale. Amplitude is capped by --sg-drift, and the placement test reserves that
   much extra clearance, so a shape at the far end of its travel still cannot
   touch text. See the rotation note on .sg-shape above before changing this. */
.sg-shape--in {
    opacity: var(--sg-opacity, 0.15);
}

/* A shape that has been built over is faded out rather than deleted mid-frame.
   Removing one outright is what "some of them are disappearing while scrolling"
   was: the shape simply blinked out of existence in front of the reader. */
.sg-shape--out {
    opacity: 0;
}

@keyframes sg-drift {
    0%,
    100% {
        transform: translate3d(0, calc(var(--sg-drift, 9px) * -0.5), 0);
    }

    50% {
        transform: translate3d(0, calc(var(--sg-drift, 9px) * 0.5), 0);
    }
}

/* Decoration is exactly the kind of motion people turn off. Hold every shape
   still at the midpoint of its travel — which is the position the placement
   test treated as the centre, so nothing shifts. */
@media (prefers-reduced-motion: reduce) {
    .sg-shape {
        animation: none;
        transform: none;
        transition: none;
    }
}