/* ============================================
   PERPISAHAN BU DEWI - Single Page Web
   Theme: Childish, playful, warm
   ============================================ */

@import url('lenis.css');

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

:root {
  /* Childish warm palette */
  --cream: #FFF8E7;
  --paper: #FEF6E4;
  --coral: #FF6B6B;
  --mint: #4ECDC4;
  --sunny: #FFE66D;
  --pink-soft: #FFB4B4;
  --blue-soft: #A5D7E8;
  --lavender: #C9B6E4;
  --ink: #2D3047;
  --ink-soft: #5A5E7A;
  --white: #FFFCF5;

  /* Typography */
  --font-display: 'Fredoka', 'Quicksand', 'Comic Neue', system-ui, sans-serif;
  --font-body: 'Quicksand', 'Nunito', system-ui, sans-serif;

  /* Sizing */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 36px;
  --shadow-soft: 0 6px 0 rgba(45, 48, 71, 0.12), 0 14px 30px rgba(45, 48, 71, 0.08);
  --shadow-card: 0 8px 0 rgba(45, 48, 71, 0.1), 0 18px 40px rgba(45, 48, 71, 0.12);
  --shadow-hover: 0 12px 0 rgba(45, 48, 71, 0.15), 0 24px 50px rgba(45, 48, 71, 0.18);
}

html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 230, 109, 0.35) 0, transparent 22%),
    radial-gradient(circle at 88% 32%, rgba(255, 180, 180, 0.4) 0, transparent 25%),
    radial-gradient(circle at 22% 82%, rgba(165, 215, 232, 0.4) 0, transparent 22%),
    radial-gradient(circle at 80% 78%, rgba(201, 182, 228, 0.35) 0, transparent 22%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

img, video {
  max-width: 100%;
  display: block;
}

a { color: inherit; text-decoration: none; }

/* ----------  Hero Section  ---------- */
.body-corner-sunflower {
  position: absolute;
  bottom: -22px;
  left: -26px;
  width: clamp(96px, 13vw, 148px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 198, 54, 0.98) 0 8deg, rgba(255, 236, 155, 0.95) 8deg 16deg),
    radial-gradient(circle, rgba(255, 247, 193, 0.98) 0 24%, rgba(255, 221, 100, 0.96) 25% 52%, rgba(255, 180, 74, 0.92) 53% 64%, transparent 65%);
  filter: drop-shadow(0 12px 16px rgba(255, 184, 74, 0.22));
  transform-origin: 50% 50%;
  animation: bodyCornerSunflowerSpin 20s linear infinite;
}

.body-corner-sunflower--right {
  left: auto;
  right: -26px;
}

.body-corner-sunflower::after {
  content: '';
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7c6 0 48%, #ffd75e 49% 100%);
  box-shadow: inset -6px -8px 0 rgba(255, 184, 74, 0.18);
}

@keyframes bodyCornerSunflowerSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .body-corner-sunflower {
    animation: none;
  }
}

.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 24px 60px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Background color blobs */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.hero__blob--1 {
  width: 360px;
  height: 360px;
  background: var(--coral);
  top: -80px;
  left: -80px;
}

.hero__blob--2 {
  width: 320px;
  height: 320px;
  background: var(--sunny);
  bottom: -100px;
  right: -60px;
}

.hero__blob--3 {
  width: 280px;
  height: 280px;
  background: var(--mint);
  top: 35%;
  right: 12%;
  opacity: 0.3;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(255, 252, 245, 0.62), rgba(255, 252, 245, 0.24)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.85), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  background-position: center, center, center, center;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 42%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.78), transparent 38%),
    radial-gradient(circle at 20% 40%, rgba(255, 230, 109, 0.26), transparent 38%),
    radial-gradient(circle at 80% 50%, rgba(165, 215, 232, 0.22), transparent 40%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

/* SVG decorative ornaments */
.hero__ornament {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06));
}

.hero__ornament--star {
  width: 36px;
  height: 36px;
  color: var(--sunny);
  top: 30%;
  left: 18%;
  animation: spin 14s linear infinite, floatY 4s ease-in-out infinite;
}


