:root {
  /* Cool Lavender-Grey Light Mode — soft periwinkle & violet */
  --bg-dark: #2D2B4E;
  /* deep muted indigo — dramatic sections */
  --bg-light: #d0d5f7;
  /* soft lavender-grey — main airy background */
  --bg-bold: #d0d3f9;
  /* slightly deeper lavender — alternating sections */

  --text-light: #F0F1F8;
  /* near-white with lavender tint for dark sections */
  --text-dark: #1C1B30;
  /* deep indigo-ink — readable on light backgrounds */

  --accent-gold: #5B5BD6;
  /* bold violet — hero accent (like the = button) */
  --accent-red: #9898D0;
  /* muted periwinkle — secondary accents */
  --accent-blue: #7B7FBF;
  /* medium periwinkle — quotes/borders */
  --accent-peach: #C8C9E8;
  /* pale lavender — subtle highlights */
  --accent-mint: #B0B2D8;
  /* soft blue-lilac */

  /* Derived utility tones */
  --accent-ink: #2D2B4E;
  --accent-warm-mid: #9898D0;
  /* periwinkle mid for borders/lines */

  --font-serif: 'Noto Serif Bengali', 'Cinzel', serif;
  --font-sans: 'Noto Sans Bengali', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none;
  /* Hide default cursor */
}

body {
  background-color: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

/* Subtle paper grain texture over entire page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

body.perf-lite::before {
  display: none;
}

body.perf-lite .kobita-float {
  animation: none;
  transition: none;
}

body.perf-lite .img-parallax {
  transform: scale(1.08);
  will-change: auto;
}

body.perf-lite .lightbox {
  backdrop-filter: none;
}

body.perf-lite .story-section:not(.story-card-open) .story-text::before,
body.perf-lite .story-text .chapter-body {
  filter: none !important;
}

::selection {
  background-color: rgba(91, 91, 214, 0.18);
  color: var(--text-dark);
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: var(--accent-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, mix-blend-mode 0.3s;
  mix-blend-mode: difference;
}

.custom-cursor.hovered {
  width: 70px;
  height: 70px;
  background-color: var(--text-light);
  mix-blend-mode: difference;
}

/* Cursor Glow */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 91, 214, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
}

body:hover .cursor-glow {
  opacity: 1;
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  background-color: var(--bg-dark);
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 1.5s;
}

.loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-text {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: #afaff8;
  letter-spacing: 2px;
}

.pulse-text {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.7;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Navigation Dots */
.nav-dots {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  z-index: 100;
  mix-blend-mode: difference;
}

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(45, 43, 78, 0.25);
  background: transparent;
  transition: all 0.4s ease;
}

.nav-dot.active {
  background: var(--text-dark);
  transform: scale(1.4);
}

/* Utilities */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
  font-weight: 300;
}

.accent-color {
  color: var(--accent-gold);
}

.accent-color-dark {
  color: #3A3A9E;
}

.text-light {
  color: var(--text-light) !important;
}

.text-dark {
  color: var(--text-dark) !important;
}

.center {
  text-align: center;
}

/* Backgrounds */
.section-dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

.section-light {
  background-color: var(--bg-light);
  color: var(--text-dark);
}

.section-bold {
  background-color: var(--bg-bold);
  color: var(--text-dark);
}

/* Reveal Text Animations */
.reveal-text .line {
  display: block;
  overflow: hidden;
}

.reveal-text .line .inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-text.in-view .line .inner {
  transform: translateY(0);
}

.reveal-text.delay-1 .line .inner {
  transition-delay: 0.1s;
}

.reveal-text.delay-2 .line .inner {
  transition-delay: 0.2s;
}

.reveal-text.delay-3 .line .inner {
  transition-delay: 0.3s;
}

/* Reveal Up (Simple Fade/Slide) */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-up.delay-1 {
  transition-delay: 0.1s;
}

.reveal-up.delay-2 {
  transition-delay: 0.2s;
}

.reveal-up.delay-3 {
  transition-delay: 0.3s;
}

/* Image Reveal Mask */
.reveal-mask {
  position: relative;
  overflow: hidden;
}

