html { scroll-behavior: smooth; }

/* Optional small helpers */
.font-script { font-family: "Dancing Script", cursive; }

/* If you'd like to soften image edges globally */
img { display: block; max-width: 100%; height: auto; }

/* ===== memories responsive & carousel smooth transition ===== */

/* ensure images don't overflow and tile sizes are compact */
.memories-mosaic img,
.mosaic-item img,
.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* set fixed visual heights for tiles (desktop -> auto, mobile -> compact) */
.mosaic-big { min-height: 220px; }          /* desktop tablet */
.mosaic-item { min-height: 120px; }

/* carousel container: smooth CSS transition for transform */
#memoryCarousel {
  transition: transform 0.56s cubic-bezier(.22,.9,.28,1);
}

/* each slide set to full width so translateX works on multiples of 100% */
.carousel-slide { width: 100%; }

/* make sure the carousel viewport hides overflow */
.memories-carousel .touch-pan-x { overflow: hidden; }

/* ===== mobile specific (<=480px) ===== */
@media (max-width: 480px) {
  /* mosaic becomes compact 2-column grid with small fixed heights */
  .memories-mosaic {
    display: block; /* top-level wrapper retains children */
  }

  /* convert large mosaic to a compact grid: big image will take 2 cols on small screens */
  .memories-mosaic > .mosaic-big,
  .memories-mosaic > .grid {
    margin-bottom: 0.5rem;
  }

  .mosaic-big { min-height: 160px; border-radius: 10px; overflow: hidden; }
  .mosaic-item { min-height: 100px; border-radius: 10px; overflow: hidden; }

  /* small tiles grid */
  .memories-mosaic .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* carousel image heights smaller to avoid huge vertical scroll */
  .memories-carousel .carousel-slide img { height: 180px; object-fit: cover; border-radius: 10px; }

  /* bigger touch-friendly dots */
  .carousel-dots .dot { height: 10px; width: 10px; }

  /* remove heavy decorative absolute shapes on tiny screens */
  .pointer-events-none .absolute { display: none !important; }
}
  

/* Timeline connecting line + reveal animations */

/* Centered timeline + precise reveal tied to line progress */
.timeline-center { position: relative; }

/* Line defaults to hidden (scaleY 0). Will animate to scaleY(1) */
.timeline-line {
  background: linear-gradient(180deg, rgba(255,160,180,0.95), rgba(255,110,150,0.7) 60%, rgba(255,80,140,0.35));
  transform-origin: top;
  transform: scaleY(0);
  transition: none;
  z-index: 5;
}

/* timeline item layout */
.timeline-items { position: relative; }

/* dot sits visually centered on the line */
.timeline-dot { transition: transform .22s ease, background .28s ease, box-shadow .28s ease; }

/* initial (hidden) state for content */
.timeline-content {
  transition: opacity .36s cubic-bezier(.22,.9,.28,1), transform .36s cubic-bezier(.22,.9,.28,1);
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
}

