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

:root {
  --purple   : #7C4DFF;
  --lavender : #B388FF;
  --pink     : #FFB3D9;
  --bg       : #1B1425;
  --card-bg  : #2A1F3D;
  --text     : #DDDDDD;
  --text-soft: #9A8FBB;
  --glow     : rgba(124, 77, 255, 0.35);
  --glow-pink: rgba(255, 179, 217, 0.25);
}

html {
  scroll-behavior: smooth;
}

body {
  background : var(--bg);
  color      : var(--text);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  overflow-x : hidden;
  min-height : 100vh;
}

/*Global Mute Button*/
.global-mute {
  position               : fixed;
  top                    : 1.2rem;
  left                   : 1.2rem;
  z-index                : 200;
  background             : rgba(27, 20, 37, 0.78);
  border                 : 1px solid rgba(179, 136, 255, 0.22);
  border-radius          : 50%;
  width                  : 42px;
  height                 : 42px;
  display                : flex;
  align-items            : center;
  justify-content        : center;
  font-size              : 1.15rem;
  cursor                 : pointer;
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition             : background 0.2s, border-color 0.2s, transform 0.2s;
  line-height            : 1;
}

.global-mute:hover {
  background  : rgba(124, 77, 255, 0.35);
  border-color: rgba(179, 136, 255, 0.55);
  transform   : scale(1.1);
}

.global-mute.muted {
  border-color: rgba(255, 179, 217, 0.45);
  background  : rgba(80, 20, 60, 0.78);
}

/*Particle Canvas*/
#particles {
  position      : fixed;
  inset         : 0;
  z-index       : 0;
  pointer-events: none;
}

/*Hero*/
.hero {
  position       : relative;
  z-index        : 1;
  min-height     : 100vh;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  padding        : 2rem;
  gap            : 1.4rem;
}

.hero-eyebrow {
  font-family   : 'Poppins', sans-serif;
  font-size     : 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color         : var(--lavender);
  opacity       : 0;
  animation     : fadeUp 1.2s ease 0.3s forwards;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size  : clamp(3rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
  color      : #fff;
  opacity    : 0;
  animation  : fadeUp 1.2s ease 0.6s forwards;
}

.hero-title em {
  font-style             : italic;
  background             : linear-gradient(135deg, var(--lavender), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
}

.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size  : clamp(1rem, 2.5vw, 1.35rem);
  font-style : italic;
  color      : var(--text-soft);
  max-width  : 480px;
  opacity    : 0;
  animation  : fadeUp 1.2s ease 0.9s forwards;
}

.hero-divider {
  width     : 60px;
  height    : 1px;
  background: linear-gradient(90deg, transparent, var(--lavender), transparent);
  opacity   : 0;
  animation : fadeUp 1.2s ease 1.1s forwards;
}

.hero-scroll-hint {
  position      : absolute;
  bottom        : 2.5rem;
  font-size     : 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color         : var(--text-soft);
  opacity       : 0;
  animation     : fadeUp 1.2s ease 1.5s forwards;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0.5rem;
}

.hero-scroll-hint::after {
  content   : '';
  display   : block;
  width     : 1px;
  height    : 40px;
  background: linear-gradient(to bottom, var(--lavender), transparent);
  animation : scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity  : 0.4;
    transform: scaleY(1);
  }

  50% {
    opacity  : 1;
    transform: scaleY(1.1);
  }
}

/*Gallery Section*/
.gallery-section {
  position : relative;
  z-index  : 1;
  padding  : 5rem 2rem 6rem;
  max-width: 1300px;
  margin   : 0 auto;
}

.section-label {
  text-align    : center;
  font-size     : 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color         : var(--lavender);
  margin-bottom : 3.5rem;
}

/* CSS Masonry */
.gallery-grid {
  columns   : 3 280px;
  column-gap: 1.4rem;
}

.gallery-card {
  break-inside : avoid;
  margin-bottom: 1.4rem;
  background   : var(--card-bg);
  border-radius: 14px;
  overflow     : hidden;
  cursor       : pointer;
  position     : relative;
  transition   : transform 0.35s cubic-bezier(.25, .8, .25, 1),
    box-shadow 0.35s cubic-bezier(.25, .8, .25, 1);
  border: 1px solid rgba(179, 136, 255, 0.08);
}

.gallery-card:hover {
  transform : translateY(-6px);
  box-shadow: 0 14px 50px var(--glow), 0 0 0 1px rgba(179, 136, 255, 0.18);
}

.gallery-card:hover .card-img {
  transform: scale(1.04);
}

.card-img-wrap {
  overflow: hidden;
  display : block;
  width   : 100%;
}