.image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: top;
  transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.overlay-dark {
  background-color: var(--bg-dark);
}

.overlay-light {
  background-color: var(--bg-light);
}

.overlay-bold {
  background-color: var(--bg-bold);
}

.reveal-mask.in-view .image-overlay {
  transform: scaleY(0);
}

.hero-image-wrapper.delay-3 .image-overlay {
  transition-delay: 0.5s;
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 20vh 10vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.firefly-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.kobita-bg-verses {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.kobita-float {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--size);
  color: rgba(255, 255, 255, var(--opacity));
  white-space: nowrap;
  animation: kobita-drift var(--speed) ease-in-out infinite alternate;
  transition: transform 0.2s ease-out;
}

@keyframes kobita-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(15px, -10px) rotate(1deg);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.pre-title {
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: var(--accent-red);
}

.hero-quote {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.hero-quote .indent {
  display: inline-block;
  padding-left: 2em;
}

.post-title {
  font-size: 1.5rem;
  line-height: 1.6;
  opacity: 0.9;
}

.hero-image-wrapper {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 45vw;
  height: 75vh;
  z-index: 1;
}

.hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 10vw;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0.7;
  z-index: 5;
  transition: opacity 0.5s;
}

.scroll-down .line {
  width: 60px;
  height: 1px;
  background-color: var(--text-light);
}

/* Story Sections */
.story-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15vh 10vw;
  min-height: 90vh;
}

.story-text {
  flex: 0 0 40%;
  max-width: 500px;
}

.left-text {
  order: 2;
  margin-left: auto;
}

