/* --- Variables --- */
@property --y-stretch {
    syntax: '<number>';
    initial-value: 2.5;
    inherits: true;
}

@property --scroll-fade-position {
    syntax: '<number>';
    initial-value: 1;
    inherits: true;
}

@property --x-stretch {
    syntax: '<number>';
    initial-value: 2.5;
    inherits: true;
}
@property --x-unstretch {
    syntax: '<number>';
    initial-value: 2.5;
    inherits: true;
}

@property --y-unstretch {
    syntax: '<number>';
    initial-value: 2.5;
    inherits: true;
}

body {
    --start-anim: 1.5s;
    --spin-time: 25s;
    --x-stretch: 2.5;
    --x-unstretch: calc(1/var(--x-stretch));
    --y-stretch: 0.5;
    --y-unstretch: calc(1/var(--y-stretch));

    --spin-direction: forwards;
    animation: camera-sweep-island-stretch var(--start-anim) ease-out 1;
    
}


@keyframes camera-sweep-island-stretch{
    0% {
        --y-stretch: 2;
        --y-unstretch: .5;
        --x-stretch: 2;
    }
    
    100%{
        --y-stretch: 0.5;

        --x-stretch: 2.5;

    }
}


@keyframes  title-fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


/* --- Sky Background Styles --- */
.sky-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%; /* Full viewport width, scrollbar-safe */
    height: 100vh; /* Full viewport height, persists through scroll */
    background-color: rgb(20, 20, 78);
    background-size: contain;
    image-rendering: pixelated;
    z-index: 0;
    animation: background-day-night 100s infinite var(--spin-direction);
}
/* Dithered bands over the sky color (see sky.js). The band tint is a lighter version of the sky color at
   each point of the day/night cycle, on the same 100s timeline as the sky itself. */
@property --sky-band-color{
    syntax: '<color>';
    inherits: true;
    initial-value: #9AD4F5;
}
.sky-bands{
    /* A page-tall layer that scrolls with the page (body is its containing block); the height is set by
       sky.js. It sits after the fixed sky in the page, so it paints over it and under the content. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    animation: sky-band-tint 100s infinite var(--spin-direction);
}
.sky-band{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* --band-pink (set by sky.js, 0% unless given) mixes in the dating sim pink, so the bottom bands tint toward
       the about section's palette while still following the day/night color */
    background-color: color-mix(in srgb, var(--sky-band-color), #ff9ecb var(--band-pink, 0%));
    opacity: var(--band-opacity);
    image-rendering: pixelated;
    /* The dither tile along the top edge, then solid for the rest of the band */
    -webkit-mask-image: url('../images/titleScreen/background/skyDitherLong.png'), linear-gradient(#000, #000);
    -webkit-mask-size: auto var(--dither-size), 100% calc(100% - var(--dither-size));
    -webkit-mask-position: 0 0, 0 var(--dither-size);
    -webkit-mask-repeat: repeat-x, no-repeat;
    mask-image: url('../images/titleScreen/background/skyDitherLong.png'), linear-gradient(#000, #000);
    mask-size: auto var(--dither-size), 100% calc(100% - var(--dither-size));
    mask-position: 0 0, 0 var(--dither-size);
    mask-repeat: repeat-x, no-repeat;
}

/* Holds the clouds and stars; scrolled by script for the parallax effect */
.sky-objects{
    /* Fixed like the sky, so only the parallax transform in island.js moves it. Clouds and stars below the
       screen overflow its bottom edge and scroll up into view (see skyElements.js). */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

.sky-object{
    position:relative;
    size: relative;
    z-index: 0;
    animation: cloud-scroll 30s linear var(--spin-direction);
    aspect-ratio: 1/1;
    image-rendering: pixelated;
}

.cloud{
    /* opacity: 0.8; */
    height: 16vh;
}

.small-star{
    height: 3.2vh;
}
.normal-star{
    height: 6.4vh;
}
.large-star{
    height: 12.8vh;
}

.waves {
    position: absolute;
    bottom: calc(100% - 1px); /* sits on water's top edge, the sky seam */
    left: 0%;
    height: min(5vh, 30px);
    width: 200%;
    background: url('../images/titleScreen/background/waves/wavesv5.png');
    background-size: auto 100%;
    animation: wave-scroll var(--spin-time) linear infinite var(--spin-direction);
    z-index: 1;
    image-rendering: pixelated;
}

.water {
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    background-image:linear-gradient(to bottom, rgba(10, 89, 132,1),rgb(6, 41, 60));
    animation: camera-sweep-water var(--start-anim) 1 ease-out;
    
}
/* The deep water runs on under the projects section (its height is set by island.js). It is part of the
   water rather than a separate background so the two can't round apart into a gap on phones, and fade as
   one layer instead of doubling up where they meet. */
.water::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--projects-height, 0px);
    background-color: rgb(6, 41, 60);
}
@keyframes camera-sweep-water {
    0% {
        height:100%;
    }
    100%{
        height: 50%;
    }
}

.fade-on-scroll{
    opacity: var(--scroll-fade-position);
}

/* --- Title Screen Styles --- */
.title-screen {
    position: relative;
    width: 100%;
    height: 100%;
    z-index:1;
    /* background: #87ceeb; Sky background */
    perspective: 800px; /* Add depth */
}

/* --- Island Styles --- */
.island {
    position: relative;
    aspect-ratio:  1/1;
    top: 40%;
    left: 50%;
    width: 30%;
    background-size: 300% 100%;
    background-image: url('../images/titleScreen/island/low-res-island-base-sheet.png');
    animation: 
        island-spin var(--spin-time) linear infinite var(--spin-direction),
        islandWavesSprite 2.5s steps(1) alternate infinite,
        camera-sweep-island-position var(--start-anim) 1;
    image-rendering: pixelated;
    z-index: 2;
}

@keyframes camera-sweep-island-position {
    0%{top: 100vh;}
}

@keyframes islandWavesSprite {
    0% {background-position: 0 0;}
    33% {background-position: 50% 0;}
    66% {background-position: 100% 0;}    
}

.offset-rotation {
    position: absolute;
    top: 20%;
    left: 50%;
    transform-origin: center;
    animation: anti-rotate var(--spin-time) linear infinite ;
}

/* --- Island Element Styles --- */
.island-element {
    position: absolute;
    image-rendering: crisp-edges;
}

/* title Image
It should bounce a compress
*/
@keyframes  titleBounce {
    0% {transform: translateY(0px) ;}
    50% {transform: translateY(50px);}
    100% {transform: translateY(0px) ;}
}
@keyframes  titleCompression {
    0% {transform: scaleY(100%);}
    50% {transform : scaleY(95%);}
    100% {transform: scaleY(100%);}
}

.title-squish-container{
    animation: titleCompression 4s ease-in-out infinite;
    height: 50%;
    width: auto;
}

.title-text{
    opacity: 0;
    animation: 
        titleBounce 5s ease-in-out infinite,
        title-fade-in var(--start-anim) ease-in 1  forwards;
    max-width: 90%;
}

.hidden {
    display: none
}

/* --- Keyframes --- */
@keyframes wave-scroll {
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(0);
    }
}
  

@keyframes cloud-scroll {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(150vw);
    }
}