.card-img {
  width     : 100%;
  display   : block;
  transition: transform 0.5s cubic-bezier(.25, .8, .25, 1);
  background: linear-gradient(135deg, #2A1F3D, #3D2A5A);
  min-height: 180px;
  object-fit: cover;
}

.card-body {
  padding: 1rem 1.15rem 1.2rem;
}

.card-title {
  font-family  : 'Cormorant Garamond', serif;
  font-size    : 1.1rem;
  font-weight  : 400;
  color        : #fff;
  margin-bottom: 0.4rem;
}

.card-caption {
  font-size  : 0.78rem;
  line-height: 1.65;
  color      : var(--text-soft);
  font-style : italic;
}

.card-caption::before {
  content       : '\201C';
  color         : var(--pink);
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.4rem;
  line-height   : 0;
  vertical-align: -0.4em;
  margin-right  : 2px;
}

/*Lightbox*/
.lightbox {
  position       : fixed;
  inset          : 0;
  z-index        : 100;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 2rem;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 0.3s ease;
}

.lightbox.open {
  opacity       : 1;
  pointer-events: all;
}

.lightbox-backdrop {
  position               : absolute;
  inset                  : 0;
  background             : rgba(15, 10, 25, 0.88);
  backdrop-filter        : blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lightbox-inner {
  position      : relative;
  z-index       : 1;
  max-width     : min(90vw, 900px);
  max-height    : 92vh;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 1rem;
  transform     : scale(0.95);
  transition    : transform 0.35s cubic-bezier(.25, .8, .25, 1);
}

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

.lightbox-img {
  max-width    : 100%;
  max-height   : 60vh;
  border-radius: 10px;
  box-shadow   : 0 0 80px rgba(124, 77, 255, 0.3);
  object-fit   : contain;
  display      : block;
  flex-shrink  : 0;
}

.lightbox-title {
  font-family: 'Cormorant Garamond', serif;
  font-size  : 1.4rem;
  font-weight: 400;
  color      : #fff;
  text-align : center;
  flex-shrink: 0;
  margin-top : 0.5rem;
}

.lightbox-caption {
  font-size  : 0.95rem;
  line-height: 1.7;
  color      : #c4b8e0;
  font-style : italic;
  text-align : center;
  max-width  : 560px;
  flex-shrink: 0;
  padding    : 0 1rem;
}

/* Close button */
.lightbox-close {
  position   : absolute;
  top        : -2.5rem;
  right      : 0;
  background : none;
  border     : none;
  color      : var(--text-soft);
  font-size  : 1.4rem;
  cursor     : pointer;
  padding    : 0.25rem 0.5rem;
  transition : color 0.2s;
  line-height: 1;
}

.lightbox-close:hover {
  color: var(--pink);
}

/* mute button*/
.lightbox-mute {
  position       : absolute;
  top            : 0;
  left           : 0;
  background     : rgba(27, 20, 37, 0.78);
  border         : 1px solid rgba(179, 136, 255, 0.22);
  border-radius  : 50%;
  width          : 36px;
  height         : 36px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1rem;
  cursor         : pointer;
  transition     : background 0.2s, border-color 0.2s;
  z-index        : 3;
  backdrop-filter: blur(6px);
  line-height    : 1;
}

.lightbox-mute:hover {
  background  : rgba(124, 77, 255, 0.35);
  border-color: rgba(179, 136, 255, 0.5);
}

/* Nav arrows */
.lightbox-nav {
  position       : absolute;
  top            : 30%;
  transform      : translateY(-50%);
  background     : rgba(42, 31, 61, 0.7);
  border         : 1px solid rgba(179, 136, 255, 0.15);
  color          : var(--lavender);
  width          : 44px;
  height         : 44px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  font-size      : 1.1rem;
  transition     : background 0.2s, color 0.2s;
  z-index        : 2;
}

.lightbox-nav:hover {
  background: rgba(124, 77, 255, 0.3);
  color     : #fff;
}

.lightbox-nav.prev {
  left: -3.5rem;
}

.lightbox-nav.next {
  right: -3.5rem;
}

/*Appreciation Section*/
.appreciation {
  position  : relative;
  z-index   : 1;
  padding   : 5rem 2rem 7rem;
  text-align: center;
  max-width : 600px;
  margin    : 0 auto;
}

.appreciation-label {
  font-size     : 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color         : var(--pink);
  margin-bottom : 2rem;
  display       : block;
}

.appreciation-text {
  font-family: 'Cormorant Garamond', serif;
  font-size  : clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 300;
  line-height: 1.8;
  color      : var(--text);
}

.appreciation-text em {
  font-style: italic;
  color     : var(--lavender);
}

.appreciation-sig {
  margin-top    : 2.5rem;
  font-size     : 0.75rem;
  letter-spacing: 0.2em;
  color         : var(--text-soft);
}

/*Watermelon Easter Egg*/
.watermelon-wrap {
  position      : fixed;
  bottom        : 1.8rem;
  right         : 1.8rem;
  z-index       : 50;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0.3rem;
}

.watermelon-hint {
  font-size     : 0.58rem;
  letter-spacing: 0.12em;
  color         : var(--text-soft);
  opacity       : 0.5;
  transition    : opacity 0.3s;
}

.watermelon-wrap:hover .watermelon-hint {
  opacity: 1;
}

.watermelon-btn {
  font-size  : 2rem;
  background : none;
  border     : none;
  cursor     : pointer;
  transition : transform 0.3s cubic-bezier(.34, 1.56, .64, 1), filter 0.3s ease;
  filter     : drop-shadow(0 0 6px rgba(255, 179, 217, 0));
  line-height: 1;
}

.watermelon-btn:hover {
  transform: scale(1.2) rotate(-8deg);
  filter   : drop-shadow(0 0 10px rgba(255, 179, 217, 0.6));
}

.watermelon-btn.playing {
  animation: wmPulse 1.8s ease-in-out infinite;
  filter   : drop-shadow(0 0 12px rgba(255, 179, 217, 0.5));
}

@keyframes wmPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12) rotate(4deg);
  }
}

/*Animations*/
@keyframes fadeUp {
  from {
    opacity  : 0;
    transform: translateY(18px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity   : 0;
  transform : translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity  : 1;
  transform: none;
}

/*Responsive*/
@media (max-width: 700px) {
  .gallery-grid {
    columns: 1 260px;
  }

  .lightbox {
    padding: 1rem;
  }

  .lightbox-nav {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .gallery-grid {
    columns: 2 240px;
  }
}

/*Scrollbar*/
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background   : #3D2A5A;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--purple);
}