.chapter-num {
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.chapter-title {
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.title-accent-line {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 2rem;
}

.accent-gold {
  background-color: var(--accent-gold);
}

.accent-dark {
  background-color: var(--accent-gold);
}

.accent-light {
  background-color: var(--accent-warm-mid);
}

.opacity-50 {
  opacity: 0.6;
}

.chapter-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.chapter-desc {
  font-size: 1.15rem;
  line-height: 2.2;
  opacity: 0.9;
}

.chapter-quote {
  font-size: 1.1rem;
  font-style: italic;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent-gold);
  color: var(--accent-gold);
  line-height: 1.8;
}

.quote-red {
  border-left-color: var(--accent-red);
  color: var(--accent-red);
}

.quote-gold {
  border-left-color: var(--accent-gold);
  color: var(--accent-gold);
}

.story-visual {
  flex: 0 0 50%;
  position: relative;
}

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

.right-aligned {
  margin-left: auto;
}

.left-aligned {
  margin-right: auto;
  order: -1;
}

.vertical-img .reveal-mask {
  aspect-ratio: 3 / 4;
  width: 100%;
}

.vertical-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.massive-img .reveal-mask {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.massive-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Parallax Image Base */
.img-parallax {
  transform: scale(1.15);
  /* Match the JS base scale to prevent jumping */
}

body:not(.perf-lite) .img-parallax {
  will-change: transform;
}

/* ============================================
   Photo Collage — Scattered Multi-Photo Layout
   ============================================ */
.photo-collage {
  flex: 0 0 55%;
  position: relative;
  min-height: 520px;
}

.collage-photo {
  position: absolute;
  background: #F0F1F8;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 3px 6px 20px rgba(45, 43, 78, 0.14);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s ease, z-index 0s;
  z-index: 1;
}

.collage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  filter: saturate(0.9);
  transition: filter 0.4s ease;
}

.collage-photo:hover {
  z-index: 10;
  transform: rotate(0deg) scale(1.08) !important;
  box-shadow: 5px 12px 30px rgba(45, 43, 78, 0.20);
}

.collage-photo:hover img {
  filter: saturate(1.1);
}

/* --- Smile Section Collage (3 photos + hearts) --- */
.collage-smile .cp-1 {
  width: 260px;
  height: 340px;
  top: 0;
  left: 10%;
  transform: rotate(-4deg);
}

.collage-smile .cp-2 {
  width: 220px;
  height: 280px;
  top: 60px;
  left: 55%;
  transform: rotate(5deg);
  z-index: 2;
}

.collage-smile .cp-3 {
  width: 200px;
  height: 250px;
  top: 250px;
  left: 25%;
  transform: rotate(-2deg);
  z-index: 3;
}

/* Heart Doodles */
.doodle-heart {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

.doodle-heart::before {
  content: '♥';
  display: block;
  color: var(--accent-gold);
  opacity: 0.35;
}

.doodle-heart-1 {
  top: -10px;
  left: 5%;
}

.doodle-heart-1::before {
  font-size: 2.5rem;
}

.doodle-heart-2 {
  top: 180px;
  right: 5%;
}

.doodle-heart-2::before {
  font-size: 1.5rem;
  opacity: 0.25;
}

.doodle-heart-3 {
  bottom: 30px;
  left: 60%;
}

.doodle-heart-3::before {
  font-size: 1.8rem;
  opacity: 0.3;
}


/* --- Books Section Collage (4 photos + quote + book) --- */
.collage-books .cp-1 {
  width: 240px;
  height: 310px;
  top: 0;
  left: 0;
  transform: rotate(-3deg);
}

.collage-books .cp-2 {
  width: 200px;
  height: 260px;
  top: 30px;
  left: 50%;
  transform: rotate(4deg);
  z-index: 2;
}

.collage-books .cp-3 {
  width: 180px;
  height: 230px;
  top: 240px;
  left: 15%;
  transform: rotate(2deg);
  z-index: 3;
}

.collage-books .cp-4 {
  width: 190px;
  height: 140px;
  top: 310px;
  left: 55%;
  transform: rotate(-5deg);
  z-index: 2;
}

/* Quote Doodle */
.doodle-quote {
  position: absolute;
  top: -20px;
  right: 10%;
  font-family: var(--font-serif);
  font-size: 6rem;
  color: var(--accent-gold);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

/* Book Icon Doodle */
.doodle-book {
  position: absolute;
  bottom: 20px;
  left: 5%;
  width: 50px;
  height: 35px;
  color: var(--accent-gold);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}


/* --- Canvas/Art Section Collage (3 photos + splatters + brush) --- */
.collage-canvas .cp-1 {
  width: 280px;
  height: 350px;
  top: 0;
  left: 5%;
  transform: rotate(3deg);
}

.collage-canvas .cp-2 {
  width: 220px;
  height: 280px;
  top: 80px;
  left: 55%;
  transform: rotate(-5deg);
  z-index: 2;
}

.collage-canvas .cp-3 {
  width: 200px;
  height: 260px;
  top: 270px;
  left: 20%;
  transform: rotate(2deg);
  z-index: 3;
}

/* Paint Splatter Doodles */
.doodle-splat {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

.doodle-splat-1 {
  width: 18px;
  height: 18px;
  top: -5px;
  right: 15%;
  background: var(--accent-gold);
  opacity: 0.4;
}

.doodle-splat-2 {
  width: 12px;
  height: 12px;
  top: 200px;
  right: 5%;
  background: var(--accent-red);
  opacity: 0.35;
}

.doodle-splat-3 {
  width: 22px;
  height: 22px;
  bottom: 40px;
  left: 3%;
  background: #A0A2D8;
  opacity: 0.3;
  border-radius: 50% 40% 55% 45%;
}

/* Brush Icon Doodle */
.doodle-brush {
  position: absolute;
  top: 10px;
  right: 5%;
  width: 35px;
  height: 50px;
  color: var(--accent-gold);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* Memory Canvas & Polaroid Wall */
.memory-canvas {
  padding: 15vh 10vw;
}

.huge-text {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: var(--accent-gold);
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.7;
}

.polaroid-wall {
  padding-top: 5rem;
  padding-bottom: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 3rem;
}

.frame-wrapper {
  position: relative;
  /* Wraps polaroid to keep transform/rotate decoupled from reveal-up */
}

.polaroid {
  background: #F0F1F8;
  padding: 12px 12px 50px 12px;
  box-shadow: 2px 10px 25px rgba(45, 43, 78, 0.12);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.6s ease;
  border-radius: 12px;
  overflow: visible;
}

.polaroid::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 90px;
  height: 28px;
  background: rgba(180, 182, 220, 0.55);
  box-shadow: 0 1px 3px rgba(45, 43, 78, 0.10);
  transform: translateX(-50%) rotate(-3deg);
  z-index: 10;
}

.frame-wrapper:nth-child(even) .polaroid {
  transform: rotate(3deg);
}

.frame-wrapper:nth-child(odd) .polaroid {
  transform: rotate(-2deg);
}

.frame-wrapper:nth-child(3n) .polaroid {
  transform: rotate(-4deg);
}

.frame-wrapper:nth-child(4n) .polaroid {
  transform: rotate(1.5deg);
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.05) translateY(-5px) !important;
  box-shadow: 5px 15px 30px rgba(45, 43, 78, 0.16);
  z-index: 50;
}

.polaroid img,
.polaroid-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: rgba(180, 182, 220, 0.18);
  border-radius: 6px;
  filter: grayscale(20%);
  transition: filter 0.5s ease;
}

.polaroid:hover img {
  filter: grayscale(0%);
}

.polaroid-caption {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #2D2B4E;
  font-size: 1.2rem;
}

/* Footer Love Letter */
.love-letter {
  padding: 15vh 10vw 20vh;
  border-top: 1px solid rgba(91, 91, 214, 0.12);
  display: flex;
  justify-content: center;
}

.letter-inner {
  max-width: 800px;
  text-align: center;
}

.letter-inner h3 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--accent-gold);
}

