:root {
    --as-blue: #38A4E0;
    --as-blue-tint: color-mix(in srgb, var(--as-blue) 10%, transparent);
    --text-subtle: oklch(70.8% 0 0);
}

html, body {
    min-height: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    min-height: 100vh;
}

body {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: right center;
    background-image: url('/images/cover-800.jpeg');

    --text-sm: .8rem;
}

.dark body {
    background-color: #000;
}

main.right {
    background-color: color-mix(in srgb, var(--bs-body-bg) 70%, transparent 100%);
    background-color: var(--bs-body-bg);
    border-left: 1px solid #000;
    width: 500px;
    padding: 0 2rem;
    min-height: 100vh;
    margin: auto;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.card.info {
    border-color: var(--as-blue);
    background-color: var(--as-blue-tint);
}

.btn-info-2 {
    background-color: var(--as-blue);
    font-weight: 600;
    color: black;
}

.btn-info-2:hover {
    background-color: color-mix(in srgb, var(--as-blue) 70%, transparent 50%);
}

.text-subtle {
    color: var(--text-subtle);
}

.fs-7 {
    font-size: .8rem;
}

.app-heading {
    font-weight: bold;
    font-size: 1rem;
}

@media (min-width: 640px) {
    main.right {
        width: 400px;
        padding: 0 2rem;
        margin: 0;
    }
}

/*@media (min-width: 768px) {

    main {
        width: 500px;
    }
}*/

@media (min-width: 1024px) {
    body {
        background-image: url('/images/cover-1200.jpeg');
    }
}

@media (min-width: 1280px) {
}

@media (min-width: 1536px) {
    body {
        background-image: url('/images/cover-1600.jpeg');
    }
}

@media (min-width: 1900px) {
    body {
        background-image: url('/images/cover-2000.jpeg');
    }
}

@media (min-width: 2500px) {
    body {
        background-image: url('/images/cover-2560.jpeg');
    }
}

a {
    text-decoration: none;
}

.btn-identity {
    display: flex;
    justify-content: center;
    column-gap: 1rem;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    font-size: .75rem;
}

.validation-summary-errors {
    background-color: var(--bs-surface-danger);
    color: var(--bs-body-color) !important;
    border-radius: var(--bs-border-radius);
    padding: var(--spacing-3) var(--spacing-1);

    > ul {
        list-style: square;
        margin: 0;
    }
}

.is-bg {
    /* heading metrics live here so .is-bg__horizon can be derived from them */
    --is-copy-top: clamp(56px, 8vh, 120px);
    --is-h1-size: clamp(30px, 2.6vw, 44px);
    --is-h1-leading: 1.15;
    --is-h1-lines: 2;
    --is-sub-size: 16px;
    --is-sub-leading: 1.6;
    --is-horizon-gap: 22px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #070a0e;
    /* own stacking context: keeps .is-bg__copy's z-index from escaping to the root */
    z-index: 0;
}

/* fine technical grid, faded toward the edges */
.is-bg__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(90% 80% at 30% 70%, #000 10%, transparent 80%);
    mask-image: radial-gradient(90% 80% at 30% 70%, #000 10%, transparent 80%);
}

/* blue light bloom, lower-left */
.is-bg__bloom {
    position: absolute;
    left: -12%;
    bottom: -28%;
    width: 70%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(45,150,255,.5), rgba(30,90,200,.16), transparent);
    filter: blur(30px);
}

/* amber → blue horizon line */
.is-bg__horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--is-copy-top) + var(--is-h1-lines) * var(--is-h1-size) * var(--is-h1-leading) + var(--is-horizon-gap));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,160,60,.75) 22%, rgba(120,200,255,.7) 62%, transparent);
    box-shadow: 0 0 30px rgba(255,150,50,.35);
}

/* edge darkening so the form panel stays readable */
.is-bg__vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 200px 40px rgba(3,5,9,.8);
}

/* broad ambient colour, amber low-left into blue centre-right */
.is-bg__wash {
    position: absolute;
    inset: 0;
    background: radial-gradient(1100px 820px at 58% 62%, rgba(36,140,255,.30), transparent 62%), radial-gradient(900px 720px at 10% 88%, rgba(255,138,32,.26), transparent 66%);
}