.hero__ornament--sparkle {
  width: 24px;
  height: 24px;
  color: var(--mint);
  top: 75%;
  left: 16%;
  animation: spin 10s linear infinite reverse, floatY 5s ease-in-out infinite;
}

.hero__ornament--dot {
  width: 16px;
  height: 16px;
  color: var(--lavender);
  bottom: 32%;
  right: 14%;
  animation: floatY 4.4s ease-in-out infinite;
}

.hero__ornament--confetti {
  width: 18px;
  height: 18px;
  color: var(--pink-soft);
  top: 22%;
  left: 32%;
  animation: spin 8s linear infinite, floatY 4.8s ease-in-out infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes floatY {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: 12deg; }
  75% { rotate: -12deg; }
}

/* Cute colorful hero title with frame */
.hero__display {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
  padding: 30px 48px 28px;
  border-radius: 22px;
  font-family: 'Fredoka', 'Comic Neue', var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 62px);
  line-height: 1.0;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--ink);
  background:
    linear-gradient(180deg, #ffffff 0%, #fff8ea 100%) padding-box,
    linear-gradient(180deg, #e9d9b3 0%, #d9b96a 100%) border-box;
  border: 2px solid transparent;
  box-shadow:
    0 16px 34px rgba(45, 48, 71, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(45, 48, 71, 0.04) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-wrap: balance;
  overflow: visible;
}

/* Decorative paper-tape strip across the top of the frame, evoking a
   scrapbook / album cover — echoes the Buku Kenangan section's playful
   "Buku *kenangan*" headline treatment. */
.hero__display::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 64%;
  height: 22px;
  border-radius: 3px;
  background: rgba(217, 185, 106, 0.78);
  box-shadow:
    0 6px 12px rgba(184, 145, 60, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* Bottom hand-written underline that ties the frame to the section title's
   "Buku kenangan" italic-emphasized style. */
.hero__display::after {
  content: '';
  position: absolute;
  inset: auto 12% -10px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(184, 145, 60, 0),
    rgba(184, 145, 60, 0.45) 50%,
    rgba(184, 145, 60, 0));
  filter: blur(1.5px);
  pointer-events: none;
}

.hero__display-line {
  display: block;
  position: relative;
  z-index: 1;
}

/* Eyebrow / kicker line — solid dark ink for readability, no gradient
   fill. Same Fredoka as the rest of the page so the frame still feels
   like part of the type system. */
.hero__display-line--1 {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: 'Fredoka', 'Comic Neue', var(--font-display);
}

/* Main script line — Caveat handwritten font, solid dark ink with a soft
   drop-shadow for legibility. The same playful italic-script feel as
   "Buku kenangan", but readable on the cream frame instead of being
   washed out by a gradient fill. */
.hero__display-line--2 {
  font-family: 'Caveat', 'Comic Neue', cursive;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(42px, 6.4vw, 86px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 2px;
  padding: 0 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: drop-shadow(0 2px 4px rgba(45, 48, 71, 0.10));
}



/* Real h1 sits behind the decorative display, kept off-screen so the
   accessible name matches the visual content without changing layout. */
.hero__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero__title-script {
  /* Hidden visually — the script version is rendered by .hero__display-line--2,
     but we keep the accessible text accurate for screen readers. */
  font-style: italic;
}


.hero__display {
  margin-bottom: 14px;
  .hero__display {
    margin-bottom: 12px;
    padding: 12px 14px 10px;
    border-radius: 20px;
    font-size: clamp(22px, 8vw, 32px);
    line-height: 0.96;
  }
  .hero__display::before {
    inset: 7px;
    border-radius: 14px;
  }
  .hero__display::after {
    inset: auto 14% 8px;
    height: 5px;
    filter: blur(2px);
  }

  inset: 8px;
  border-radius: 18px;
}
.hero__display {
  margin-bottom: 12px;
  padding: 12px 14px 10px;
  border-radius: 20px;
  font-size: clamp(22px, 8vw, 32px);
  line-height: 0.96;
}
.hero__display::before {
  inset: 7px;
  border-radius: 14px;
}
.hero__display::after {
  inset: auto 14% 8px;
  height: 5px;
  filter: blur(2px);
}

.hero__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__sub {
  position: relative;
  z-index: 3;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 28px;
  font-weight: 500;
  line-height: 1.6;
  background: rgba(255, 252, 245, 0.78);
  backdrop-filter: blur(6px);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px rgba(45, 48, 71, 0.06);
}

/* ----------  Hero Divider (transition to galeri)  ---------- */
.hero-divider {
  position: relative;
  min-height: clamp(176px, 22vw, 260px);
  margin: 0 0 32px;
  overflow: visible;
  isolation: isolate;
}

/* The scenic sky is clipped to an organic cloud-bank silhouette, so the paper
   background shows through every curved edge instead of forming a flat bar. */
.hero-divider::before {
  content: '';
  position: absolute;
  inset: clamp(26px, 4vw, 44px) -2vw 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 238, 128, 0.72) 0 16%, rgba(255, 182, 74, 0.28) 17% 31%, transparent 32%),
    radial-gradient(ellipse at 18% 72%, rgba(255, 252, 245, 0.92) 0 14%, transparent 15%),
    radial-gradient(ellipse at 32% 82%, rgba(255, 252, 245, 0.72) 0 18%, transparent 19%),
    radial-gradient(ellipse at 69% 80%, rgba(255, 252, 245, 0.76) 0 17%, transparent 18%),
    radial-gradient(ellipse at 86% 72%, rgba(255, 252, 245, 0.88) 0 14%, transparent 15%),
    linear-gradient(120deg,
      rgba(165, 215, 232, 0.88) 0%,
      rgba(255, 230, 109, 0.88) 34%,
      rgba(255, 180, 180, 0.86) 66%,
      rgba(201, 182, 228, 0.84) 100%);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'><path d='M0,150 C94,90 186,96 256,132 C328,56 462,48 548,122 C626,36 796,34 884,124 C990,70 1132,84 1206,146 C1280,110 1372,114 1440,154 L1440,204 C1340,166 1264,170 1218,206 C1148,258 1034,242 984,196 C922,258 784,254 728,196 C666,254 532,258 474,198 C410,242 294,250 234,204 C172,158 82,164 0,202 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'><path d='M0,150 C94,90 186,96 256,132 C328,56 462,48 548,122 C626,36 796,34 884,124 C990,70 1132,84 1206,146 C1280,110 1372,114 1440,154 L1440,204 C1340,166 1264,170 1218,206 C1148,258 1034,242 984,196 C922,258 784,254 728,196 C666,254 532,258 474,198 C410,242 294,250 234,204 C172,158 82,164 0,202 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 18px 28px rgba(45, 48, 71, 0.08));
  z-index: 0;
}

