/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*  CSS does the visual work, JavaScript just adds and removes classes to trigger it. the
animations themselves live in style.css — JS just tells the browser when to start them. */

/* BASE */

:root {
    --site-width: 840px;
}

body {
    background-color: #1a1520;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "Inter", sans-serif;
    user-select: none;
}

@media (max-width: 1200px) {
  .music-nacho {
    display: none;
  }
}

/* LAYOUT */

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 2rem 10rem;
    box-sizing: border-box;
    width: min(var(--site-width), 90vw);
    min-width: max-content;
    font-size: 1.5rem;
    border-top: 3px solid #e8c4d8;
    border-bottom: 3px solid #e8c4d8;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

main {
    padding-top: 6rem;
    opacity: 0;
    animation: fade-in 0.3s ease forwards;
    animation-delay: 0.4s;
}

body.content {
    align-items: flex-start;
    height: auto;
    min-height: 100vh;
}

.content main {
    padding-top: 11rem;
    width: min(var(--site-width), 90vw);
    text-align: center;
}

/* LINKS */

a {
    color:#e8c4d8;
    text-decoration: none;
    transition: color 0.2s;
}

a:visited {
    color: #e8c4d8;
}

.current-page {
    color: #e8c4d8;
    font-weight: normal;
    text-shadow: 0 0 0.5rem currentColor, 0 0 1rem currentColor, 0 0 2rem currentColor;
}

