/*
   css by elysia fae, coded by hand, 2025

   yay
 
 */
 @property --blur {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hslOpac {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.4;
}
 :root {
    
    /* variables unrelated to theme */
    --mainFont: clamp(14px, 20PX, 24px);
    --headFont: clamp(25px, 10%, 40px);
    --subFont: clamp(10px, 15px, 20px);
    --subberFont: clamp(8px, 10px, 11px);
    interpolation-size: allow-keywords;

    --system-theme: theme-light;
    --para-bg: url("../imgs/bgs/gardens-light.webp");
    --bubble-mask: radial-gradient(15.37px at 50% 21.60px, #000 99%, #0000 101%) 50% 0/48px 100%, radial-gradient(15.37px at 50% -9.6px, #0000 99%, #000 101%) calc(50% - 24px) 12px/48px 100% repeat-x;
    
    
    animation: var(--manual-theme, var(--system-theme))
        0s infinite paused both;
}
:root:has(#theme-light:checked) {
    --manual-theme: theme-light;
}
:root:has(#theme-dark:checked) {
    --manual-theme: theme-dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --system-theme: theme-dark;
    }
    
}
:root {
    
    /* light mode */
    --cursor: url("../storage/icons/Pointer/Red\ Bow.cur"), default;
    --mainBg: #e8e3df;
    --mainBgAccent:hsl(0, 0%, 83.9%, var(--hslOpac));
    --captionBg: ;
    --bodyimageBg:  url(../storage/images/11716339_66c48.gif);
    --subBg: rgba(253, 216, 168, 0.54);
    --vignetteBg: hsla(0, 0%, 100%, 0.25);
    --mainFg: #ffe7e7;
    --headFg: black;
    --h1Shadow: 2px 2px 5px purple, 2px 2px aliceblue, -1px -0.5px 16px #fff1a4;
    --vignetteShadow: 0 0 200px #ffffff inset;
    --secShadow: ;
    --secBorderImage: url(../storage/images/borders/flowerssmol.png);
    
    --aFg: ;
    --aBg: ;
    

    --color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
    :root {
        --bodyimageBg:  url("../storage/images/11716339_66c48still.gif");

    }
    
}
/* ----- animations ------- */
@keyframes theme-dark {
    to {
        /* dark mode */
        --cursor: url("../storage/icons/Pointer/Ibuki.cur"), default;
        --mainBg: black;
        --mainBgAccent: hsl(240, 6.4%, 18.4%, var(--hslOpac));
        --bodyimageBg: url(../PICTURES/inspiration/inspiration_images/compressed/milkyWAY.JPG);
        
        --subBg: rgba(132, 32, 65, 0.709);
        --vignetteBg: hsla(332, 33%, 57%, 0);
        --vignetteShadow:0 0 200px #933434cc inset;
        --secShadow:1px 1px 16px orangered;
        --secBorderImage: url();
        --mainFg: #d1d1d1;
        --headFg: #d1d1d1;
        --color-scheme: dark;
        
    }
}
@keyframes fade-in {
    from {
      --blur: 10;
      opacity: 0;
      pointer-events: none;
    }
    to {
      --blur: 0;
      opacity: 1;
      pointer-events: initial;
    }
  }
@keyframes fade-out {
    from {
      --blur: 0;
      opacity: 1;
    }
    to {
      --blur: 10;
      opacity: 0;
    }
  }
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll())  {
        @keyframes choo-choo {
    
            from {
                transform: translateX(calc(-0% - 30vw));
              }
              to {
                transform: translateX(calc(200% + 30vw));
              }
        }
        
    }
    @keyframes pop-out-btn {
        0% {transform: translateX(0rem);}
        5% {transform: translateX(2rem);}
        25% {transform: skew(15deg) rotate(15deg);}
        35% { }
        55% { scale: 1; filter: brightness(1);}
        60% {}
        70% {transform: rotate(-400deg)  skew(0deg);}
        90% {
            
        }
        100% {
            filter: brightness(2);
            scale: 2;
            transform: rotate(270deg);
            
        }
        
    }
    @keyframes pop-back {
        from { scale: 2;}
        to {
            rotate: 1080deg;
            scale: 1;
            
        }
    }
    @keyframes choo-choo {
        /* just goes across screen like marquee with no scrol anim suppport */
        from {
            transform: translateX(calc(-0% - 30vw));
          }
          to {
            transform: translateX(calc(200% + 30vw));
          }
    }
    @keyframes slide-right {
        0%{
            translate: -100svw 0px;
        }
        100% {
            translate: 0svw 0px;
        }
    }
    @keyframes pop-down {
        0%, 55%, 60%, 100% {
            border-radius: 85px 85px 85px 85px;
            transform: skewY(0px);
        }
        0% {
            translate: 0% -100%;
            scale: 0.5 1;
        }
        20% {
            translate:0% -20%;
            scale: 1 1;
            border-radius: 40px 40px 85px 85px;
        }
        40% {
            translate:0% -20%;
            scale: 1 1;
            border-radius: 40px 40px 85px 85px;
        }
        /* 55% {
            translate: 0% 100%;
            scale: 0.5 1;
            
        } */
        75% {
            translate: 0% 130%;
            scale: 0.5 1;
            transform: skewY(10px);
        }
        /* 85% {
            translate: 0% 110%;
            scale: 0.5 1; 
        } */
        100% {
            translate:0% -15%;
            scale: 1 1;
            /* border-radius: 85% 85% 85% 85% ; */
        }
    }
    @supports not (animation-timeline: scroll()) {
        .rail img {

            animation-duration: 30s !important;
            animation-iteration-count: infinite !important;
            animation-direction: alternate-reverse !important;
            animation-fill-mode: initial !important;
        }
    }
    
}




