/* ============================================================
   SYBIL FIELD
   ------------------------------------------------------------
   The animated colour field used on the homepage and the
   engineering page. Two variants of the same markup:

     .is-soft       a wide blurred wash with a white floor
     .is-painterly  distinct modelled forms, colour to the edges

   Which one a visitor gets is decided in field.js. Everything
   here is driven by CSS custom properties so the two variants
   share one set of elements rather than duplicating markup.
   ============================================================ */

:root {
    --syb-pink:  #F966FA;
    --syb-lilac: #B7A4FA;
    --syb-blue:  #377EFA;
    --syb-ink:   #0227FA;
    --syb-mint:  #BEF8CB;
    --syb-sage:  #7BA59E;
    --syb-amber: #FABE66;
    --syb-red:   #FA2C01;
    --syb-lime:  #C8FA0E;
}

.sy-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #fff;
    pointer-events: none;
}

.sy-blobs { position: absolute; }

.sy-blobs span {
    position: absolute;
    display: block;
    border-radius: 50%;
    aspect-ratio: 1;
    will-change: transform;
}

.sy-veil, .sy-grain { position: absolute; inset: 0; pointer-events: none; }

.sy-grain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.35;
    mix-blend-mode: overlay;
}


/* ---- Variant: soft ---------------------------------------
   Colour pooled in the upper half behind a heavy blur, white
   rising from the bottom. Reads as paper with colour above it. */

.sy-field.is-soft .sy-blobs {
    inset: -45% -25% 25% -25%;
    filter: blur(90px);
    opacity: 0.9;
}

/* Pink-forward. Blue and ink previously took three of the five forms and
   dominated the frame; now pink carries two, lilac bridges, and the cool
   colours are reduced to a single small accent so there's still some depth
   without the whole field reading blue. */
