@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&display=swap');

/*? VARIABLES */
:root {
    --b: 35, 140, 200;
    --b2: 4, 97, 150;
    --y: 248, 245, 0;
    --g: 200, 242, 200;
    --blue: rgb(var(--b));
    --sand: rgb(202, 191, 174);
    --white: rgb(242, 240, 236);
    --frosting: 3px;
}

/*? CSS RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}

/*? COMMON */
.thick {
    font-weight: 850;
}

.thin {
    font-weight: 200;
}
.greentext {
    color: rgb(var(--g));
}
body {
    background-image: url('../_assets/textures/sand/sanddune.jpg');
    background-size: 368px;
    background-repeat: repeat;
}

.frosty-1 {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.frosty-2 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.frosty-3 {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.frosty-4 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.frosty-5 {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


* {
    font-family: "Inter", sans-serif;
    font-weight: 450;
    font-optical-sizing: auto;
    font-style: normal;
}


/*? INTRO */
#intro {
    display: grid;
    position: relative;
    grid-template-rows: 60% 1fr auto;
    color: var(--white);
    --cloud-dur: 2000s;
    --sun-dur: 4000s;
}

.intro-abs {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: -1;
}

#intro-sky,
#intro-atm {
    top: 0;
    height: 60%;
}

@property --tealalpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

#intro-deep {
    top: 60%;
    bottom: 0;
    --tealalpha: 0.6;
    background: radial-gradient(80% 40% at 80% 30px, color-mix(in srgb, teal, rgba(0,100,225,var(--tealalpha))), transparent 1000px);
    animation: 3s ease-in-out 0s infinite alternate waterblush;

}

@keyframes waterblush {
    0% {--tealalpha: 0.3; }
    100% {--tealalpha: 0.8;}
}

#intro-sandblock,
#intro-ocean {
    top: 60%;
    bottom: 0;
}

#intro-sun {
    top: 0;
    bottom: 0;
}



#intro-sky {
    --offset-x: 1250px;
    --offset-y: 980px;

    --bg-size: 1500px;
    background: white;
    background: url('../_assets/textures/clouds/cloud.png');
    background-size: var(--bg-size);
    background-repeat: repeat;
    animation: 2000s linear 0s infinite forwards sky;

    /*
    ~ cot: cotangent of angle, x/y, which texture moves along
    */
    --cot: 8;
    --len-x: calc(var(--bg-size) * var(--cot));
    --final-x: calc(var(--offset-x) - var(--len-x));
    --final-y: calc(var(--offset-y) - var(--bg-size));
}

@keyframes sky {
    0% {background-position: var(--offset-x) var(--offset-y);}
    100% {background-position: var(--final-x) var(--final-y);}
}

#intro-atm {
    background: linear-gradient(rgba(var(--b), 0.6),
            rgba(var(--b), 0.7) 60%,
            rgba(var(--b), 0.99) 80%,
            rgba(var(--b), 1) 99%,
            rgba(var(--b2), 1) 100%);
}

@property --wavepos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --deeppos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --foampos {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --foamalpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --wavealpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --deepalpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

#intro-ocean {
    --deeppos: 40%;
    --wavepos: 65%;
    --deepalpha: 0.9;
    --wavealpha: 0.6;
    background: linear-gradient(rgba(var(--b2), 1),
            rgba(var(--b2), var(--deepalpha)) var(--deeppos),
            rgba(var(--b2), var(--wavealpha)) var(--wavepos),
            transparent);
    animation: 
        7.5s ease-in-out 0s infinite alternate waved,
        15s ease-in-out 0s infinite alternate waves;
}

@keyframes waved {
    0% {--deeppos: 30%; --deepalpha: 1;}
    100% {--deeppos: 60%; --deepalpha: 0.8;}
}
@keyframes waves {
    0% {--wavepos: 55%; --wavealpha: 0.7;}
    100% {--wavepos: 85%; --wavealpha: 0.5;}
}

@property --foamsize {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 5%;
}

#intro-foam {
    bottom: 0;
    height: 40%;

    --foampos: 78%;
    --foamalpha: 0.35;
    --foamsize: 5%;

    background:
        linear-gradient(
            transparent 0%,
            transparent calc(var(--foampos) - var(--foamsize)),
            rgba(255,255,255,var(--foamalpha)) var(--foampos),
            transparent calc(var(--foampos) + var(--foamsize))
        );
    filter: blur(10px);
    mix-blend-mode: screen;

    animation: foamline 7.5s  ease-in infinite forwards;
}

@keyframes foamline {
    0% {
        --foampos: 30%;
        --foamalpha: 0.00;
        --foamsize: 25%;
    }
    60% {
        --foamalpha: 0.15;
    }
    75% {
        --foampos: 70%;
        --foamsize: 5%;
    }
    100% {
        --foampos: 80%;
        --foamalpha: 0.0;
        --foamsize: 9%;
    }
}









