/* ========================================
   Tier 1: Primitives
   ======================================== */
:root {
  --primitive-pink-100: #fff0f5;
  --primitive-pink-200: #ffd6e7;
  --primitive-pink-300: #ffb6d3;
  --primitive-pink-400: #ff8cba;
  --primitive-pink-500: #f472a8;

  --primitive-blue-100: #eef6ff;
  --primitive-blue-200: #d4ecff;
  --primitive-blue-300: #a8d8ff;
  --primitive-blue-400: #7ec8f5;

  --primitive-yellow-100: #fefce8;
  --primitive-yellow-200: #fef3c7;
  --primitive-yellow-300: #fde68a;
  --primitive-yellow-400: #fcd34d;

  --primitive-white: #ffffff;
  --primitive-brown-600: #6d4c41;
  --primitive-brown-800: #4a2c20;

  --primitive-radius-sm: 8px;
  --primitive-radius-md: 16px;
  --primitive-radius-lg: 24px;
  --primitive-radius-pill: 999px;

  --primitive-shadow-soft: 0 4px 24px rgba(244, 114, 168, 0.15);
  --primitive-shadow-book: 0 8px 0 rgba(109, 76, 65, 0.25);
  --primitive-shadow-book-hover: 0 12px 0 rgba(109, 76, 65, 0.2);
  --primitive-shadow-book-active: 0 2px 0 rgba(109, 76, 65, 0.3);
}

/* ========================================
   Tier 2: Semantic Tokens
   ======================================== */
:root {
  --bg-page: var(--primitive-pink-100);
  --bg-surface: var(--primitive-white);
  --bg-accent: var(--primitive-blue-200);

  --text-heading: var(--primitive-brown-800);
  --text-body: var(--primitive-brown-600);
  --text-on-accent: var(--primitive-white);

  --color-primary: var(--primitive-pink-400);
  --color-secondary: var(--primitive-blue-300);
  --color-tertiary: var(--primitive-yellow-300);

  --book-cover: var(--primitive-blue-300);
  --book-cover-hover: var(--primitive-blue-400);
  --book-pages: var(--primitive-yellow-100);
  --book-spine: var(--primitive-pink-400);
  --book-text: var(--primitive-brown-800);

  --space-1: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-2: clamp(0.5rem, 1vw, 0.75rem);
  --space-3: clamp(0.75rem, 1.5vw, 1rem);
  --space-4: clamp(1rem, 2vw, 1.5rem);
  --space-5: clamp(1.5rem, 3vw, 2rem);
  --space-6: clamp(2rem, 4vw, 3rem);

  --text-sm: clamp(0.75rem, 1.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 1.5vw, 1rem);
  --text-lg: clamp(1.125rem, 2vw, 1.375rem);
  --text-xl: clamp(1.5rem, 3vw, 2rem);
  --text-2xl: clamp(2rem, 4vw, 2.75rem);
}

/* ========================================
   Reset
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  font-family: 'Fredoka', sans-serif;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ========================================
   Block: landing_page
   ======================================== */
.landing_page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  position: relative;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.landing_page-character {
  width: clamp(8rem, 20vw, 12rem);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(244, 114, 168, 0.3));
  animation: landing_page_float 3s ease-in-out infinite;
  will-change: transform;
}

.landing_page-greeting {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing_page-name {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.1;
}

.landing_page-username {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-body);
  opacity: 0.7;
  margin-top: calc(var(--space-1) * -1);
}

/* ========================================
   Block: book_button
   ======================================== */
.book_button {
  display: inline-flex;
  text-decoration: none;
  margin-top: var(--space-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.book_button-body {
  position: relative;
  width: clamp(5rem, 11vw, 6rem);
  height: clamp(6.25rem, 14vw, 7.5rem);
  animation: book_button_idle 2.5s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.book_button-cover {
  position: absolute;
  inset: 0;
  background: var(--book-cover);
  border-radius: 3px var(--primitive-radius-sm) var(--primitive-radius-sm) 3px;
  border: 3px solid var(--primitive-brown-600);
  transform-origin: left center;
  transform: perspective(600px) rotateY(0deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.08);
}

.book_button-cover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 6px;
  background: var(--book-spine);
  border-radius: 0 2px 2px 0;
  transition: opacity 0.3s ease;
}

.book_button-icon {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1;
  transition: transform 0.3s ease;
}

.book_button-label {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--book-text);
  letter-spacing: 0.02em;
}

.book_button-pages {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 3px;
  left: 6px;
  background: var(--book-pages);
  border-radius: 2px var(--primitive-radius-sm) var(--primitive-radius-sm) 2px;
  border: 3px solid var(--primitive-brown-600);
  border-left: none;
  z-index: 1;
  overflow: hidden;
}

.book_button-pages::before,
.book_button-pages::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--primitive-pink-200);
  border-radius: 1px;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.book_button-pages::before {
  top: 30%;
}

