/* =========================
   GLOBAL ELEMENTS
========================= */
#nav-spacer {
  display: none;
}

a {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: rgb(80, 145, 125);
}

body {
  max-height: 95svh;
  max-width: 100vw;
  background-color: rgb(20, 20, 20);
  font-family: 'Times New Roman', Times, serif;
  color: antiquewhite;
  text-shadow:
    0 0 2px rgb(20, 20, 20),
    0 0 5px rgb(20, 20, 20),
    0 0 10px rgb(20, 20, 20),
    0 0 15px rgb(20, 20, 20);
}

/* =========================
   MEDIA / IMAGES
========================= */

.avatar {
  max-width: 25%;
  object-position: 90%;
  object-fit: cover;
}

.sample {
  width: 40vw;
  padding-top: 1vh;
  padding-bottom: 10vh;
  object-position: center;
  object-fit: cover;
}

/* =========================
   BANNER
========================= */

.banner {
  padding: .5em 0;
  background-color: rgba(25, 25, 25, 0.166);
  border: 2px solid rgba(45, 45, 45, 0.03);
  width: 100svw;
  overflow: hidden;
  text-align: center;
  font-size: larger;
}

/* =========================
   BUTTON
========================= */

.button {
  z-index: 5;
  width: 10em;
  height: 10em;
  background: none;
  border: none;
  background-image: url(../resources/playstatic.png);
  background-size: contain;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  box-sizing: border-box;
  cursor: pointer;
  
}
.button:hover {
  background-image: url(../resources/play.gif);
}
.button.paused {
  background-image: url(../resources/pausestatic.png);
}
.button.paused:hover {
  background-image: url(../resources/pause.gif);
}

/* =========================
   CARD / COLUMN / CONTAINER
========================= */

.card {
  width: 85%;
  height: fit-content;
  padding: 0 3.5em 3em;
  font-size: 1.25rem;
  overflow-x: hidden;
}
.card.visible {
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 15px;
}