@property --sun-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --sun-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --sun-mag {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

#intro-sun { 
    --y: 255, 253, 106;
    --y2: 255, 253, 145;
    --y3: 255, 254, 178;
    --testy: rgb(248, 245, 109);
    --testy2: rgb(255, 253, 145);
    --testy3: rgb(255, 254, 178);
    --sun-x: 99%;
    --sun-y: 2%;
    --sun-mag: 1;

    background: radial-gradient(circle at var(--sun-x) var(--sun-y),
            rgba(var(--y), calc(var(--sun-mag) * 0.8)) 0.6%,
            rgba(var(--y), calc(var(--sun-mag) * 0.79)) 1.2%,
            rgba(var(--y), calc(var(--sun-mag) * 0.60)) 1.3%,
            rgba(var(--y), calc(var(--sun-mag) * 0.45)) 2%,
            rgba(var(--y), calc(var(--sun-mag) * 0.40)) 3%,
            rgba(var(--y2), calc(var(--sun-mag) * 0.36)) 5%,
            rgba(var(--y2), calc(var(--sun-mag) * 0.33)) 8%,
            rgba(var(--y3), calc(var(--sun-mag) * 0.30)) 13%,
            rgba(var(--y3), calc(var(--sun-mag) * 0.25)) 21%,
            rgba(var(--y3), calc(var(--sun-mag) * 0.10)) 34%,
            transparent 55%);
    animation: 3s ease-in-out 0s infinite alternate radiate;
}

@keyframes radiate {
    0% {--sun-mag: 1; }
    100% {--sun-mag: 1.3;}
}

#intro-text {
    color: white;

    padding: 10px;
}

#page-title-main {
    font-size: clamp(2rem, 1.5rem + 4vw, 5rem)
}

#page-title-sub {
    font-size: clamp(0.8rem, 0.5rem + 4vw, 3rem)
}

/*? SUBDOMAIN CHECK */
#url-check {
    font-size: clamp(0.8rem, 0.5rem + 4vw, 3rem);
    display: grid;
    gap: 10px;
    /* place-items: center; */
    /* grid-template-columns: auto 1fr auto; */
}

#url-input-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

input,
button {
    font-size: inherit;
    font: inherit;
}

#subdomain-check {
    width: min-content;
}

#go-bar {
    display: grid;
    grid-template-columns: 1fr auto;
}

button {
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
}


.input-wrapper {
    display: inline-grid;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    --minputsize: 0.2ch;
    grid-template-columns: minmax(var(--minputsize), min-content) auto;
}

.input-wrapper:has(input:focus) {
    --minputsize: 0.2ch;
    outline: 1px solid rgba(var(--y), 1);
}

.input-wrapper:has(input.errant) {
    outline-color: red;
    border-color: red;
    border-width: 2px;
    outline-width: 2px;
}

.input-wrapper:has(input:placeholder-shown) {
    --minputsize: 6.4ch;
}

.input-wrapper input,
.input-wrapper .shadow-text {
    grid-area: 1 / 1;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
    margin: 0;
}

.input-wrapper input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
}

.input-wrapper .shadow-text {
    /* Hide the span visually, but keep its width calculation active */
    visibility: hidden;
    /* Preserves typing spaces */
    white-space: pre;
}

.input-wrapper::after {
    grid-area: 1 / 2;
    content: attr(data-suffix);
    color: var(--blue);
    font-weight: bold;
    padding-left: 2px;
}


/*? LAYOUT */
.center-mat {
    width: 100%;
    display: grid;
    place-items: center;
}

.center-mat>* {
    max-width: 80%;
}

.center-ribbon {
    width: 100%;
    display: grid;
    place-items: center;
}

.center-ribbon>* {
    max-width: min(900px, 80%);
}

.sandblock {
    /* width: 100%;
    height: 100%;
    --t: rgb(245, 224, 194);
    background: linear-gradient(to right,
            transparent,
            var(--t) 10%,
            var(--t) 90%,
            transparent); */
}


/*? FOOTER */

#intro > footer {
    /* background-color: rgb(232, 212, 186); */
    color: black;
    padding: 2px;

    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 4px 0px;
    align-items: center;
    scroll-snap-align: end;
}

.hostname {
    font-style: italic;
    font-size: 0.5em;
    font-weight: 200;
}



/*? SCROLL SNAPPING / STICKY PANES */
.fillscreen {
    height: 100svh;
    max-height: 100svh;
    width: 100%;
}

html {
    overflow: auto;
    /* overflow: scroll; */
    /* scroll-snap-type: y mandatory; */
    scroll-snap-type: y proximity;
}

#intro,
#pagerow-1 {
    scroll-snap-align: start;
}

.frosted-card {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.card {
    padding: 20px;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
}