/* =========================================

   MY LITTLE INTERNET WORLD

   Y2K MAGAZINE / DIGITAL SCRAPBOOK

   ========================================= */

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  color: #f8f2f0;

  background:

    radial-gradient(circle at 50% 10%, rgba(150, 0, 35, 0.22), transparent 35%),

    #080708;

  font-family: "DM Mono", monospace;

}

/* =========================================

   FLOATING GOLD GLITTER

   ========================================= */

.sparkles {

  position: fixed;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 50;

}

.sparkles span {

  position: absolute;

  top: -30px;

  color: #d9a93a;

  font-size: 13px;

  text-shadow:

    0 0 6px #d9a93a,

    0 0 14px rgba(255, 210, 80, 0.8);

  animation: glitterFall linear infinite;

}

.sparkles span:nth-child(1) {

  left: 8%;

  animation-duration: 9s;

  animation-delay: 1s;

}

.sparkles span:nth-child(2) {

  left: 21%;

  animation-duration: 12s;

  animation-delay: 4s;

}

.sparkles span:nth-child(3) {

  left: 37%;

  animation-duration: 10s;

  animation-delay: 2s;

}

.sparkles span:nth-child(4) {

  left: 51%;

  animation-duration: 14s;

  animation-delay: 6s;

}

.sparkles span:nth-child(5) {

  left: 67%;

  animation-duration: 11s;

  animation-delay: 3s;

}

.sparkles span:nth-child(6) {

  left: 78%;

  animation-duration: 13s;

  animation-delay: 7s;

}

.sparkles span:nth-child(7) {

  left: 89%;

  animation-duration: 10s;

  animation-delay: 5s;

}

.sparkles span:nth-child(8) {

  left: 94%;

  animation-duration: 15s;

  animation-delay: 1s;

}

@keyframes glitterFall {

  0% {

    transform: translateY(-40px) rotate(0deg);

    opacity: 0;

  }

  15% {

    opacity: 1;

  }

  50% {

    transform: translateY(50vh) translateX(18px) rotate(160deg);

  }

  85% {

    opacity: 0.7;

  }

  100% {

    transform: translateY(110vh) translateX(-15px) rotate(320deg);

    opacity: 0;

  }

}

/* =========================================

   MAIN SITE

   ========================================= */

.site {

  position: relative;

  width: min(1120px, calc(100% - 28px));

  margin: 28px auto;

  border: 2px solid #b51f3b;

  box-shadow:

    0 0 12px rgba(224, 31, 65, 0.9),

    0 0 35px rgba(176, 20, 50, 0.45),

    inset 0 0 35px rgba(120, 0, 30, 0.18);

  background:

    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.025), transparent 20%),

    #0a090a;

}

/* =========================================

   HERO

   ========================================= */

.hero {

  position: relative;

  min-height: 500px;

  padding: 80px 55px 60px;

  overflow: hidden;

  text-align: center;

  border-bottom: 1px solid rgba(220, 35, 67, 0.8);

  background:

    radial-gradient(circle at 50% 45%, rgba(185, 20, 50, 0.13), transparent 38%),

    #090809;

}

/* REALISTIC-ISH LEOPARD PRINT TEXTURE */

.leopard-strip {

  position: absolute;

  top: 20px;

  left: 50%;

  width: 78%;

  height: 52px;

  transform: translateX(-50%) rotate(-1deg);

  opacity: 0.9;

  background-color: #c59642;

  background-image:

    radial-gradient(ellipse at 20% 30%,

      #080606 0 8%,

      transparent 9%),

    radial-gradient(ellipse at 26% 65%,

      #080606 0 9%,

      transparent 10%),

    radial-gradient(ellipse at 48% 45%,

      #080606 0 8%,

      transparent 9%),

    radial-gradient(ellipse at 72% 30%,

      #080606 0 9%,

      transparent 10%),

    radial-gradient(ellipse at 82% 70%,

      #080606 0 8%,

      transparent 9%),

    radial-gradient(circle at 20% 30%,

      transparent 0 4%,

      #1c1010 5% 7%,

      transparent 8%),

    radial-gradient(circle at 72% 30%,

      transparent 0 4%,

      #1c1010 5% 7%,

      transparent 8%);

  box-shadow:

    0 0 15px rgba(210, 170, 75, 0.35);

  transform-origin: center;

}

.leopard-strip::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(

      110deg,

      transparent,

      rgba(255,255,255,0.12),

      transparent

    );

  animation: leopardShine 5s ease-in-out infinite;

}

@keyframes leopardShine {

  0%, 100% {

    transform: translateX(-100%);

  }

  50% {

    transform: translateX(100%);

  }

}