.appears {
    /* commented out purely for bg fixed lol?? */
  /* filter: blur(calc(var(--blur) * 1px)); */
  animation: fade-in forwards 1s ease-out;
}
.disapears {
  filter: blur(calc(1px * var(--blur)));
  animation: fade-out forwards 0.4s ease-in-out;
  pointer-events: none;
}
.slide-right {
    animation: slide-right forwards 1s ease;
}
.pop-down {

    animation: pop-down forwards .7s cubic-bezier(0, 0.8, 0.52, 1.48);
    animation-delay: calc( (var(--index) / 2 + 1)  * 1s );
}


/* globals */
@font-face{
    font-family: Strawberry;
    src:url("../font/Strawberry.woff");
    font-weight:400;
    font-style:normal;
    font-display:swap
}   
@font-face {
    font-family: "Allura";
    src: url("../font/Allura-Regular.woff2");
}
/* things that only appear for screenreaders.. */
.sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	
}

img {
    max-width: 100%;
    max-height: 100%;
    animation: fade-in forwards 1s ease-out;
}

 .fullscreen-bg {
    animation: none;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    background: var(--para-bg);
    background-size: 150%;
background-position: right;
    filter: blur(5px);
    position: fixed;
}
html {
    scroll-behavior: smooth;
}
a, a:visited {
    

}
body {
    
    line-height: 2;
    display: grid;
    grid-template-rows: ;
    color: var(--mainFg);
    font-family: "Strawberry";
    letter-spacing: 1.5;
    margin: 0px;
    font-size: var(--headFont);
}
*:not(header) a, *:not(header) a:visited{
    color: var(--headFg);
    text-decoration: underline 2px solid;
    color: var(--mainFg);
        text-shadow: 2px 3px 5px red, 5px 5px 10px orange;
    transition: filter 1s ease;
    filter: brightness(1);
    &:hover {
        filter: brightness(2);
    }
}
button {
    padding: 1em;
}
.cara-scroll {
    background: black;
    border: white;
    position: absolute;
    /* max-width: fit-content; */
    min-height: 10svw;
    /* max-height: 5svh; */
    aspect-ratio: 1;
    padding: 1em;
    cursor: pointer;
    z-index: 10;
    top: 50svh;
    bottom: 50svh;
    visibility: visible;
    mask-image: url(../imgs/flowermask1.png);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
   
}
.cara-scroll:is(.disapears) {
    pointer-events: none;
    cursor: none;
}
@media (pointer:coarse) {
    .cara-scroll {
        visibility: hidden;
    }
}
header:has(h1) {
    
    display: grid;
    grid-template-columns: 1fr repeat(2, 0.3fr);
    font-size: var(--subberFont);
    gap: 10px;
    text-align: center;
    position: absolute;
    inset: 0;
    bottom: unset;
    a, a:visited {
        color: var(--mainBg);
        text-decoration: none;
        text-shadow: 1px 1px 2px beige;
    }
    h1 {
        a, a:visited {
        color: var(--headFg);
        text-decoration: none;
        text-shadow: 1px 1px 2px beige;
        font-family: Allura;
        font-size: var(--headFont);
    }
    }
    --hslOpac:0.8;
        background-color: var(--mainBgAccent);
        
        box-shadow: 0px 5px 20px 20px var(--mainBgAccent);
    margin-top: -1.5em;
    padding: 1em 1.5em 0em;
    /* transition: all 0.3s ease; */
    
    button {
        all: unset;
        /* font-size: var(--subberFont); */
        --hue: calc((360 / 3 ) * var(--index));
        background-color: hsl(var(--hue) 100% 90%);
        color: var(--mainBg);
        translate: 0% -100%;
        cursor: pointer;
        @media (prefers-reduced-motion: reduced) {
            translate: 0px -5%;
            border-radius: 85px 85px 85px 85px;
        }
        transition: translate 1s ease;
        
        &:hover {
        translate: 0% 10%;
    }
        /* border-radius: 80%; */

    }
    button:hover {
        translate: 0% 10%;
    }
}
header:has(h2):nth-of-type(1) {
    font-size: var(--headFg);
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    color: var(--headFg);
    text-shadow: 2px 3px 5px red, 5px 5px 10px orange;
    h2 {
        margin: -1em 0px 1em;
    }
    & > span {
        scale: 1.5;
        justify-self: center;
        display: inline;
        display: flex;
        align-self: center;
        margin: -1em 0px 1em;
        a, a:visted {
            text-decoration: none;
            
                color: var(--mainBg);
            
        }
    }
}
h2 {
    
    /* make it firey */
}