@keyframes island-spin {
    0% {
        transform: translate(-50%, -50%) scale(var(--x-stretch), var(--y-stretch)) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(var(--x-stretch), var(--y-stretch)) rotate(360deg);
    }
}

@keyframes anti-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(calc(1/var(--x-stretch)), calc(1/var(--y-stretch)));
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg) scale(calc(1/var(--x-stretch)), calc(1/var(--y-stretch))); /* Full counter-rotation */
    }
}

@keyframes sky-band-tint{
    0%   { --sky-band-color: #9AD4F5; }
    25%  { --sky-band-color: #B58ACB; }
    50%  { --sky-band-color: #2E3B7A; }
    72%  { --sky-band-color: #8FA3D6; }
    90%  { --sky-band-color: #F7CFA0; }
    100% { --sky-band-color: #9AD4F5; }
}

@keyframes background-day-night{
    0%{
        background-color: #4FA8DE;
    }
    25%{
        background-color: #6C4F82;
    }
    50%{
        background-color: #131A3A;
    }
    72%{
        background-color: #4A5B8C;
    }
    90%{
        background-color: #E8A672;
    }
    100%{
        background-color: #4FA8DE;
    }
}






.title-container {
    position: absolute;
    top: -4%;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
    text-align: center;
  }

/* On narrow screens the title image is small, so the offset above would push part of it off the top */
@media (max-width: 700px) {
    .title-container {
        top: 4%;
    }
}

  .subtitle {
    font-size: 2rem; /* Adjust size to be smaller than the main title */
    color: #ffffff; /* White text */
    text-shadow: 2px 2px #333; /* Subtle shadow for contrast */
    font-weight: bold; /* Make it stand out */
    margin-bottom: 10px; /* Add spacing below the subtitle */
    z-index: 1000; /* Keep it above other elements */
    position: relative; /* Ensure it works with z-index */
    animation: float 3s ease-in-out infinite; /* Optional: same float animation as the title */
    text-transform: uppercase; /* Optional: make the text uppercase */
    letter-spacing: 2px; /* Optional: spacing between letters */
    text-align: center; /* Align to the center */
}



  .main-title {
    z-index: 1000; /* Matches the container's z-index */
    font-size: 3rem;
    color: #ffcd3c; /* Golden yellow */
    text-shadow: 4px 4px #a13f1e, 6px 6px #333; /* Purple + dark shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: float 3s ease-in-out infinite;
    position: relative; /* Prevent overlap issues */
}
  
  .subtitle {
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 2px 2px #333;
    margin-top: 10px;
  }
  

  
  /* Animations */
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }


  .scroll-hint {
    position: absolute;
    bottom: 20px; /* Distance from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment correction */
    font-size: 1.5rem; /* Smaller font size */
    color: #ffcd3c; /* Golden yellow to match the title */
    text-shadow: 2px 2px #9933ff, 3px 3px #333; /* Purple + dark shadow */
    font-weight: bold; /* Make it stand out */
    z-index: 1000; /* Keep it above background elements */
    animation: scroll-bounce 2s ease-in-out infinite; /* Add animation */
    text-align: center; /* Center the text */
    
}

.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}



/* Bounce Animation for Scroll Hint */
@keyframes scroll-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}