/* =====================================================================
   GrowForgeAI — TOPOGRAPHIC CONTOUR LAYER  (contours.css)
   ---------------------------------------------------------------------
   A quiet field of curvy iso-lines, tinted from the theme accent, that
   blends WITH the aurora mesh (not on top of it) to give the calm,
   mature design a sense of depth and "place".

   - Geometry lives in templates/includes/contours.html (generated).
   - Colour + opacity + motion + per-page placement all live here.
   - Per-page placement is driven by a single class on .aurora-bg:
       .ct-variant-field   (default — full-bleed, centred)
       .ct-variant-ridge   (concentrated up toward a hero)
       .ct-variant-corner  (hugs a corner, lots of negative space)
       .ct-variant-valley  (settles toward the lower half)
     set via {% block contour_variant %} in a page template.
   ===================================================================== */

:root {
    /* contour ink defaults to the house accent; pages may override via a vibe */
    --ct-rgb: var(--primary-rgb);
    --ct-stroke: 1.05px;

    /* per-depth alpha — light mode needs a touch more ink (lines wash out
       against the bright background otherwise); still atmosphere, not content */
    --ct-far-a:  0.09;
    --ct-mid-a:  0.15;
    --ct-near-a: 0.24;

    /* scroll-parallax offsets (set by JS, in px) */
    --ct-scroll-far: 0px;
    --ct-scroll-mid: 0px;
    --ct-scroll-near: 0px;
}

.dark-theme {
    --ct-far-a:  0.07;
    --ct-mid-a:  0.12;
    --ct-near-a: 0.2;
    --ct-stroke: 1px;
}
/* dark mode already glows against a dark field — keep the additive blend */
.dark-theme .contour-layer { mix-blend-mode: screen; }

/* ---------------------------------------------------------------------
   LAYER — sits inside .aurora-bg, between the mesh and the orbs in feel.
   The aurora-bg itself is z-index:0 / fixed; this just fills it.
   ------------------------------------------------------------------- */
.contour-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* light mode: multiply so the accent lines darken into the bright page and
       read as real detail instead of dissolving away */
    mix-blend-mode: multiply;
    /* base placement vignette — variants reposition this */
    -webkit-mask-image: radial-gradient(ellipse 120% 110% at 50% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 120% 110% at 50% 50%, #000 55%, transparent 100%);
    transition: opacity 0.6s ease;
}

.contour-svg {
    position: absolute;
    inset: -6%;            /* slight overscan so drift never reveals an edge */
    width: 112%;
    height: 112%;
    transform-origin: center center;
    animation: ctDrift 32s ease-in-out infinite alternate;
}

.ct-line {
    fill: none;
    stroke-width: var(--ct-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* depth groups — colour + alpha + their own slow drift & scroll shift */
.ct-far  .ct-line { stroke: rgba(var(--ct-rgb), var(--ct-far-a)); }
.ct-mid  .ct-line { stroke: rgba(var(--ct-rgb), var(--ct-mid-a)); }
.ct-near .ct-line { stroke: rgba(var(--ct-rgb), var(--ct-near-a)); }

/* Scroll-parallax rides on the independent `translate` property; the gentle
   wave below rides on `transform`. The two compose, so the field keeps
   undulating whether or not the page is scrolling. */
.ct-group { transition: translate 0.25s linear; }
.ct-far  { translate: 0 var(--ct-scroll-far);  animation: ctWaveFar  34s ease-in-out -4s  infinite alternate; }
.ct-mid  { translate: 0 var(--ct-scroll-mid);  animation: ctWaveMid  26s ease-in-out -11s infinite alternate; }
.ct-near { translate: 0 var(--ct-scroll-near); animation: ctWaveNear 21s ease-in-out -7s  infinite alternate; }

/* ---------------------------------------------------------------------
   MOTION — extremely slow breathing drift of the whole field
   ------------------------------------------------------------------- */
@keyframes ctDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-1.4%, 1%, 0) scale(1.02); }
    100% { transform: translate3d(1%, -1.2%, 0) scale(1.01); }
}

/* Per-depth gentle waving — tiny amplitudes, out-of-phase durations so the
   layers slide past one another. Not obvious at a glance; alive up close. */
@keyframes ctWaveFar {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0.5%, -0.35%, 0) rotate(0.12deg); }
    100% { transform: translate3d(-0.4%, 0.3%, 0) rotate(-0.1deg); }
}
@keyframes ctWaveMid {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-0.7%, 0.45%, 0) rotate(-0.16deg); }
    100% { transform: translate3d(0.6%, -0.4%, 0) rotate(0.14deg); }
}
@keyframes ctWaveNear {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0.9%, 0.5%, 0) rotate(0.2deg); }
    100% { transform: translate3d(-0.8%, -0.55%, 0) rotate(-0.18deg); }
}

/* =====================================================================
   PER-PAGE PLACEMENT VARIANTS
   The aurora-bg carries .ct-variant-*; we reposition the mask + field.
   ===================================================================== */

/* FIELD (default) — balanced full-bleed already set above. */

/* NOTE: placement transforms live on .contour-layer (NOT .contour-svg) — the
   svg carries the ctDrift animation, which would override any transform set on
   the same element. The layer is un-animated, so its transform is safe. */

/* RIDGE — pull the field upward and feather the lower half away, so the
   lines crest behind a hero and dissolve into the content below. */
.ct-variant-ridge .contour-layer {
    -webkit-mask-image: radial-gradient(ellipse 140% 90% at 50% 8%, #000 40%, transparent 78%);
    mask-image: radial-gradient(ellipse 140% 90% at 50% 8%, #000 40%, transparent 78%);
    transform: translateY(-5%);
}

/* CORNER — concentrate density toward the top-right, leaving calm negative
   space for text-led pages (about, contact, product detail). */
.ct-variant-corner .contour-layer {
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at 88% 12%, #000 30%, transparent 72%);
    mask-image: radial-gradient(ellipse 95% 95% at 88% 12%, #000 30%, transparent 72%);
    opacity: 0.92;
    transform: scale(1.12) translate(3%, -3%);
    transform-origin: 88% 12%;
}

/* VALLEY — settle the field into the lower half (footer-ward), good for
   long index/listing pages so the bottom doesn't feel empty. */
.ct-variant-valley .contour-layer {
    -webkit-mask-image: radial-gradient(ellipse 140% 95% at 50% 96%, #000 42%, transparent 80%);
    mask-image: radial-gradient(ellipse 140% 95% at 50% 96%, #000 42%, transparent 80%);
    transform: translateY(5%);
}

/* ---------------------------------------------------------------------
   BLEND TUNING — when contours and aurora share the screen, take a touch
   of intensity off the aurora so the two read as one calm system.
   ------------------------------------------------------------------- */
.aurora-bg .contour-layer ~ .aurora-grid,
.aurora-grid { opacity: 0.5; }

/* ---------------------------------------------------------------------
   REDUCED MOTION — honour the OS preference: hold everything still.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .contour-svg { animation: none; }
    .ct-group { transition: none; animation: none; }
    .ct-far, .ct-mid, .ct-near { transform: none; translate: none; }
}

/* Small screens — fewer lines visible anyway; ease density a hair. */
@media (max-width: 768px) {
    :root {
        --ct-far-a:  0.04;
        --ct-mid-a:  0.07;
        --ct-near-a: 0.11;
    }
}