main {
    
    .intro {
        margin: 0em 0svw;
        z-index: 1;
min-height: calc(80svh);
display: grid;
grid-template-rows: 1fr auto;
        .cara {
            transform-style: preserve-3d;
            position: relative;
            display: flex;
            & * {
                transform-style: preserve-3d;
                backface-visibility: visible;
                box-sizing: border-box;
            }
            ul {
                
                transform-style: preserve-3d;
                list-style-type: none;
                padding: 0;
                display: grid;
                grid-auto-flow: column;
                scroll-snap-type: x mandatory;
                
                /* container-type: inline-size; */
                overflow-x: scroll;
                perspective: 23cm;
                
                scroll-snap-stop: ;
                inline-size: 100cqi;
                place-items: center;
                scroll-padding: 10%;
                scrollbar-width: none;
                gap: 50cqi;
                scroll-behavior: smooth;
                height: 100%;
                &::before, &::after {
                    content: "";
    display: block;
    inline-size: 50cqi;
    height: 1px;
                }
            }
            ul li {
                margin: 0.8em 0px;
                
                inline-size: min(45ch, 90cqi);
                max-width: max-content;
                padding: clamp(0.3em, 5%, 10%);
                scroll-snap-align: center;
                position: relative;
                /* text align only works on inline elements i didnt feel like setting flex */
                text-align: center;
                background-color: rgba(255, 255, 255, 0.486);
                --roatation: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform-style: preserve-3d;
    border-radius: 15px;
   
                
    box-shadow: 0px 0px 20px 15px rgba(255, 255, 255, 0.486);
    transform: scaleX(1) scaleY(1) scaleZ(0.5) 
    rotateX(0deg) rotateY(0deg) rotateZ(0deg)
     translateX(0px) translateY(0px) translateZ(-17px)
      skewX(0deg) skewY(0deg);
    z-index: 4;
                a,a:visited {
                    text-decoration: none;
                    display: block;
                    filter: drop-shadow(1px 1px 10px black);
                   transform: scaleX(1) scaleY(1) scaleZ(1) 
                   var(--roatation) translateX(0px) 
                   translateY(0px) translateZ(50px) 
                   skewX(0deg) skewY(0deg) ;
                   transition: scale 0.3s ease, filter 0.3s ease; 
                   &:hover {
                    scale: 1.1;
                   }
                   @media (width < 600px) {
                           max-width: 75svw;
                           transform: rotate(0deg) translateX(0px) 
                      translateY(0px) translateZ(70px) 
                      skewX(0deg) skewY(0deg);
                       }
                }
                img {
                    /* height: clamp( 100px,  100%, 60svh); */
                    max-height: 60svh;
                    display: inline;
                    border-radius: 20px;
                    transform-style: preserve-3d;
                    will-change: transform;
                    
                }
            }
        }
    }
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    
    & > * {
        scroll-snap-align: center;
    }
}


.om-oss {
    
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.63)  100%);
    width: 100svw;
     mask: var(--bubble-mask);
    display: grid;
    grid-auto-flow: row;
    gap: 3em;
    hr {
        background-color:var(--mainFg);
        height: 10px;
        @media (width > 600px) {
            max-width: 90%;
        }
    }
    section {
        overflow-x: hidden;
        min-height: 5em;
        padding: 2em 1em; 
        text-wrap: pretty;
        @media (width > 600px) {
            padding: 2em clamp(1em, 20svw, 1000px);
        }
        img {
            display: flex`;
            max-width: 90%;
            justify-self: center;
            max-height: 500px;
        }
        border-radius: 10px;
        
        /* clamp(90svw, 5vw, 50%); */
        background-color: var(--mainBgAccent);
    }
}