/* when item is revealed (JS will add .revealed on that .timeline-item) */
.timeline-item.revealed .timeline-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* dot pop when revealed */
.timeline-item.revealed .timeline-dot {
  transform: scale(1.12);
  background: linear-gradient(180deg, #ff9ac0, #ff6f9f);
  box-shadow: 0 6px 18px rgba(255,96,145,0.18);
}

/* emoji pop animation inside heading */
.timeline-item.revealed .emoji {
  display: inline-block;
  transform-origin: center;
  animation: emojiPop 420ms cubic-bezier(.22,.9,.28,1) forwards;
}

@keyframes emojiPop {
  0% { transform: scale(0.6) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* run the line grow animation via a class on the wrapper for a fixed duration (controlled by JS) */
.timeline-center.play .timeline-line {
  animation: lineGrow var(--timeline-duration, 4s) linear forwards;
}

@keyframes lineGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (min-width: 0px) {
    .timeline-line { left: 30% !important; transform: translateX(-50%) scaleY(0); position: absolute; top: 0; bottom: 0; width: 6px; border-radius: 999px; }
    .timeline-items { padding-left: 2rem; padding-right: 2rem; }
    .timeline-item { display: flex; align-items: flex-start; gap: 0.75rem; }
    /* keep dot wrapper width so items line up */
    .timeline-dot-wrapper { width: 2rem; min-width: 2rem; position: relative; }
  }

/* make sure the line sits centered and not overlapping text on small screens */
@media (min-width: 0px) {
  .timeline-line { left: 50%; transform: translateX(-50%) scaleY(0); position: absolute; top: 0; bottom: 0; width: 6px; border-radius: 999px; }
  .timeline-items { padding-left: 2rem; padding-right: 2rem; }
  .timeline-item { display: flex; align-items: flex-start; gap: 0.75rem; }
  /* keep dot wrapper width so items line up */
  .timeline-dot-wrapper { width: 2rem; min-width: 2rem; position: relative; }
}

/* responsive: ensure content never overlaps - on tiny screens keep content to right */
@media (max-width: 480px) {
  .timeline-items { max-width: 100%; margin-left: 0; }
  .timeline-line { width: 5px; }
  .timeline-dot { width: 12px; height: 12px; }
  .timeline-dot::after { display: none; }
  .timeline-content p { font-size: 0.92rem; }
}

/* accessibility: prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .timeline-line { animation: none !important; transform: scaleY(1) !important; }
  .timeline-content { transition: none !important; opacity: 1 !important; transform: none !important; }
  .timeline-item .emoji { animation: none !important; transform: none !important; opacity: 1 !important; }
}


/* By default, dots start hidden and scale down (so only when revealed they pop) */
.timeline-dot {
    opacity: 0;
    transform: scale(0);
    transition: transform .22s ease, opacity .22s ease, background .28s ease, box-shadow .28s ease;
  }
  
  /* By default content is hidden (JS/CSS reveal will show it) */
  .timeline-content {
    opacity: 0;
    transform: translateY(-8px) scale(.99);
    transition: opacity .36s cubic-bezier(.22,.9,.28,1), transform .36s cubic-bezier(.22,.9,.28,1);
  }
  
  /* The first item is already revealed on load (we added .revealed in HTML) */
  .timeline-item.revealed .timeline-dot {
    opacity: 1;
    transform: scale(1.12);
    background: linear-gradient(180deg, #ff9ac0, #ff6f9f);
    box-shadow: 0 6px 18px rgba(255,96,145,0.18);
  }
  .timeline-item.revealed .timeline-content {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  /* When JS reveals other items it will add .revealed — same styling applies */
  
  /* ---------- Mobile: place the vertical line at 16% ---------- */
  @media (max-width: 480px) {
    /* position the line at 16% of container width.
       Remove the translateX(-50%) offset here so it sits exactly at 16%. */
    .timeline-line {
      left: 16% !important;
      transform: scaleY(0); /* keep scaleY used for grow animation */
      /* remove translateX portion (some rules used translateX(-50%); override it) */
      translate: none;
    }
  
    /* adjust dot position to align on 16% */
    .timeline-dot {
      left: 16% !important;           /* position relative to wrapper */
      transform: translateX(-50%) scale(0); /* center the dot on the line but keep scaled down when hidden */
      /* make visible when .revealed (overrides transform) */
    }
  
    /* when revealed on mobile the dot grows and centers nicely */
    .timeline-item.revealed .timeline-dot {
      transform: translateX(-50%) scale(1.12);
    }
  
    /* tone down widths so content doesn't overlap */
    .timeline-dot { width: 12px; height: 12px; }
    .timeline-line { width: 5px; border-radius: 999px; }
  
    /* ensure content sits to the right of the line */
    .timeline-items { padding-left: 12% ; } /* gives content room to the right of 16% line */
  }



/* ---------- Dreams enhanced styles (sparkles, connectors, glow, sticky, expand) ---------- */

/* base card visuals */
.dream-card {
    position: relative;
    overflow: visible;
    background-blend-mode: overlay;
    transition: transform .36s cubic-bezier(.22,.9,.28,1), box-shadow .36s ease, border-color .36s ease;
  }
  .dream-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 40px rgba(0,0,0,0.45); border-color: rgba(255,150,200,0.25); }
  
  /* icon circle */
  .icon-wrap { transition: transform .36s ease; }
  
  /* sparkles container (behind the whole section) */
  .sparkles { position: absolute; inset: 0; overflow: visible; z-index: -1; pointer-events: none; }
  
  /* tiny sparkle element */
  .d-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.95), rgba(255,210,235,0.85));
    opacity: 0;
    transform: translateZ(0) scale(.6);
    filter: blur(.6px);
    animation: sparkleAnim 2500ms infinite ease-in-out;
    will-change: transform, opacity;
  }
  
  /* staggered variations */
  .d-sparkle.v1 { animation-delay: 0ms; }
  .d-sparkle.v2 { animation-delay: 300ms; }
  .d-sparkle.v3 { animation-delay: 700ms; }
  .d-sparkle.v4 { animation-delay: 1200ms; }
  
  /* sparkle keyframes */
  @keyframes sparkleAnim {
    0%   { opacity: 0; transform: translateY(0) scale(.6) rotate(0); }
    10%  { opacity: 1; transform: translateY(-6px) scale(1) rotate(20deg); }
    50%  { opacity: 0.6; transform: translateY(-12px) scale(0.9) rotate(40deg); }
    100% { opacity: 0; transform: translateY(-18px) scale(.6) rotate(60deg); }
  }
  
  /* ambient candlelike glow overlay */
  .ambient-glow {
    background: radial-gradient(600px 300px at 20% 20%, rgba(255,180,200,0.08), transparent 15%),
                radial-gradient(500px 250px at 80% 80%, rgba(255,120,170,0.05), transparent 12%);
    transition: opacity .8s ease;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  
  /* show glow when section in view */
  .dreams-enhanced.in-view .ambient-glow { opacity: 1; }
  
  /* SVG connectors full overlay */
  #dreams-svg { width: 100%; height: 100%; display: block; }
  
  /* path style (hand-drawn) */
  .dream-path {
    fill: none;
    stroke: rgba(255,150,200,0.5);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 16px rgba(255,80,140,0.06));
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; /* animated by JS to create pulse/progress */
    transition: stroke-dashoffset .6s linear;
  }
  
  /* heart markers */
  .dream-heart {
    fill: #ff9ac0;
    transform-origin: center;
    opacity: 0;
    transform: scale(0.6);
    transition: transform .28s cubic-bezier(.22,.9,.28,1), opacity .28s ease;
    filter: drop-shadow(0 6px 18px rgba(255,80,140,0.12));
  }
  
  /* when revealed: show heart pop */
  .dream-card.revealed + svg ~ svg, /* fallback, not used */ {}
  
  /* focus/sticky visual: the card that is focused while scrolling */
  .dream-card.focused { transform: translateY(-10px) scale(1.02); box-shadow: 0 26px 48px rgba(0,0,0,0.6); border-color: rgba(255,170,210,0.45); z-index: 20; position: relative; }
  
  /* surprise content */
  .dream-card .surprise { transition: max-height .36s cubic-bezier(.22,.9,.28,1), opacity .36s ease; max-height: 0; overflow: hidden; opacity: 0; }
  .dream-card.expanded .surprise { display:block; opacity: 1; max-height: 220px; margin-top: .5rem; }
  
  /* expand button style */
  .expand-btn { background: transparent; border: none; cursor: pointer; color: inherit; padding: 0; }
  
  /* reveal system (initially invisible) */
  .reveal-item { opacity: 0; transform: translateY(10px); }
  .reveal-item.is-visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.28,1); }
  
  /* accessibility: reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .d-sparkle, .dream-path, .ambient-glow, .dream-card, .reveal-item { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
    #dreams-svg { display: none; }
  }
  
  /* responsive tweaks */
  @media (max-width: 767px) {
    .dreams-enhanced .ambient-glow { opacity: .9; }
    .dream-card { padding: 0.85rem; }
    .dreams-enhanced .icon-wrap { width: 40px; height: 40px; }
  }

  /* ---------- Updated: more sparkles, smoother expand, heart pulse ---------- */