.hero-divider__sun,
.hero-divider__cloud {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero-divider__sun {
  left: 50%;
  top: clamp(10px, 3vw, 26px);
  width: clamp(106px, 14vw, 168px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 214, 79, 0.88) 0 8deg, transparent 8deg 16deg),
    radial-gradient(circle, #fff4a6 0 38%, #ffe66d 39% 56%, #ffb84a 57% 64%, transparent 65%);
  filter: drop-shadow(0 12px 22px rgba(255, 184, 74, 0.26));
  animation: heroSunSpin 22s linear infinite;
  z-index: 1;
}

.hero-divider__sun::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: inherit;
  background: radial-gradient(circle, #fff8c9 0 52%, #ffe66d 53% 100%);
  box-shadow: inset -10px -12px 0 rgba(255, 184, 74, 0.16);
}

.hero-divider__cloud {
  width: clamp(146px, 23vw, 276px);
  height: clamp(60px, 9vw, 104px);
  background:
    radial-gradient(ellipse at 18% 65%, var(--white) 0 20%, transparent 21%),
    radial-gradient(ellipse at 34% 46%, var(--white) 0 28%, transparent 29%),
    radial-gradient(ellipse at 55% 52%, var(--white) 0 32%, transparent 33%),
    radial-gradient(ellipse at 76% 66%, var(--white) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 78%, var(--white) 0 46%, transparent 47%);
  opacity: 0.94;
  filter: drop-shadow(0 12px 12px rgba(45, 48, 71, 0.07));
  z-index: 2;
}

.hero-divider__cloud--left {
  left: clamp(7px, 13vw, 226px);
  top: clamp(74px, 10vw, 126px);
  animation: heroCloudDriftLeft 8s ease-in-out infinite;
}

.hero-divider__cloud--right {
  right: clamp(10px, 12vw, 210px);
  top: clamp(58px, 8.8vw, 112px);
  transform: scaleX(-1) scale(0.86);
  animation: heroCloudDriftRight 9.5s ease-in-out infinite;
}

.hero-divider__sunflowers {
  display: none;
}

@keyframes heroSunFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

@keyframes heroSunSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes heroCloudDriftLeft {
  0%, 100% { translate: 0 0; }
  50% { translate: 18px -5px; }
}

@keyframes heroCloudDriftRight {
  0%, 100% { translate: 0 0; }
  50% { translate: -20px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-divider__sun,
  .hero-divider__cloud {
    animation: none;
  }
}

/* ----------  Generic Section  ---------- */
.section {
  padding: 120px 24px;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.section__header {
  text-align: center;
  margin-bottom: 80px;
}

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--coral);
  background: rgba(255, 107, 107, 0.12);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section__title {
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  max-width: 800px;
  margin: 0 auto;
}

.section__title em {
  font-family: 'Comic Neue', cursive;
  font-style: italic;
  color: var(--coral);
}

.section__lead {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 20px auto 0;
}

/* ----------  Section: Galeri — Book Flip  ---------- */
.book {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 60px 50px;
  position: relative;
  overflow: hidden;
  perspective: 1600px;
}

.book__page {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  transform-origin: left center;
  will-change: transform, opacity;
}

.book__page--active {
  display: grid;
}

/* Page-turn animation: current page peels away like a book page */
.book__page--leaving {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: inherit;
  background: inherit;
  z-index: 10;
  pointer-events: none;
}

.book__page--entering {
  display: grid;
  animation: bookUnfold 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bookUnfold {
  0% {
    transform: rotateY(-20deg) scale(0.95);
    opacity: 0;
    filter: blur(4px);
  }
  40% {
    opacity: 0.5;
    filter: blur(2px);
  }
  100% {
    transform: rotateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* Page flipping (next) — leaves from left */
.book__page--fold-next {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: inherit;
  background: inherit;
  transform-origin: left center;
  animation: foldRight 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes foldRight {
  0% {
    transform: rotateY(0);
    opacity: 1;
  }
  100% {
    transform: rotateY(-60deg);
    opacity: 0;
  }
}

/* Page flipping (prev) — leaves from right */
.book__page--fold-prev {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: inherit;
  background: inherit;
  transform-origin: right center;
  animation: foldLeft 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes foldLeft {
  0% {
    transform: rotateY(0);
    opacity: 1;
  }
  100% {
    transform: rotateY(60deg);
    opacity: 0;
  }
}

/* Gallery cards inside book pages */
.gallery__card {
  background: var(--paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transform: rotate(-1deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 4 / 3;
}

.gallery__card--placeholder {
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.gallery__card:nth-child(even) { transform: rotate(0.8deg); }

.gallery__card:hover {
  transform: rotate(0) scale(1.04);
  box-shadow: var(--shadow-hover);
}

.gallery__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery__caption {
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gallery__date {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ----------  Book Navigation  ---------- */
.book__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 36px;
}

.book__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--white);
  border: 2px solid var(--paper);
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-soft);
}

.book__btn:hover:not(:disabled) {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.book__btn:active:not(:disabled) {
  transform: translateY(1px);
}

.book__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.book__page-indicator {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--white);
  padding: 10px 20px;
  border-radius: 100px;
  box-shadow: var(--shadow-soft);
  min-width: 80px;
  text-align: center;
}

/* ----------  Section: Video  ---------- */
.video-section {
  max-width: 480px;
  margin: 0 auto;
}

.video-wrap {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transform: rotate(-1deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 18px;
}

.video-wrap:hover {
  transform: rotate(0) scale(1.04);
  box-shadow: var(--shadow-hover);
}

.video-wrap video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius-md) - 4px);
}

/* ----------  Responsive  ---------- */

/* Tablet & small desktop (≤900px) */
@media (max-width: 900px) {
  .book {
    padding: 44px 32px;
  }
  .book__page {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .book__btn {
    padding: 12px 20px;
  }
  .video-section {
    max-width: 380px;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .section {
    padding: 60px 16px;
  }
  .section__header {
    margin-bottom: 48px;
  }

  /* Hero */
  .hero {
    padding: 80px 20px 50px;
    min-height: auto;
  }
  .hero__blob {
    filter: blur(50px);
  }
  .hero__blob--1 { width: 240px; height: 240px; }
  .hero__blob--2 { width: 200px; height: 200px; }
  .hero__blob--3 { width: 180px; height: 180px; }
  .hero__ornament {
    width: 18px;
    height: 18px;
  }
  .hero__ornament--star { top: 18%; left: 12%; }
  .hero__ornament--sparkle,
  .hero__ornament--dot,
  .hero__ornament--confetti {
    display: none;
  }
  .hero__display {
    margin-bottom: 22px;
    padding: 26px 28px 24px;
    border-radius: 24px;
    gap: 6px;
  }
  .hero__display::before {
    top: -12px;
    width: 60%;
    height: 20px;
  }
  .hero__display::after {
    inset: auto 8% -10px;
    height: 6px;
  }
  .hero__display-line--1 {
    font-size: clamp(15px, 4.2vw, 19px);
    letter-spacing: 0.08em;
  }
  .hero__display-line--2 {
    font-size: clamp(36px, 11vw, 56px);
  }
  .hero__sub {
    font-size: 14px;
    padding: 10px 14px;
    margin-bottom: 18px;
  }

  /* Book — 3 vertical cards per page on mobile */
  .book {
    padding: 28px 20px;
    border-radius: var(--radius-md);
  }
  .book__page {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gallery__card,
  .gallery__card:nth-child(even) {
    transform: none;
  }
  .book__nav {
    gap: 12px;
    margin-top: 24px;
  }
  .book__btn {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .book__btn span:nth-child(2) {
    display: none;
  }
  .book__btn span:first-child {
    font-size: 24px;
  }
  .book__page-indicator {
    padding: 8px 14px;
    min-width: 56px;
    font-size: 13px;
  }

  /* Video */
  .video-section {
    max-width: 320px;
  }
  .video-wrap {
    padding: 14px;
    transform: none;
  }
  .video-wrap:hover {
    transform: scale(1.02);
  }

}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .section {
    padding: 50px 14px;
  }
  .section__header {
    margin-bottom: 40px;
  }

  /* Hero */
  .hero {
    padding: 58px 14px 32px;
  }
  .hero__blob {
    filter: blur(34px);
  }
  .hero__blob--1 { width: 160px; height: 160px; }
  .hero__blob--2 { width: 140px; height: 140px; }
  .body-corner-sunflower {
    width: 42px;
    bottom: 6px;
    left: 6px;
    opacity: 0.3;
    filter: saturate(0.9) drop-shadow(0 3px 8px rgba(255, 182, 79, 0.08));
  }
  .body-corner-sunflower--right {
    left: auto;
    right: 6px;
  }
  .hero__ornament {
    width: 12px;
    height: 12px;
  }
  .hero__ornament--star { top: 12%; left: 8%; }
  .hero__display {
    margin-bottom: 18px;
    padding: 22px 20px 20px;
    border-radius: 22px;
  }
  .hero__display::before {
    top: -10px;
    width: 56%;
    height: 18px;
  }
  .hero__display::after {
    inset: auto 6% -8px;
    height: 5px;
  }
  .hero__display-line--2 {
    font-size: clamp(32px, 9vw, 44px);
  }

  .hero__sub {
    font-size: 14px;
    padding: 10px 14px;
    margin-bottom: 18px;
  }

  /* Book */
  .book {
    padding: 20px 14px;
  }
  .book__page {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .book__btn {
    padding: 8px 12px;
  }
  .book__page-indicator {
    padding: 6px 10px;
    min-width: 48px;
    font-size: 12px;
  }


  /* Video */
  .video-section {
    max-width: 280px;
  }
  .video-wrap {
    padding: 12px;
  }

  /* Marquee */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}