/*Nav Glass*/
.glass-nav {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);

    border-bottom: 1px solid rgba(255, 180, 200, 0.35);

    box-shadow:
        0 4px 30px rgba(255, 150, 180, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

    transition: all 0.4s ease;
}
.glass-nav:hover {
    box-shadow:
        0 6px 40px rgba(255, 130, 170, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}


      .svg-box {
    position: relative;
    display: inline-flex;
    padding: 1rem 2rem;

    /* Glass effect */
    background: rgba(255, 230, 235, 0.22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 24px;

    /* Soft border */
    border: 1px solid rgba(255, 200, 210, 0.35);

    /* Romantic glow */
    box-shadow:
      0 0 40px rgba(255, 170, 190, 0.35),
      inset 0 0 30px rgba(255, 255, 255, 0.2);
  }
  .svg-box svg {
    transform: translateX(100px);
  }


  .svg-text {
    position: relative;
    z-index: 2;
  }



.anisa-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  padding: 2rem 2.5rem;
  max-width: 1500px;

  /* Glass effect */
  background: rgba(255, 230, 235, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 24px;

  /* Soft border */
  border: 1px solid rgba(255, 200, 210, 0.35);

  /* Romantic glow */
  box-shadow:
    0 0 40px rgba(255, 170, 190, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
}
.anisa-box {
  animation: floatSoft 6s ease-in-out infinite;
}

@keyframes floatSoft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}





/* =====================
   BACKGROUND ICONS
===================== */
/* === GARIS DIGAMBAR === */
.gallery-line {
  width: 0;
  opacity: 0;
  animation: drawLine 1.2s ease forwards;
  animation-delay: 0.9s;
}

@keyframes drawLine {
  to {
    width: 5rem;
    opacity: 1;
  }
}
.icon-1 {
  font-size: 150px;
  top: 2.5rem;
  left: -20px;
  transform: rotate(45deg);
}

.icon-2 {
  font-size: 100px;
  bottom: 10rem;
  right: -10px;
  transform: rotate(-12deg);
}

.icon-3 {
  font-size: 80px;
  top: 50%;
  left: 2.5rem;
  transform: rotate(12deg);
}

/* =====================
   GALLERY LAYOUT
===================== */

.gallery-title:hover {
  text-shadow:
    0 0 12px rgba(255,180,200,0.6),
    0 0 24px rgba(255,180,200,0.3);
}


.gallery-bg {
  background-image: url("images/bg4.jpg"); /* foto background */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax feel */
}
.gallery-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7, 7, 7, 0.801) 0%,
    rgba(0, 0, 0, 0.251) 40%,
    rgba(248, 248, 248, 0.197) 100%
  );
  z-index: 1;
}



.gallery-columns {
  columns: 1;
  column-gap: 2rem;
}

@media (min-width: 640px) {
  .gallery-columns { columns: 2; }
}

@media (min-width: 1024px) {
  .gallery-columns { columns: 3; }
}

.gallery-subtitle {
  opacity: 0;
  transform: translateY(10px);
  animation: whisperFade 1.2s ease forwards;
  animation-delay: 1.4s;
}

@keyframes whisperFade {
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

/* =====================
   PHOTO CARD
===================== */
.photo-card {
  break-inside: avoid;
  background: white;
  padding: 0.75rem;
  padding-bottom: 2rem;
  border-radius: 6px;
  box-shadow: var(--shadow-depth, 0 10px 25px rgba(0,0,0,.08));
  margin-bottom: 2rem;
  position: relative;
  cursor: pointer;
  transition: transform .5s ease, box-shadow .5s ease;
}

.photo-card:hover {
  transform: rotate(0deg) scale(1.03);
  z-index: 20;
}

/* rotation variants */
.rotate-left { transform: rotate(-2deg); }
.rotate-right { transform: rotate(2deg); }

/* =====================
   TAPE EFFECT
===================== */
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(1deg);
  width: 6rem;
  height: 2rem;
  background: rgba(255, 170, 190, 0.35);
  backdrop-filter: blur(6px);
  opacity: 0.8;
  z-index: 20;
}

/* =====================
   PHOTO FRAME
===================== */
.photo-frame {
  background: #f3f4f6;
  overflow: hidden;
  position: relative;
}

.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-landscape{ aspect-ratio: 4 / 3; }

.photo-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .7s ease;
}

.photo-card:hover .photo-img {
  transform: scale(1.05);
}

/* =====================
   OVERLAY MESSAGE
===================== */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.05);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
}

.photo-card:hover .photo-overlay {
  opacity: 1;
}

.photo-message {
  width: 85%;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.6);
  transform: translateY(1rem) scale(.9);
  transition: all .5s ease .1s;
  font-family: gautama;
  color: #636363;
}

.photo-card:hover .photo-message {
  transform: translateY(0) scale(1);
}

/* =====================
   CAPTION
===================== */
.photo-caption {
  margin-top: 1rem;
  text-align: center;
  font-family: sweeta;
  font-style: italic;
  font-size: 1.125rem;
  color: #4b5563;
  position: relative;
}

.heart-icon {
  font-size: 10px;
  color: var(--color-primary);
  position: absolute;
  top: 0;
  right: -12px;
  animation: pulse 1.5s infinite;
}

.photo-date {
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
  font-size: 0.75rem;
  color: #d1d5db;
}

/* =====================
   ANIMATION
===================== */
@keyframes pulse {
  0%,100% { opacity: .4; }
  50% { opacity: 1; }
}










/* SECTION */
.kenangan-section {
  position: relative;
  padding: 5rem 0;
  background: white;
}