.letter-inner p {
  font-size: 1.5rem;
  line-height: 2.2;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.letter-inner .signature {
  margin-top: 3rem;
  font-style: italic;
  font-size: 1.2rem;
  opacity: 0.7;
}

.chithi-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.chithi-line.line-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 45, 0.95);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 3rem;
  color: #fff;
  background: none;
  border: none;
  opacity: 0.7;
  transition: opacity 0.3s;
  padding: 10px;
  cursor: pointer;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  max-width: 90vw;
  max-height: 90vh;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.lightbox.open .lightbox-inner {
  transform: scale(1) translateY(0);
}

.lightbox-img {
  max-width: 80vw;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  font-size: 1.5rem;
  color: var(--text-light);
  text-align: center;
}

.lightbox-story {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 600px;
  line-height: 1.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {

  /* Elegant Hero Mobile */
  .hero {
    padding: 15vh 5vw;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero-image-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: 0;
  }

  .hero-image-wrapper img {
    opacity: 0.50;
    border-radius: 0;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    margin-top: 5vh;
  }

  .hero-quote {
    font-size: 3.2rem;
  }

  .hero-quote .indent {
    padding-left: 0;
    display: block;
  }

  .scroll-down {
    display: none;
  }

  .nav-dots {
    display: none;
  }

  /* Torn Scrapbook Page Story Cards */
  .story-section {
    flex-direction: column;
    padding: 6vh 5vw var(--story-pad-bottom, 0px);
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    min-height: auto;
    /* padding-bottom is always 0 on mobile (JS sets --story-pad-bottom to 0px),
       so there is no benefit animating it — removing avoids reflow jitter */
    transition: none;
  }

  .story-visual,
  .photo-collage {
    order: 1;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .left-text {
    margin-left: 0;
  }

  /* Mobile Photo Collage */
  .photo-collage {
    min-height: var(--mobile-collage-height, 440px);
    flex: none;
    /* 'paint' containment creates a new stacking context and contains
       overflow repaints without breaking position:absolute children
       the way 'layout' containment would */
    contain: paint;
    /* Own compositor layer so card margin animation below doesn't
       trigger a repaint of the collage background */
    will-change: transform;
    transform: translateZ(0);
  }

  .collage-photo {
    padding: 5px;
    /* Each photo on its own layer to avoid cross-photo repaint */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Smile mobile */
  .collage-smile .cp-1 {
    width: 50%;
    height: 220px;
    top: 0;
    left: 5%;
  }

  .collage-smile .cp-2 {
    width: 45%;
    height: 190px;
    top: 32px;
    left: 50%;
  }

  .collage-smile .cp-3 {
    width: 47%;
    height: 172px;
    top: 222px;
    left: 10%;
  }

  /* Books mobile */
  .collage-books .cp-1 {
    width: 48%;
    height: 200px;
    top: 0;
    left: 2%;
  }

  .collage-books .cp-2 {
    width: 42%;
    height: 178px;
    top: 20px;
    left: 52%;
  }

  .collage-books .cp-3 {
    width: 40%;
    height: 160px;
    top: 178px;
    left: 8%;
  }

  .collage-books .cp-4 {
    width: 46%;
    height: 130px;
    top: 200px;
    left: 50%;
    transform: rotate(-5deg);
  }

  /* Canvas mobile */
  .collage-canvas .cp-1 {
    width: 52%;
    height: 230px;
    top: 0;
    left: 3%;
  }

  .collage-canvas .cp-2 {
    width: 44%;
    height: 188px;
    top: 52px;
    left: 50%;
  }

  .collage-canvas .cp-3 {
    width: 45%;
    height: 178px;
    top: 206px;
    left: 12%;
  }

  /* Hide larger doodles on very small screens, keep subtle ones */
  .doodle-quote {
    font-size: 4rem;
  }

  .doodle-book {
    width: 35px;
    height: 25px;
  }

  .doodle-brush {
    width: 25px;
    height: 38px;
  }

  .vertical-img .reveal-mask,
  .massive-img .reveal-mask {
    width: 100%;
  }

  .story-text {
    --story-rotate: 0deg;
    order: 2;
    width: 46%;
    max-width: 260px;
    min-height: 150px;
    max-height: 220px;
    margin: -10.8rem 0 0 auto;
    position: relative;
    z-index: 7;
    padding: 1rem 0.95rem 0.95rem;
    border: none;
    border-radius: 16px;
    background: linear-gradient(160deg, #B5C1F5 0%, #9DAAF0 100%);
    color: var(--text-dark);
    box-shadow: 5px 11px 26px rgba(45, 43, 78, 0.16);
    transform-origin: center center;
    transform: rotate(var(--story-rotate)) translateZ(0);
    overflow: hidden;
    cursor: pointer;
    /* translateZ(0) promotes to GPU layer — margin-top change is unavoidable
       because the card needs to reflow into the open layout position.
       We keep it in the transition so it animates rather than snaps, but
       pair it with translateZ(0) so the browser composites the card on
       its own layer and doesn't repaint the collage behind it. */
    will-change: transform, width, max-width, max-height, margin-top, margin-right;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      margin-top 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      margin-right 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      margin-bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.35s ease;
  }

  .story-text::before {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: -1;
    background: inherit;
    border-radius: inherit;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    filter: none;
    opacity: 0;
    transform: scale(0.985);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-text:focus-visible {
    outline: 2px solid rgba(91, 91, 214, 0.8);
    outline-offset: 3px;
  }

  .section-dark .story-text {
    background: linear-gradient(160deg, #514A9D 0%, #443E8C 100%);
    color: #EDEEF5;
  }

  .section-bold .story-text {
    background: linear-gradient(160deg, #B4B9F5 0%, #9EA4F0 100%);
    color: var(--text-dark);
  }

  .story-text::after {
    content: 'খুলে পড়ো';
    display: block;
    margin-top: 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.78;
    font-family: var(--font-sans);
    font-weight: 400;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .story-text .chapter-num {
    font-size: 0.8rem;
    margin-bottom: 0.45rem;
    letter-spacing: 0.08em;
  }

  .story-text .chapter-title {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    margin-bottom: 0;
  }

  .story-text .title-accent-line {
    display: block;
    opacity: 0;
    transform: scaleX(0.2);
    transform-origin: left center;
    margin-bottom: 0.2rem;
    transition: opacity 0.35s ease 0.05s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, margin-bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
  }

  .story-text .chapter-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(22px);
    transition: max-height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.35s ease,
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #books:not(.story-card-open) .story-text {
    align-self: flex-end;
    width: 44%;
    margin-top: -8rem;
    margin-right: 30%;
    --story-rotate: -4deg;
  }

  /* Let smile collage float over the next section (mobile scrapbook effect) */
  #smile:not(.story-card-open) {
    z-index: 3;
  }

  #smile:not(.story-card-open) .story-text {
    align-self: flex-end;
    width: 44%;
    margin-top: -10.8rem;
    margin-right: 1.5%;
    --story-rotate: -6deg;
  }

  #canvas:not(.story-card-open) .story-text {
    align-self: flex-end;
    width: 43%;
    margin-top: -12rem;
    margin-right: 1%;
    --story-rotate: 4deg;
  }

  .story-section.story-card-open .story-text {
    width: 100%;
    max-width: min(90vw, 38rem);
    max-height: 800px;
    margin-top: -1.2rem;
    margin-right: max(0px, calc((100% - min(90vw, 38rem)) / 2));
    margin-bottom: -1rem;
    margin-left: auto;
    align-self: flex-end;
    padding: 1.8rem 1.4rem 1.5rem 1.4rem;
    --story-rotate: 0deg;
    overflow: visible;
    cursor: pointer;
  }

  .story-section.story-card-open .story-text::before {
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    filter: url(#torn-edge);
    opacity: 1;
    transform: scale(1);
  }

  .story-section.story-card-open .story-text::after {
    opacity: 0;
    transform: translateY(12px);
    margin-top: 0.35rem;
  }

  .story-section.story-card-open .story-text .chapter-title {
    font-size: clamp(1.3rem, 4vw, 2rem);
    margin-bottom: 0.5rem;
    line-height: 1;
  }

  .story-section.story-card-open .story-text .title-accent-line {
    opacity: 1;
    transform: scaleX(1);
    margin-bottom: 1.2rem;
    transition: opacity 0.5s ease 0.05s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.02s, margin-bottom 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-section.story-card-open .story-text .chapter-body {
    max-height: 500px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    gap: 1.1rem;
    transition: max-height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.5s ease 0.08s,
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  }

  .lightbox {
    backdrop-filter: none;
  }

  .story-section.story-card-open .story-text .chapter-desc {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  /* Scrapbook backgrounds — no ribbon, just raw paper feel */
  .section-dark.story-card-open .story-text {
    background: #4A4499;
    color: #EDEEF5;
    border-left: none;
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.4);
  }

  .section-light.story-card-open .story-text {
    background: #A9B6F5;
    color: var(--text-dark);
    border-left: none;
    box-shadow: 4px 8px 24px rgba(45, 43, 78, 0.10);
  }

  .section-bold.story-card-open .story-text {
    background: #A5AAF5;
    color: var(--text-dark);
    border-left: none;
    box-shadow: 4px 8px 24px rgba(45, 43, 78, 0.18);
  }



  .title-accent-line {
    margin-bottom: 1.5rem;
  }

  .chapter-quote {
    padding-left: 1rem;
    border-left-width: 2px;
    font-size: 0.95rem;
  }

  /* Ensure quotes and numbers are readable against saturated backgrounds */
  .section-light .story-text .chapter-quote,
  .section-bold .story-text .chapter-quote {
    color: rgba(28, 27, 48, 0.85) !important;
    border-left-color: #3A3A9E !important;
  }

  .section-dark .story-text .chapter-quote {
    color: rgba(240, 241, 248, 0.9) !important;
    border-left-color: #C8C9E8 !important;
  }

  .story-section .story-text .chapter-num {
    opacity: 0.8 !important;
  }

  .memory-canvas {
    padding: 10vh 5vw;
  }

  .masonry-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .huge-text {
    font-size: 3rem;
  }

  .love-letter {
    padding: 10vh 5vw;
  }

  .letter-inner p {
    font-size: 1.3rem;
  }
}

@media (hover: none) {
  .collage-photo,
  .collage-photo img,
  .polaroid,
  .polaroid img,
  .polaroid-placeholder {
    transition: none !important;
  }
}

@media (max-width: 480px) {
  .hero-quote {
    font-size: 2.8rem;
  }

  .masonry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .polaroid::before {
    top: -10px;
    width: 70px;
    height: 22px;
  }
}