.page_text {
    color: #e8c4d8;
    border-bottom: 1px solid rgba(232, 196, 216, 0.3);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* HOME LAYOUT */

.sleepacho {
    animation: fade-in 0.3s ease forwards;
    width: 400px;
    aspect-ratio: 1080 / 1080;
    margin-bottom: 14rem;
    transform: scaleX(-1);
    position: relative;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.sleep-cloud {
    position: absolute;
    bottom: 14rem;
    left: -2rem;
    width: 450px;
    aspect-ratio: 1080 / 1080;
    transform: scaleX(-1);
    animation: fade-in 0.3s ease forwards;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.home_layout {
    display: flex;
    align-items: center;
}

/* wobble looked weird with the bigger cloud, keeping just in case */

/* @keyframes cloud-wobble {
    0%   { transform: scaleX(-1) translate(0, 0); }
    25%  { transform: scaleX(-1) translate(1px, -1.5px); }
    50%  { transform: scaleX(-1) translate(-1px, -2px); }
    75%  { transform: scaleX(-1) translate(-1px, -1px); }
    100% { transform: scaleX(-1) translate(0, 0); }
} */

/* NAV ANIMATIONS */

.home nav {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home nav.animate-in {
    animation: nav-fall 0.3s ease forwards;
}

.content nav {
    position: fixed;
    top: 3rem;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    transition: opacity 0.3s ease;
}

.content nav.hidden-nav {
    opacity: 0;
    pointer-events: none;
}

.content nav.animate-in {
    animation: nav-rise 0.3s ease forwards;
}

.fade-out {
    animation: fade-out 0.3s ease forwards;
}

@keyframes nav-rise {
    from { transform: translate(-50%, 0) translateY(calc(65vh - 50% - 3rem)); }
    to   { transform: translate(-50%, 0); }
}

@keyframes nav-fall {
    from { transform: translate(-50%, -50%) translateY(calc(3rem + 50% - 65vh)); }
    to   { transform: translate(-50%, -50%); }
}

@keyframes fade-in {
    from {opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

nav {
    will-change: transform;
}

/* Z'S */

.z {
    position: absolute;
    top: 80px;
    left: 220px;
    opacity: 0;
    animation: z-float 3s ease-in-out forwards;
    width: 60px;
    user-select: none;
    z-index: 2;
}

.z-container {
    position: relative;
}

@keyframes z-float {
    0% { opacity: 0; transform: scale(0.5) translateX(0) translateY(0); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5) translateX(var(--sway)) translateY(-100px); }
}

/* DREAM CLOUD */
.dream {
    position: relative;
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.dream.visible {
    animation: fade-in 0.3s ease forwards;
}

.dream.hiding {
    animation: fade-out 0.3s ease forwards;
}

.dream-bubble {
    position: absolute;
    animation: wobble 6s ease-in-out infinite;
}

.dream-bubble-1 { width: 18px;  bottom: 140px; left: 5px; animation-duration: 4.5s;}
.dream-bubble-2 { width: 24px;  bottom: 160px; left: 20px; animation-duration: 5.2s; animation-delay: -1.5s;}
.dream-bubble-3 { width: 32px;  bottom: 180px; left: 35px; animation-duration: 6.1s; animation-delay: -3s;}
.dream-cloud    { width: 280px; bottom: 180px; left: 5px; animation-duration: 7.5s; animation-delay: -0.8s;}

.dream-img {
    width: 100%;
    display: block;
}

.dream-texture {
    position: absolute;
    inset: 0;

    background-image: url("images/home/dream-texture.png");
    background-repeat: repeat;
    background-size: 512px auto;

    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    animation: texture-pan 15s linear infinite;
}

.dream-text {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0 2.5rem;
    box-sizing: border-box;

    color: #e8c4d8;
    font-size: 0.9rem;
    text-shadow: 0 0 0.4rem #1a1520, 0 0 0.8rem #1a1520;
    text-align: center;
}

@keyframes texture-pan {
    from { background-position: 0 0; }   
    to { background-position: -512px 0;} 
}

@keyframes wobble {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(2px, -3px); }
    50%  { transform: translate(-1px, -5px); }
    75%  { transform: translate(-2px, -2px); }
    100% { transform: translate(0, 0); }
}

/* MUSIC */

.music-nacho {
  position: fixed;
  bottom: 3rem;
  left: 2rem;
  width: 300px;
  animation: fade-in 0.3s ease forwards;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.music-nacho.fade-out {
    animation: fade-out 0.1s ease forwards;
}

/* SONG VIEW */

#song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  gap: 12px;
  justify-content: center;
  padding-bottom: 6rem;
}

.thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.thumb p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #e8c4d8;
  text-align: center;
  text-shadow: 0 0 1rem currentColor;
}

.hidden {
    display: none !important;
}

.thumb {
    cursor: pointer;
}

#player-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

#detail-player {
  border: none;
  display: block;
  flex: 1;
}

#song-detail {
  text-align: justify;
  color: #e8c4d8;
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: 4rem;
}

#song-detail h2 {
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  margin-bottom: 0rem;
  text-shadow: 0 0 1rem currentColor;
}

.description-text {
  font-style: italic;
}

#song-detail p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.section-divider {
  border: none;
  border-top: 1px solid rgba(232, 196, 216, 0.3);
  margin: 2.5rem 0;
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

#back-button {
  background: none;
  border: none;
  color: #e8c4d8;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.5rem;
}

#volume-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 8px;
  height: 200px;
  accent-color: #e8c4d8;
}

.timestamp-button {
  background: none;
  border: none;
  color: #e8c4d8;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.section-label {
  opacity: 0.7;
  margin-bottom: 1rem;
  text-align: center;
}

.song-date {
  opacity: 0.7;
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 2rem;
  font-family: "Courier New", Courier, monospace;
}

/* MISC */

.signature {
    color: #e8c4d8;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
    padding: 3rem 0 1rem;
    text-shadow: 0 0 1rem currentColor;
    user-select: none;
    background: linear-gradient(to top, #1a1520 60%, transparent);
}

.peek {
    text-decoration: underline;
    position: relative;
}

.peek img {
    position: absolute;
    bottom: -1rem;
    left: 35px;
    width: 300px;
    transform: translateY(100%);
    transition: transform 0.45s ease;
}

.peek:hover img {
    transform: translateY(10%);
}