.book_button-pages::after {
  top: 50%;
  right: 20%;
}

.book_button-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--book-spine);
  border: 3px solid var(--primitive-brown-600);
  border-radius: 3px 0 0 3px;
  z-index: 4;
}

.book_button-shadow {
  position: absolute;
  bottom: -10px;
  left: 10%;
  right: 10%;
  height: 12px;
  background: radial-gradient(ellipse, rgba(109, 76, 65, 0.18) 0%, transparent 70%);
  transition: all 0.35s ease;
  z-index: 0;
}

.book_button:hover .book_button-body {
  transform: translateY(-6px);
}

.book_button:hover .book_button-cover {
  transform: perspective(600px) rotateY(-35deg);
  background: var(--book-cover-hover);
  box-shadow: 6px 2px 12px rgba(0, 0, 0, 0.12);
}

.book_button:hover .book_button-icon {
  transform: scale(1.15);
}

.book_button:hover .book_button-pages::before,
.book_button:hover .book_button-pages::after {
  opacity: 1;
}

.book_button:hover .book_button-shadow {
  bottom: -16px;
  opacity: 0.6;
  left: 2%;
  right: 2%;
}

.book_button:active .book_button-body {
  transform: translateY(2px) scale(0.95);
  animation: none;
}

.book_button:active .book_button-cover {
  transform: perspective(600px) rotateY(-50deg);
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.1);
}

.book_button:active .book_button-shadow {
  bottom: -4px;
  opacity: 0.3;
  left: 18%;
  right: 18%;
}

.landing_page-hint {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.book_button:hover ~ .landing_page-hint {
  opacity: 0.8;
}

/* ========================================
   Block: bg_decor
   ======================================== */
.bg_decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg_decor-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.bg_decor-dot[data-color='pink'] {
  background: var(--primitive-pink-200);
}

.bg_decor-dot[data-color='blue'] {
  background: var(--primitive-blue-200);
}

.bg_decor-dot[data-color='yellow'] {
  background: var(--primitive-yellow-200);
}

.bg_decor-dot[data-pos='1'] {
  width: clamp(4rem, 14vw, 12rem);
  height: clamp(4rem, 14vw, 12rem);
  top: -3%;
  right: -2%;
}

.bg_decor-dot[data-pos='2'] {
  width: clamp(3rem, 10vw, 8rem);
  height: clamp(3rem, 10vw, 8rem);
  bottom: 8%;
  left: -2%;
}

.bg_decor-dot[data-pos='3'] {
  width: clamp(2rem, 8vw, 6rem);
  height: clamp(2rem, 8vw, 6rem);
  top: 40%;
  right: 5%;
}

.bg_decor-dot[data-pos='4'] {
  width: clamp(5rem, 16vw, 14rem);
  height: clamp(5rem, 16vw, 14rem);
  bottom: -4%;
  right: 20%;
}

.bg_decor-dot[data-pos='5'] {
  width: clamp(2.5rem, 8vw, 5rem);
  height: clamp(2.5rem, 8vw, 5rem);
  top: 12%;
  left: 8%;
}

/* ========================================
   Block: sparkle
   ======================================== */
.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 10;
  animation: sparkle_pop 0.7s ease-out forwards;
}

.sparkle[data-shape='star'] {
  width: 10px;
  height: 10px;
  background: var(--primitive-yellow-300);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px var(--primitive-yellow-300));
}

.sparkle[data-shape='heart'] {
  width: 10px;
  height: 10px;
  background: var(--primitive-pink-300);
  clip-path: polygon(
    50% 15%,
    40% 0%,
    25% 0%,
    10% 10%,
    0% 30%,
    0% 50%,
    10% 70%,
    50% 100%,
    90% 70%,
    100% 50%,
    100% 30%,
    90% 10%,
    75% 0%,
    60% 0%
  );
  filter: drop-shadow(0 0 3px var(--primitive-pink-300));
}

.sparkle[data-shape='dot'] {
  width: 5px;
  height: 5px;
  background: var(--primitive-blue-300);
  border-radius: 50%;
  filter: drop-shadow(0 0 3px var(--primitive-blue-300));
}

/* ========================================
   Animations
   ======================================== */
@keyframes landing_page_float {
  0%,
  100% {
    transform: translateY(0) rotateY(var(--parallax-ry, 0deg)) rotateX(var(--parallax-rx, 0deg));
  }
  50% {
    transform: translateY(-8px) rotateY(var(--parallax-ry, 0deg)) rotateX(var(--parallax-rx, 0deg));
  }
}

@keyframes book_button_idle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-1deg);
  }
  75% {
    transform: translateY(-1px) rotate(1deg);
  }
}

@keyframes sparkle_pop {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) translate(var(--sx, 10px), var(--sy, -15px));
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translate(var(--ex, 20px), var(--ey, -30px));
  }
}