/* --- Sparkles: richer field --- */
.d-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.98), rgba(255,210,235,0.9));
    opacity: 0;
    transform: translateZ(0) scale(.5);
    filter: blur(.9px);
    will-change: transform, opacity;
  }
  
  /* different variations for size/duration */
  .d-sparkle.v1 { animation-name: sparkleAnim1; }
  .d-sparkle.v2 { animation-name: sparkleAnim2; }
  .d-sparkle.v3 { animation-name: sparkleAnim3; }
  .d-sparkle.v4 { animation-name: sparkleAnim4; }
  
  /* longer, more varied keyframes to create softer drifting */
  @keyframes sparkleAnim1 {
    0% { opacity: 0; transform: translateY(0) scale(.5) rotate(0); }
    10% { opacity: 1; transform: translateY(-6px) scale(1) rotate(8deg); }
    60% { opacity: 0.6; transform: translateY(-18px) scale(.9) rotate(18deg); }
    100% { opacity: 0; transform: translateY(-34px) scale(.5) rotate(36deg); }
  }
  @keyframes sparkleAnim2 {
    0% { opacity: 0; transform: translateY(0) scale(.45) rotate(0); }
    15% { opacity: .9; transform: translateY(-8px) scale(.95) rotate(-8deg); }
    55% { opacity: .5; transform: translateY(-22px) scale(.8) rotate(-18deg); }
    100% { opacity: 0; transform: translateY(-40px) scale(.5) rotate(-32deg); }
  }
  @keyframes sparkleAnim3 {
    0% { opacity: 0; transform: translateY(0) scale(.6); }
    12% { opacity: 1; transform: translateY(-12px) scale(1.05); }
    50% { opacity: .5; transform: translateY(-26px) scale(.85); }
    100% { opacity: 0; transform: translateY(-46px) scale(.55); }
  }
  @keyframes sparkleAnim4 {
    0% { opacity: 0; transform: translateY(0) scale(.6); }
    20% { opacity: 0.95; transform: translateY(-6px) scale(1.02); }
    70% { opacity: .45; transform: translateY(-30px) scale(.72); }
    100% { opacity: 0; transform: translateY(-52px) scale(.5); }
  }
  
  /* Per-element animation-duration and delay are set by JS */
  
  /* --- Heart beat animations --- */
  .dream-heart {
    transform-origin: center;
    opacity: 0;
    transform: scale(.6);
    transition: transform .28s cubic-bezier(.22,.9,.28,1), opacity .28s ease;
    fill: #ff6f9f;
  }
  
  /* explicit heartbeat keyframes for stronger effect */
  @keyframes heartBeat {
    0%   { transform: scale(.8); opacity: 0.9; }
    30%  { transform: scale(1.16); opacity: 1; }
    60%  { transform: scale(.94); }
    100% { transform: scale(1); opacity: 1; }
  }
  
  /* add subtle glow when heart is active */
  .dream-heart.heartbeat {
    animation: heartBeat 900ms cubic-bezier(.22,.9,.28,1) 1;
    filter: drop-shadow(0 8px 20px rgba(255,90,140,0.18));
  }
  
  /* pulse the connecting path slightly (soft strokeOpacity pulse) */
  .dream-path.pulse {
    /* Web Animations used in JS for smoother continuous pulse */
  }
  
  /* --- Smooth expand (surprise content) --- */
  .dream-card .surprise {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform-origin: top center;
    transform: translateY(-6px) scale(.995);
    transition: max-height 480ms cubic-bezier(.22,.9,.28,1), opacity 360ms ease, transform 420ms cubic-bezier(.22,.9,.28,1);
  }
  
  /* expanded state: allow comfortable height and visible */
  .dream-card.expanded {
    z-index: 40; /* pop above neighbors */
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  }
  .dream-card.expanded .surprise {
    max-height: 320px; /* large enough for content */
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  /* for keyboard users, show focus ring */
  .dream-card:focus { outline: none; box-shadow: 0 0 0 4px rgba(255,140,190,0.08), 0 18px 40px rgba(0,0,0,0.45); }
  
  /* accessibility: reduced motion disables heavy effects */
  @media (prefers-reduced-motion: reduce) {
    .d-sparkle, .dream-path, .dream-heart, .ambient-glow { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
    .dream-card .surprise { transition: none !important; max-height: 1000px !important; opacity: 1 !important; transform: none !important; }
  }


  /* ---------- Global floating hearts (tiny sparkly hearts) ---------- */

.hearts-field {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
  }
  
  /* heart element (uses inline SVG background for crispness) */
  .f-heart {
    position: absolute;
    width: 16px;   /* default - JS will override per element */
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path fill='%23ff9ac0' d='M12 21s-7.5-4.7-10-7.3C-1.5 9.7 3.7 4 7 6.2 9 7.8 12 11 12 11s3-3.2 5-4.8C20.3 4 25.5 9.7 22 13.7 19.5 16.3 12 21 12 21z'/>\
    </svg>");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.0; /* animated in */
    transform-origin: center;
    will-change: transform, opacity, top, left;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
    pointer-events: none;
  }
  
  /* drift + rise + slight rotate animation (varies by CSS custom properties) */
  @keyframes heartRise {
    0%   { transform: translateY(0) rotate(var(--start-rot, 0deg)) scale(var(--start-scale, 1)); opacity: 0; }
    6%   { opacity: var(--peak-opacity, 0.95); }
    50%  { transform: translateY(calc(var(--moveY, -24vh))) rotate(calc(var(--start-rot, 0deg) + 8deg)) scale(calc(var(--start-scale,1) * 0.98)); opacity: .85; }
    100% { transform: translateY(calc(var(--moveY, -40vh))) rotate(calc(var(--start-rot, 0deg) + 16deg)) scale(calc(var(--start-scale,1) * 0.92)); opacity: 0; }
  }
  
  /* apply animation using CSS variables controlled by JS for diversity */
  .f-heart.animate {
    animation-name: heartRise;
    animation-timing-function: cubic-bezier(.22,.9,.28,1);
    animation-iteration-count: infinite;
    will-change: transform, opacity;
  }
  
  /* smaller / larger baselines (fallback visual) */
  .f-heart.size-sm  { width: 6px; height: 6px; }
  .f-heart.size-md  { width: 10px; height: 10px; }
  .f-heart.size-lg  { width: 14px; height: 14px; }
  
  /* subtle color variants */
  .f-heart.tint-1 { filter: drop-shadow(0 6px 14px rgba(255,120,170,0.14)); }
  .f-heart.tint-2 { filter: drop-shadow(0 6px 18px rgba(255,200,220,0.12)); }
  
  /* reduce motion — show a few hearts statically and turn off animation */
  @media (prefers-reduced-motion: reduce) {
    .f-heart.animate { animation: none !important; opacity: 0.9 !important; transform: translateY(-6vh) scale(1) !important; }
  }
  
  .h-20{
    height: 150px !important;
  }
  .object-scale-down{
    @media (max-width: 767px) {
        object-fit: scale-down !important;
    }
  }

@media (max-width: 767px) {
  .image-height{
    height: 300px;
  }
}

@media (min-width: 768px) {
    .image-height{
      height: 800px;
    }

    .max-h-64 {
      max-height: 30rem !important;
  }
  }
  
  
      .video-container-height {
      max-height: 30rem !important;
  }