.bg-icon {
  position: absolute;
  font-size: 140px;
  top: 10rem;
  left: 2.5rem;
  opacity: 0.03;
  transform: rotate(-15deg);
}

/* HEADER */
.kenangan-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 1.5rem;
  position: relative;
}

.kenangan-header {
  text-align: center;
  margin-bottom: 4rem;
}

.kenangan-subtitle {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: bold;
  text-transform: uppercase;
  color: #c88;
}

.kenangan-title {
  font-size: 2.5rem;
  font-family: serif;
  color: #181114;
}

/* TIMELINE */
.timeline {
  position: relative;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, #d9a6b3, transparent);
}

/* ITEM */
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6rem;
  position: relative;
}

.timeline-item.reverse {
  flex-direction: row-reverse;
}

/* TEXT */
.timeline-text {
  width: 45%;
}

.timeline-text.right {
  text-align: right;
}

.timeline-title {
  font-size: 2rem;
  margin: 0.5rem 0;
}

.timeline-text p {
  color: #666;
  line-height: 1.7;
}

/* DATE */
.date-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  font-size: 11px;
  border-radius: 999px;
  background: rgba(255, 200, 210, 0.25);
  border: 1px solid rgba(255, 160, 180, 0.4);
}

/* META */
.timeline-meta {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 12px;
  opacity: 0.6;
}

.timeline-meta.right {
  justify-content: flex-end;
}

/* DOT */
.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: white;
  border: 2px solid #e9a5b5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* IMAGE */
.timeline-image {
  width: 25%;
}

.timeline-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  transition: transform 0.5s ease;
}

.timeline-image img:hover {
  transform: scale(1.4);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .timeline-line {
    left: 1rem;
  }

  .timeline-item,
  .timeline-item.reverse {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-text,
  .timeline-image {
    width: 100%;
    padding-left: 3rem;
    text-align: left;
  }

  .timeline-dot {
    left: 1rem;
    transform: none;
  }
}





/* SCROLL REVEAL BASE */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(8px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.19, 1, 0.22, 1),
    filter 1s ease;
  will-change: transform, opacity, filter;
}

/* SAAT AKTIF */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* VARIASI ARAH (BIAR SINEMATIK) */
.timeline-item:not(.reverse).reveal {
  transform: translateX(-80px);
}

.timeline-item.reverse.reveal {
  transform: translateX(80px);
}

.timeline-item.reveal.active {
  transform: translateX(0);
}
/*--------------------------------------*/




/* SECTION KENANGAN */
.kenangan-section {
  position: relative;
  padding: 8rem 1rem;
  overflow: hidden;
  background: #fff;
}

/* BACKGROUND IMAGE */
.kenangan-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) saturate(1.05);
  transform: scale(1.05);
}
.kenangan-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.6)
  );
  
  pointer-events: none;
}
@keyframes slowZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

.bg-video {
  animation: slowZoom 25s ease-in-out infinite alternate;
}




/* GRADIENT + GLOW OVERLAY */
.kenangan-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 200, 210, 0.35),
      transparent 60%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.848),
      rgba(255, 255, 255, 0.255)
    );
  z-index: 1;
}

/* CONTAINER DI ATAS BACKGROUND */
.kenangan-container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: auto;
}

/* ICON LATAR */
.bg-icon {
  position: absolute;
  top: 80px;
  left: 40px;
  font-size: 160px;
  opacity: 0.04;
  color: #e79aa8;
  z-index: 1;
  pointer-events: none;
}
/*----------------------------------------*/







/*bgParallax*/
/* wrapper */
.parallax-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.parallax-wrapper::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(24,17,20,0) 0%,
    rgba(24,17,20,0.4) 60%,
    rgba(24,17,20,0.75) 100%
  );
  z-index: 60;
}



/* gambar dasar */
.parallax {
  position: absolute;
  will-change: transform;
}

/* floating animation */
@keyframes floatY {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-25px); }
  100% { transform: translateY(0px); }
}

@keyframes floatX {
  0%   { transform: translateX(0px); }
  50%  { transform: translateX(15px); }
  100% { transform: translateX(0px); }
}

/* variasi kecepatan */
.float-slow {
  animation: floatY 10s ease-in-out infinite;
}

.float-medium {
  animation: floatY 8s ease-in-out infinite,
             floatX 12s ease-in-out infinite;
}

.float-fast {
  animation: floatY 6s ease-in-out infinite alternate,
            floatX 8s ease-in-out infinite;
}


.bg2 {
    z-index: 40;
    width: 370px;

    top: 43%;      /* jarak dari atas layar */
    left: 41%;

}

.bg1 {
    z-index: 40;
    width: 370px;

    top: 45%;     
    left: -1%;

}

.bg3 {
    z-index: 40;
    width: 380px;

    top: 65%;     
    left: 80%;

}
/*--------------------------------------------*/





/* ROBLOX MEMORIES */
.roblox-bg {
  background-image: url("images/bg4.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* CONTAINER */
.zigzag {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  overflow: hidden;
  padding: 2rem 0;
}

/* TRACK */
.carousel-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}

/* ARAH BERLAWANAN */
.track-left {
  animation: scrollLeft 75s linear infinite;
}

.track-right {
  animation: scrollRight 75s linear infinite;
}

/* PAUSE */
.carousel:hover .carousel-track,
.carousel:active .carousel-track {
  animation-play-state: paused;
}

/* ITEM */
.carousel-item {
  width: 16rem;
  height: 10rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  transition: transform .5s ease;
}

.carousel-item:hover {
  transform: translateY(-8px) scale(1.35);
}

/* IMAGE */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ANIMASI */
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/*------------------------------------------*/