/* the big angled orange↔blue glow */
.is-bg__glow {
    position: absolute;
    left: -14%;
    top: 34%;
    width: 104%;
    height: 74%;
    border-radius: 50%;
    transform: rotate(-14deg);
    background: conic-gradient(from 210deg, rgba(255,150,40,.55), rgba(255,90,20,.18), rgba(40,140,255,.50), rgba(120,200,255,.35), rgba(255,150,40,.55));
    filter: blur(110px);
    opacity: .6;
}

.is-bg__copy {
    /* one rotation = --is-cycle; each slide holds the stage for --is-step */
    --is-cycle: 21s;
    --is-step: 7s;
    /* swap the transition: is-slide-fade or is-slide-push */
    --is-anim: is-slide-fade;
    position: absolute;
    z-index: 1;
    inset: var(--is-copy-top) clamp(400px, 32vw, 620px) 0 clamp(32px, 6vw, 88px);
    display: grid;
    pointer-events: none;
    font-family: 'Manrope', system-ui, sans-serif;
}

.is-bg__copy--push {
    --is-anim: is-slide-push;
}

/* every slide occupies the same cell, so they cross-fade in place */
.is-bg__slide {
    --is-shift: 18px;
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    animation: var(--is-anim) var(--is-cycle) linear infinite;
    will-change: transform, opacity;
    animation-delay: calc(var(--i) * var(--is-step));
}

    .is-bg__slide h1 {
        margin: 0;
        font-size: var(--is-h1-size);
        font-weight: 700;
        line-height: var(--is-h1-leading);
        letter-spacing: -0.02em;
        color: #f2f6fb;
        text-wrap: pretty;
    }

    .is-bg__slide p {
        margin: calc(var(--is-horizon-gap) * 2) 0 0;
        font-size: var(--is-sub-size);
        line-height: var(--is-sub-leading);
        color: #8d9aab;
    }

@keyframes is-slide-fade {
    0% {
        opacity: 0;
        transform: translateY(var(--is-shift));
    }

    5% {
        opacity: 1;
        transform: translateY(0);
    }

    28% {
        opacity: 1;
        transform: translateY(0);
    }

    /* fades out past the 33.3% hand-off point so the next slide cross-fades over it */
    38%, 100% {
        opacity: 0;
        transform: translateY(calc(var(--is-shift) * -1));
    }
}

/* horizontal carousel: exits left exactly as the next one enters from the right.
   Travel is 100vw so a slide is fully clear of the screen at both ends; the
   opacity gate covers the parked stretch, where the transform wraps back around. */
@keyframes is-slide-push {
    0% {
        opacity: 0;
        transform: translateX(100vw);
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
    }

    /* opacity leads the travel, so the slide is solid for most of its run */
    5% {
        opacity: 1;
    }

    8% {
        transform: translateX(0);
    }

    33.33% {
        opacity: 1;
        transform: translateX(0);
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
    }

    38% {
        opacity: 0;
    }

    41.33% {
        transform: translateX(-100vw);
    }

    /* re-arms on the right while fully transparent */
    41.34%, 100% {
        opacity: 0;
        transform: translateX(100vw);
    }
}

.is-bg__shot {
    padding-top: 20px;
    margin-top: clamp(20px, 3.5vh, 52px);
    width: min(100%, 1400px);
    
}

    .is-bg__shot img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.08);
        transform-origin: 0% 50%;
        transform: rotateY(22deg) scale(1.08);
        box-shadow: 24px 40px 80px rgba(0,0,0,.6), 0 0 100px rgba(40,140,255,.16);
        /* melt out toward the bottom and the receding right edge */
        -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, #000 55%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, #000 55%, transparent 100%);
        mask-composite: intersect;
    }

@media (max-width: 800px) {
    .is-bg__copy {
        display: none;
    }
}

/* the push deliberately does NOT degrade here; re-add
   .is-bg__copy--push { --is-anim: is-slide-fade; } to restore that */
@media (prefers-reduced-motion: reduce) {
    .is-bg__slide {
        --is-shift: 0px;
    }
}