.column {
  padding: 2em 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  overflow-y: scroll;
  width: 100%;
  height: 85vh;
  padding: 2em 0 5vh;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(5px);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.content::-webkit-scrollbar {
  display: none;
}

/* =========================
   IMAGE GRID
========================= */

.image-grid {
  overflow-y: scroll;
  width: fit-content;
  margin-inline: auto;
  height: 90vh;
  padding: 2em 0 15vh;
  display: grid;
  gap: 1em;
  backdrop-filter: blur(5px);
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;

  grid-template-rows: repeat(12, 7em);
  grid-template-columns: repeat(5, 14em);
  grid-template-areas:
    "box-1  box-2  box-2  box-3  box-3"
    "box-1  box-2  box-2  box-3  box-3"
    "box-4  box-4  box-4  box-7  box-7"
    "box-4  box-4  box-4  box-7  box-7"
    "box-5  box-5  box-6  box-7  box-7"
    "box-5  box-5  box-6  box-8  box-8"
    "box-9  box-10 box-10 box-11 box-11"
    "box-9  box-10 box-10 box-11 box-11"
    "box-12 box-12 box-12 box-15 box-15"
    "box-12 box-12 box-12 box-15 box-15"
    "box-13 box-13 box-14 box-15 box-15"
    "box-13 box-13 box-14 box-16 box-16";
}
.image-grid::-webkit-scrollbar {
  display: none;
}
.image-grid > [data-area] {
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(45, 45, 45, 0.55);
  border-radius: 10px;
}

/* Assign images */
.image-grid > [data-area="box-1"]  { grid-area: box-1;  background-image: url('../media/guns.jpg'); }
.image-grid > [data-area="box-2"]  { grid-area: box-2;  background-image: url('../media/hata.jpg'); }
.image-grid > [data-area="box-3"]  { grid-area: box-3;  background-image: url('../media/milli.jpg'); background-position-y: center; }
.image-grid > [data-area="box-4"]  { grid-area: box-4;  background-image: url('../media/warmth.jpg'); background-position-y: center; }
.image-grid > [data-area="box-5"]  { grid-area: box-5;  background-image: url('../media/purplesmoke.jpg'); background-position-y: 15%; }
.image-grid > [data-area="box-6"]  { grid-area: box-6;  background-image: url('../media/shade.jpg'); background-position: center; }
.image-grid > [data-area="box-7"]  { grid-area: box-7;  background-image: url('../media/heartshot.jpg'); }
.image-grid > [data-area="box-8"]  { grid-area: box-8;  background-image: url('../media/TV.jpg'); background-position-y: 40%; }
.image-grid > [data-area="box-9"]  { grid-area: box-9;  background-image: url('../media/god.jpg'); background-position: center; }
.image-grid > [data-area="box-10"] { grid-area: box-10; background-image: url('../media/glass.jpg'); }
.image-grid > [data-area="box-11"] { grid-area: box-11; background-image: url('../media/drink.jpg'); background-position-y: 80%; }
.image-grid > [data-area="box-12"] { grid-area: box-12; background-image: url('../media/melting.jpg'); background-position-y: center; }
.image-grid > [data-area="box-13"] { grid-area: box-13; background-image: url('../media/locked.jpg'); background-position-y: 45%; }
.image-grid > [data-area="box-14"] { grid-area: box-14; background-image: url('../media/twosuns.jpg'); background-position: center; }
.image-grid > [data-area="box-15"] { grid-area: box-15; background-image: url('../media/ophelia.jpg'); background-position-x: 60%; }
.image-grid > [data-area="box-16"] { grid-area: box-16; background-image: url('../media/trapped.jpg'); background-position-y: 40%; }

/* =========================
   LINKS
========================= */

.ja-only { display: none; }

.link {
  background-color: rgb(30, 30, 30);
  border: 2px solid rgb(10, 10, 10);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  padding: 1em;
  align-items: center;
}

.link-grid {
  padding-top: 2em;
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 1em;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(2, 40vw);
  grid-template-areas:
    "box-1 box-2"
    "box-3 box-4"
    "box-5 box-6"
    "box-7 box-8";
}
.link-grid img {
  width: 5vh;
  object-position: 100%;
  box-shadow: none;
  padding-right: 1em;
}

/* =========================
   MESSAGE
========================= */

.message {
  height: max-content;
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(45, 45, 45, 0.55);
  border-radius: 10px;
  padding: 1em;
  font-size: 3rem;
  text-shadow:
    0 0 2px rgb(20, 20, 20),
    0 0 5px rgb(20, 20, 20),
    0 0 10px rgb(20, 20, 20),
    0 0 15px rgb(20, 20, 20);
}

/* =========================
   NAVIGATION
========================= */

.navwrapper {
  z-index: 1;
  padding: 5vh 1em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  box-shadow: 0 8px 10px -10px rgb(0, 0, 0);
  position: relative;
  
}
.branding{display:none;}
.home-item{display:none;}

.navitem {
  z-index: 2;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: clamp(1rem, 3vw + 3vh, 5rem);
  color: inherit;
  text-shadow:
    0 0 2px rgb(20, 20, 20),
    0 0 5px rgb(20, 20, 20),
    0 0 10px rgb(20, 20, 20),
    0 0 15px rgb(20, 20, 20);
}
.navitem:hover {
  color: rgb(80, 145, 125);
  cursor: pointer;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 3rem;
  height: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  overflow: visible;
}

.hamburger span {
  width: 100%;
  height: 4px;
  background: rgb(34, 42, 46);
  border-radius: 2px;
 
  transition: 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

.hamburger.active{margin-right:2rem;margin-top:.6rem;}
.navwrapper.closing{.hamburger{margin-right:2rem; margin-top:.6rem;}}


/* =========================
   OVERLAY
========================= */

.overlay {
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  overflow: clip;
}

.overlay.vignette {
  background-image: url(../resources/51.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  box-shadow:
    0 -2px max(2vh, 2vw) rgba(0, 0, 0, 0.5) inset,
    0 2px max(2vh, 2vw) rgb(0, 0, 0) inset,
    0 -2px max(5vh, 5vw) rgba(0, 0, 0, 0.5) inset,
    0 2px max(5vh, 5vw) rgb(0, 0, 0) inset;
}

/* =========================
   MEDIA QUERIES
========================= */

@media (max-width: 1200px) {
  .avatar { max-width: 35%; }
  .button { z-index: -2; }
  .image-grid {
    grid-template-rows: repeat(12, 5em);
    grid-template-columns: repeat(5, 10em);
  }
}

@media (max-width: 950px) {
  .image-grid {
    width: 80vw;
    grid-template-rows: repeat(16, 45vw);
    grid-template-columns: repeat(1, 80vw);
    grid-template-areas:
      "box-3"
      "box-2"
      "box-4"
      "box-5"
      "box-6"
      "box-1"
      "box-7"
      "box-8"
      "box-9"
      "box-10"
      "box-11"
      "box-12"
      "box-13"
      "box-14"
      "box-15"
      "box-16";
  }
}

@media (max-width: 800px) {
  /* Non-nav rules */
  .avatar { max-width: 45%; }
  .card { padding-top: .1em; }
  .link img { padding-right: .5em; }
  .column { padding-left: 0; padding-right: 0; }
  .sample { width: 70vw; }

  /* Navwrapper closed */
  .navwrapper {
    justify-content: flex-end;
    padding: 2vh 1em;
    position: relative;
    min-height:2vh;

    .branding{
        display:block;
        width:80px;
        height: 80px;
        position:absolute;
        left:5%;
        background-image:url('../media/logo.png');
        background-size:contain;}
  }

  .navwrapper.open {
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2vh 1.5em 40vh 1em;
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(0, 0, 0, 0.382);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 999;
    .branding{display:none;}
    }

  /* Nav items — hidden by default */
  .navitem {
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    width: 100%;
    text-align: right;
    padding: 0.5em 1em;
    font-size: 2rem;
  }

  /* Nav items — visible when open */
  .navwrapper.open .navitem {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }

  

  /* Stagger */
  .navwrapper.open .navitem:nth-child(5) { transition-delay: 0.05s; }
  .navwrapper.open .navitem:nth-child(4) { transition-delay: 0.10s; }
  .navwrapper.open .navitem:nth-child(3) { transition-delay: 0.15s; }
  .navwrapper.open .navitem:nth-child(2) { transition-delay: 0.20s; }
  .navwrapper.open .navitem:nth-child(1) { transition-delay: 0.25s; }

.navwrapper.closing .navitem {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* no transition-delay on close — all fade out together, quickly */
  transition-delay: 0s;
}


  /* Hamburger — always visible, never affected by navitem rules */
  .hamburger {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    flex-shrink:0;
  }
}

@media (max-height: 850px) {
  .navwrapper { padding: 2vh 1em; }
}

@media (max-width: 159px) {
  body > * { display: none; }
}