/*--
  © 2026 Nereus Games – http://nereus.games/
  ❤︎ Sharing is caring. Please share & reuse as you see fit.
  */


/* TODO define --wave per section once colors are settled (placeholder: white) */

main#home {
  --home-scale:                 clamp(1rem, .5rem + .83vmin, 1.4rem); /* single source for title + button; 13" sits on the 1rem floor, bigger screens grow */
  & section {
    --wave:                     var(--white);
    position:                   relative; /* anchor the wave SVG that script.js absolute-positions inside */
    }
  & .cta {
    background:                 var(--yellow);
    border:                     none;
    border-radius:              6px;
    color:                      var(--navy);
    cursor:                     pointer;
    display:                    inline-block;
    font-family:               inherit;
    font-size:                 1em; /* em, so the button rides each section's own scale */
    font-weight:               700;
    padding:                   .6em 1.4em;
    text-decoration:           none;
    transition:                transform .2s ease;
    &:hover, &:focus {
      transform:               scale(1.05);
      }
    }
  & #hero {
    padding-top:                5rem;
    }
  & #spiriquiz {
    align-items:                center;
    background:                 url('/assets/home/spiriquiz/pattern.png') center / auto repeat,
                                url('/assets/home/spiriquiz/wallpaper.png') center / cover;
    color:                      var(--white);
    display:                    flex;
    flex-direction:             column;
    font-size:                  var(--home-scale);
    justify-content:            center;
    min-height:                 80vh;
    text-align:                 center;
    & h1 {
      margin:                   0;
      }
    & h1 img {
      width:                    min(35em, 85vw); /* em follows the section scale; vw still guards narrow screens */
      }
    }
  & #spiritology {
    font-size:                  var(--home-scale); /* generic for now; give it a real layout when the section is built out */
    }
  & #makirama {
    & .layers {
      background:               url('/assets/home/makirama/01-d-wallpaper.webp') center / cover;
      display:                  grid;
      grid-template-rows:       1fr; /* full-height row for the cta to centre against */
      position:                 relative;
      overflow:                 hidden;
      height:                   max(80vh, 100vw * 900 / 1920);
      & > picture {
        display:                contents;
        }
      & img {
        position:               absolute; /* a grid item's % height can't resolve against an auto row */
        inset:                  0;
        width:                  100%;
        height:                 100%;
        object-fit:             cover;
        margin:                 0;
        }
      & > .cards {
        will-change:            transform, opacity;
        &.left {
          z-index:              1;
          transform:            translateX(var(--cards-left-x, 0));
          &.lit {
            opacity:            var(--cards-left-lit, 1);
            }
          }
        &.right {
          z-index:              3;
          transform:            translateX(var(--cards-right-x, 0));
          &.lit {
            opacity:            var(--cards-right-lit, 1);
            }
          }
        }
      & > .title {
        z-index:                2;
        }
      & > .cta {
        grid-area:              1 / 1;
        align-self:             center;
        justify-self:           center;
        font-size:              var(--home-scale);
        transform:              translateY(20vh); /* below the title; tune by eye */
        z-index:                4;
        }
      @media (max-width: 840px) {
        background:             url('/assets/makirama/wallpaper.png') center / auto repeat;
        & .cards {
          display:              none;
          }
        & .title {
          object-fit:           contain; /* show it whole; the scale offsets the file's transparent margin */
          transform:            scale(1.8);
          }
        }
      }
    }
  }

/* main carries the last wave, into the footer (its adjacent sibling). */
main#home.waved {
  --wave:                       var(--white); /* else the stroke takes main's navy text colour */
  padding-bottom:               0; /* let the wave bite into makirama, not a gap that leaks the footer */
  position:                     relative;
  z-index:                      1; /* lift main above the footer so the cut reveals its navy */
  & + footer {
    padding-top:                5rem; /* clear the wave */
    }
  }