/* =========================================

   HERO TEXT

   ========================================= */

.mini-title {

  position: relative;

  margin-top: 20px;

  color: #d6ad50;

  font-size: 11px;

  letter-spacing: 4px;

}

.hero h1 {

  position: relative;

  margin: 35px 0 18px;

  color: #ef3154;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(65px, 10vw, 125px);

  line-height: 0.82;

  letter-spacing: 2px;

  text-shadow:

    4px 5px 0 #170507,

    0 0 18px rgba(239, 49, 84, 0.7);

  animation: titleFloat 4s ease-in-out infinite;

}

@keyframes titleFloat {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

  }

}

.tagline {

  color: #d6ad50;

  font-size: 12px;

  letter-spacing: 2px;

}

.gold-line {

  width: min(600px, 80%);

  height: 1px;

  margin: 35px auto 20px;

  background: linear-gradient(

    90deg,

    transparent,

    #d6ad50,

    transparent

  );

  box-shadow: 0 0 10px rgba(214, 173, 80, 0.6);

}

.welcome {

  color: #ddd1d1;

  font-family: "Playfair Display", serif;

  font-style: italic;

  font-size: 17px;

}

/* =========================================

   NAVIGATION

   ========================================= */

.nav {

  position: sticky;

  top: 0;

  z-index: 20;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 9px;

  padding: 17px;

  background: rgba(10, 7, 9, 0.94);

  border-bottom: 1px solid rgba(214, 173, 80, 0.35);

  backdrop-filter: blur(8px);

}

.nav a {

  position: relative;

  padding: 9px 14px;

  color: #f7e7e7;

  text-decoration: none;

  font-family: "Bebas Neue", sans-serif;

  font-size: 17px;

  letter-spacing: 1px;

  transition:

    transform 0.25s ease,

    color 0.25s ease,

    text-shadow 0.25s ease;

}

.nav a::after {

  content: "✦";

  position: absolute;

  right: -4px;

  top: -7px;

  color: #d6ad50;

  font-size: 8px;

  opacity: 0;

  transition: opacity 0.25s ease;

}

.nav a:hover {

  color: #ef3154;

  transform: translateY(-3px) rotate(-1deg);

  text-shadow: 0 0 10px rgba(239, 49, 84, 0.8);

}

.nav a:hover::after {

  opacity: 1;

}

/* =========================================

   SECTIONS

   ========================================= */

main {

  position: relative;

}

section {

  position: relative;

  padding: 80px 9%;

}

.eyebrow {

  margin: 0 0 12px;

  color: #d6ad50;

  font-size: 10px;

  letter-spacing: 3px;

}

section h2 {

  margin: 0 0 25px;

  color: #ef3154;

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(42px, 7vw, 75px);

  line-height: 0.95;

  letter-spacing: 2px;

  text-shadow: 3px 3px 0 #160507;

}

section p {

  max-width: 720px;

  color: #eee6e6;

  font-size: 15px;

  line-height: 1.9;

}

/* =========================================

   INTRO

   ========================================= */

.intro {

  min-height: 570px;

  display: flex;

  align-items: center;

  gap: 70px;

  background:

    radial-gradient(

      circle at 90% 30%,

      rgba(190, 25, 55, 0.13),

      transparent 30%

    );

}

.intro-copy {

  flex: 1;

}

.intro-copy h2 span {

  color: #d6ad50;

  font-size: 35px;

}

.signature {

  color: #ef3154 !important;

  font-family: "Pacifico", cursive;

  font-size: 22px !important;

}

/* =========================================

   DESKTOP BUTTON

   ========================================= */