.sy-field.is-soft .sy-blobs span:nth-child(1) { background: var(--syb-pink);  width: 76%; top: 2%;  left: -8%; }
.sy-field.is-soft .sy-blobs span:nth-child(2) { background: var(--syb-lilac); width: 64%; top: 18%; left: 30%; }
.sy-field.is-soft .sy-blobs span:nth-child(3) { background: var(--syb-pink);  width: 52%; top: 34%; left: 12%; opacity: 0.85; }
.sy-field.is-soft .sy-blobs span:nth-child(4) { background: var(--syb-blue);  width: 26%; top: 6%;  left: 64%; opacity: 0.45; }
.sy-field.is-soft .sy-blobs span:nth-child(5) { background: #000;             width: 30%; top: 26%; left: 68%; opacity: 0.22; }
/* The soft variant only uses five forms; the rest stay out of the way. */
.sy-field.is-soft .sy-blobs span:nth-child(n+6) { display: none; }

.sy-field.is-soft .sy-veil {
    background: linear-gradient(to bottom,
        rgba(255,255,255,0) 62%,
        rgba(255,255,255,0.22) 80%,
        rgba(255,255,255,0.55) 93%,
        rgba(255,255,255,0.78) 100%);
}

@media (max-aspect-ratio: 3/4) {
    /* The blob container's insets were tuned against a 16:10 box. On a tall
       portrait screen -45% is a huge pixel value, so most of the forms ended
       up above the viewport and the container was clipped at 75% height —
       which is why colour died out a third of the way down no matter what the
       veil did. Spread the container over nearly the whole screen instead,
       and widen it so the forms still overlap the edges. */
    .sy-field.is-soft .sy-blobs {
        inset: -14% -34% 4% -34%;
    }

    /* Their top values are all 2–34%, which on a landscape box spreads them
       across the frame but on a portrait one stacks them into the upper third.
       Re-spread down the screen so colour actually reaches the lower half. */
    .sy-field.is-soft .sy-blobs span:nth-child(1) { top: -2%; left: -14%; width: 68%; }
    .sy-field.is-soft .sy-blobs span:nth-child(2) { top: 20%; left: 30%; width: 60%; }
    .sy-field.is-soft .sy-blobs span:nth-child(3) { top: 46%; left: -6%; width: 56%; }
    .sy-field.is-soft .sy-blobs span:nth-child(4) { top: 10%; left: 56%; width: 44%; }
    .sy-field.is-soft .sy-blobs span:nth-child(5) { top: 58%; left: 42%; width: 50%; }

    /* Colour holds the top ~72% untouched, then falls away over the last
       quarter and never reaches full white. */
    .sy-field.is-soft .sy-veil {
        background: linear-gradient(to bottom,
            rgba(255,255,255,0) 72%,
            rgba(255,255,255,0.10) 82%,
            rgba(255,255,255,0.28) 90%,
            rgba(255,255,255,0.48) 96%,
            rgba(255,255,255,0.62) 100%);
    }
}


/* ---- Variant: painterly ----------------------------------
   Nine modelled forms — each a radial gradient pairing a light
   palette colour with a darker one, which is what gives them
   volume — at low blur so each reads as its own object. */

.sy-field.is-painterly { background: var(--syb-lilac); }

.sy-field.is-painterly .sy-blobs {
    inset: -14%;
    filter: blur(9px);
    opacity: 1;
}

.sy-field.is-painterly .sy-veil { display: none; }
.sy-field.is-painterly .sy-grain { opacity: 0.3; mix-blend-mode: multiply; }

.sy-field.is-painterly .sy-blobs span:nth-child(1) { width: 46%; top: -6%; left: -8%; border-radius: 62% 38% 54% 46% / 52% 60% 40% 48%;
    background: radial-gradient(circle at 34% 28%, var(--syb-pink) 0%, var(--syb-pink) 26%, var(--syb-ink) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(2) { width: 38%; top: 8%;  left: 32%; border-radius: 44% 56% 38% 62% / 60% 42% 58% 40%;
    background: radial-gradient(circle at 62% 30%, var(--syb-mint) 0%, var(--syb-mint) 24%, var(--syb-sage) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(3) { width: 42%; top: 44%; left: 4%;  border-radius: 55% 45% 62% 38% / 42% 58% 44% 56%;
    background: radial-gradient(circle at 30% 62%, var(--syb-blue) 0%, var(--syb-blue) 28%, var(--syb-ink) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(4) { width: 34%; top: -2%; left: 62%; border-radius: 38% 62% 46% 54% / 58% 40% 60% 42%;
    background: radial-gradient(circle at 58% 24%, var(--syb-lime) 0%, var(--syb-lime) 26%, var(--syb-sage) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(5) { width: 30%; top: 52%; left: 64%; border-radius: 58% 42% 40% 60% / 46% 54% 46% 54%;
    background: radial-gradient(circle at 40% 40%, var(--syb-amber) 0%, var(--syb-amber) 26%, var(--syb-red) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(6) { width: 36%; top: 56%; left: 28%; border-radius: 48% 52% 58% 42% / 55% 45% 55% 45%;
    background: radial-gradient(circle at 66% 44%, var(--syb-lilac) 0%, var(--syb-lilac) 26%, var(--syb-ink) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(7) { width: 32%; top: 18%; left: 70%; border-radius: 64% 36% 44% 56% / 40% 62% 38% 60%;
    background: radial-gradient(circle at 36% 60%, var(--syb-pink) 0%, var(--syb-pink) 24%, var(--syb-red) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(8) { width: 26%; top: 28%; left: 16%; border-radius: 52% 48% 62% 38% / 48% 56% 44% 52%;
    background: radial-gradient(circle at 50% 26%, var(--syb-mint) 0%, var(--syb-mint) 26%, var(--syb-blue) 100%); }
.sy-field.is-painterly .sy-blobs span:nth-child(9) { width: 28%; top: 64%; left: 46%; border-radius: 46% 54% 50% 50% / 58% 44% 56% 42%;
    background: radial-gradient(circle at 44% 56%, var(--syb-amber) 0%, var(--syb-amber) 24%, var(--syb-sage) 100%); }


/* ---- The mark --------------------------------------------
   No logo pixels are drawn. The mark is a mask, and the element
   behind it rotates the hue of whatever the field is showing —
   so colour moves to a neighbour rather than flipping to its
   opposite, and changes as the field drifts. The outline asset
   is layered back on top so the letterforms keep their edges. */

.sy-mark {
    /* It's a <span>, so without this it stays inline and both width and
       aspect-ratio are ignored — the mark collapses to nothing. */
    display: block;
    position: relative;
    width: clamp(190px, 46vw, 460px);
    aspect-ratio: 1.359;
    -webkit-mask-image: url('sybil-logo-transparent.png');
    mask-image: url('sybil-logo-transparent.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-backdrop-filter: hue-rotate(-45deg) saturate(1.15);
    backdrop-filter: hue-rotate(-45deg) saturate(1.15);
}

/* Inverted against the page. The field runs colour at the top and fades to
   white at the bottom; inside the mark it does the opposite, so the letters
   start white at their crown and drop into the shifted colour underneath.
   Clipped by the same mask as the element, so it only paints the letterforms. */
.sy-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.96) 0%,
        rgba(255,255,255,0.82) 22%,
        rgba(255,255,255,0.44) 48%,
        rgba(255,255,255,0.12) 72%,
        rgba(255,255,255,0) 90%);
}

/* Outline sits above the gradient so the linework stays crisp at the top
   where the white is heaviest. */
.sy-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('sybil-logo-outline.png') center / contain no-repeat;
}


/* ---- Home layout -----------------------------------------  */

.sy-home {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 1.25rem;
}

.sy-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 1rem;
}

.sy-actions a {
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}

.sy-actions svg {
    flex: none;
    opacity: 0.6;
    transition: opacity .2s ease, transform .35s ease;
}

.sy-actions a:hover svg,
.sy-actions a:focus-visible svg { opacity: 1; transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .sy-actions svg { transition: none; }
}