.desktop {

  flex: 0 0 220px;

  position: relative;

  min-height: 175px;

  padding: 25px;

  border: 2px solid #d6ad50;

  border-radius: 45% 55% 48% 52%;

  cursor: pointer;

  color: white;

  background:

    linear-gradient(145deg, #2b292b, #090809);

  box-shadow:

    8px 10px 0 rgba(214, 173, 80, 0.12),

    0 0 25px rgba(214, 173, 80, 0.18);

  transform: rotate(3deg);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

}

.desktop:hover {

  transform: rotate(-2deg) translateY(-8px) scale(1.04);

  box-shadow:

    12px 15px 0 rgba(214, 173, 80, 0.12),

    0 0 35px rgba(214, 173, 80, 0.4);

}

.desktop-screen {

  display: block;

  color: #ef3154;

  font-family: "Bebas Neue", sans-serif;

  font-size: 32px;

  line-height: 0.9;

}

.desktop-label {

  display: block;

  margin-top: 15px;

  color: #d6ad50;

  font-size: 10px;

}

/* =========================================

   FASHION / GLAM / DIARY / MUSIC

   ========================================= */

.fashion {

  transform: rotate(-0.4deg);

  background: linear-gradient(

    100deg,

    rgba(126, 10, 30, 0.08),

    transparent

  );

}

.glam {

  transform: rotate(0.4deg);

}

.diary {

  transform: rotate(-0.3deg);

}

.music {

  transform: rotate(0.25deg);

}

.fashion-links {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 30px;

}

.fashion-links button,

.glam button {

  border: 1px solid #d6ad50;

  padding: 13px 18px;

  color: #f8eeee;

  background: rgba(140, 15, 38, 0.28);

  font-family: "DM Mono", monospace;

  cursor: pointer;

  transition: 0.25s ease;

}

.fashion-links button:hover,

.glam button:hover {

  color: #0a090a;

  background: #d6ad50;

  transform: translateY(-4px);

  box-shadow: 0 8px 20px rgba(214, 173, 80, 0.25);

}

.diary-entry {

  position: relative;

  max-width: 720px;

  padding: 25px 0;

  border-top: 1px solid rgba(214, 173, 80, 0.5);

  border-bottom: 1px solid rgba(214, 173, 80, 0.5);

}

.date {

  color: #d6ad50 !important;

  font-size: 10px !important;

  letter-spacing: 2px;

}

.diary-entry h3 {

  color: #f4d7d7;

  font-family: "Playfair Display", serif;

  font-size: 25px;

}

/* =========================================

   CDS

   ========================================= */

.cd-row {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  margin-top: 30px;

}

.cd {

  width: 125px;

  height: 125px;

  border: 2px solid #d6ad50;

  border-radius: 50%;

  cursor: pointer;

  color: #eee;

  background:

    repeating-radial-gradient(

      circle,

      #191619 0 8px,

      #292329 9px 10px

    );

  box-shadow:

    0 0 20px rgba(214, 173, 80, 0.2);

  transition: 0.35s ease;

}

.cd:hover {

  transform: rotate(18deg) scale(1.08);

  box-shadow:

    0 0 30px rgba(214, 173, 80, 0.55);

}

.cd span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  color: #f5d7dc;

  background: #9d1935;

  font-family: "Bebas Neue", sans-serif;

  font-size: 15px;

}

/* =========================================

   FOOTER

   ========================================= */

footer {

  padding: 35px;

  text-align: center;

  border-top: 1px solid rgba(214, 173, 80, 0.35);

  color: #a99b9f;

  font-size: 10px;

  letter-spacing: 1px;

}

/* =========================================

   POPUP

   ========================================= */

.popup {

  position: fixed;

  inset: 0;

  z-index: 100;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;

  background: rgba(0, 0, 0, 0.72);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;

}

.popup.show {

  opacity: 1;

  pointer-events: auto;

}

.popup-inner {

  position: relative;

  width: min(520px, 100%);

  padding: 45px 35px;

  color: #f7eeee;

  background:

    radial-gradient(circle at 20% 20%, rgba(214,173,80,0.12), transparent 30%),

    #110c0e;

  border: 1px solid #d6ad50;

  box-shadow:

    0 0 35px rgba(225, 31, 65, 0.35),

    0 0 70px rgba(214, 173, 80, 0.12);

  transform: translateY(20px) scale(0.95);

  transition: transform 0.3s ease;

}

.popup.show .popup-inner {

  transform: translateY(0) scale(1);

}

.popup-inner h2 {

  color: #ef3154;

  font-family: "Bebas Neue", sans-serif;

  font-size: 45px;

}

.close {

  position: absolute;

  top: 10px;

  right: 15px;

  border: 0;

  color: #d6ad50;

  background: none;

  font-size: 30px;

  cursor: pointer;

}

.close:hover {

  color: #ef3154;

  transform: rotate(90deg);

}

/* =========================================

   MOBILE

   ========================================= */

@media (max-width: 700px) {

  .site {

    width: calc(100% - 12px);

    margin: 12px auto;

  }

  .hero {

    min-height: 440px;

    padding: 75px 20px 45px;

  }

  .leopard-strip {

    width: 92%;

  }

  .hero h1 {

    font-size: clamp(58px, 17vw, 90px);

  }

  .tagline {

    font-size: 9px;

    line-height: 1.8;

  }

  .nav {

    gap: 3px;

    padding: 12px 6px;

  }

  .nav a {

    padding: 7px 8px;

    font-size: 14px;

  }

  section {

    padding: 65px 8%;

  }

  .intro {

    display: block;

  }

  .desktop {

    display: block;

    width: 190px;

    margin: 50px auto 0;

  }

  .cd {

    width: 105px;

    height: 105px;

  }

}