/* ═══════════════════════════════════════════════════════════════════════
   Memorygraph Weddings — Shared Animation & Interaction Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES (Dark / Light) ── */
:root {
  --ivory:    #f4ede0;
  --ivory-2:  #ece4d4;
  --ink:      #1a1814;
  --ink-soft: #3a3530;
  --teal:     #1d5959;
  --teal-2:   #2a7575;
  --teal-deep:#0f3838;
  --gold:     #b8965a;
  --gold-2:   #d4a96a;
  --mist:     #8b857a;
  --line:     rgba(26,24,20,.12);
  --line-2:   rgba(26,24,20,.06);
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Jost', sans-serif;
}

body {
  transition: background .5s ease, color .5s ease;
}

.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 32px;
  transition: opacity .4s ease, visibility .4s ease;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-logo {
  position: relative; z-index: 2;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 500;
  letter-spacing: .04em; color: var(--ivory);
  opacity: 0; animation: preFadeIn .2s .05s forwards;
}
.preloader-logo small {
  display: block; font-family: var(--sans); font-size: .55rem;
  letter-spacing: .32em; color: var(--mist); margin-top: 6px; text-align: center;
}
.preloader-line {
  width: 60px; height: 1px; background: var(--teal);
  position: relative; z-index: 2; overflow: hidden;
  opacity: 0; animation: preFadeIn .2s .1s forwards;
}
.preloader-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--gold);
  animation: preSlide .35s .15s ease-in-out forwards;
}

@keyframes preFadeIn { to { opacity: 1; } }
@keyframes preSlide { 0% { left: -100%; } 50% { opacity: 1; } 100% { left: 100%; } }

/* ── PAGE TRANSITIONS ── */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
}
.page-transition-overlay.active {
  animation: pageTrans .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes pageTrans {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.01%{ transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ── MAGNETIC BUTTONS ── */
.magnetic {
  display: inline-flex; position: relative;
  transition: transform .15s ease-out;
}

/* ── LINK UNDERLINE DRAW ── */
.link-draw { position: relative; text-decoration: none; }
.link-draw::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--teal);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.link-draw:hover::after { width: 100%; }

/* ── FLOATING LABELS ── */
.float-field { position: relative; margin-bottom: 20px; }
.float-field input, .float-field textarea, .float-field select {
  width: 100%; padding: 16px 14px 12px;
  background: var(--ivory); border: 1px solid var(--line);
  font-family: var(--sans); font-size: .9rem; color: var(--ink);
  font-weight: 300; outline: none; transition: border-color .3s, background .3s;
}
.float-field input:focus, .float-field textarea:focus, .float-field select:focus {
  border-color: var(--teal); background: #fff;
}
.float-field label {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--sans); font-size: .9rem; color: var(--mist);
  pointer-events: none; transition: all .25s ease;
  font-weight: 300;
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:focus + label,
.float-field textarea:not(:placeholder-shown) + label,
.float-field select:focus + label,
.float-field select:valid + label {
  top: -8px; left: 10px;
  font-size: .65rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--teal);
  background: var(--ivory-2); padding: 0 6px;
}
.float-field textarea { resize: vertical; min-height: 120px; }
.float-field select { appearance: none; padding-right: 40px; }

/* ── FORM ERROR STATES ── */
.float-field.error input, .float-field.error textarea, .float-field.error select {
  border-color: #c44; background: rgba(204,68,68,.04);
}
.float-field .error-msg {
  font-family: var(--sans); font-size: .72rem; color: #c44;
  margin-top: 4px; opacity: 0; transition: opacity .3s;
}
.float-field.error .error-msg { opacity: 1; }

/* ── STAR RATING ANIMATION ── */
.star { display: inline-block; color: var(--gold); font-size: .9rem; }
.star.animate { animation: starPop .4s ease forwards; }
@keyframes starPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── TESTIMONIAL CAROUSEL (Swiper) ── */
.testimonial-swiper { max-width: 900px; margin: 0 auto; position: relative; }
.testimonial-swiper .swiper-slide { opacity: .3; transition: opacity .6s; }
.testimonial-swiper .swiper-slide-active { opacity: 1; }
.swiper-nav-btn {
  width: 40px; height: 40px; border: 1px solid var(--line);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); cursor: pointer; transition: all .3s;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
}
.swiper-nav-btn:hover { border-color: var(--teal); color: var(--teal); }
.swiper-prev { left: -60px; }
.swiper-next { right: -60px; }
@media (max-width: 1100px) {
  .swiper-prev { left: 0; }
  .swiper-next { right: 0; }
}

/* ── PROCESS TIMELINE ── */
.process-timeline {
  position: relative; max-width: 1100px; margin: 0 auto;
}
.process-timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line); transform: translateX(-50%);
}
.process-tl-item {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; margin-bottom: 0; align-items: center;
  padding: 60px 0; position: relative;
}
.process-tl-item:nth-child(even) .tl-content { order: 2; text-align: left; }
.process-tl-item:nth-child(even) .tl-visual { order: 1; }
.process-tl-item:nth-child(odd) .tl-content { text-align: right; }
.tl-visual {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg,#d8cfb8 0%,#b8a98a 100%);
}
.tl-visual-img {
  width: 100%; padding-bottom: 75%;
  background-size: cover; background-position: center;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter 1.2s;
  filter: grayscale(60%);
}
.process-tl-item.active .tl-visual-img {
  transform: scale(1.03); filter: grayscale(0%);
}
.tl-num {
  font-family: var(--serif); font-size: clamp(3rem,6vw,5rem);
  font-weight: 300; color: rgba(29,89,89,.12); line-height: 1;
  margin-bottom: 16px; transition: color .6s;
}
.process-tl-item.active .tl-num { color: var(--teal); }
.tl-title {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  color: var(--ink); margin-bottom: 14px;
}
.tl-desc {
  font-family: var(--sans); font-size: .88rem; font-weight: 300;
  line-height: 1.9; color: var(--ink-soft);
}
.tl-dot {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; background: var(--gold);
  border-radius: 50%; border: 3px solid var(--ivory);
  transform: translate(-50%,-50%); z-index: 2;
  box-shadow: 0 0 0 1px var(--gold);
  transition: transform .4s, box-shadow .4s;
}
.process-tl-item.active .tl-dot {
  transform: translate(-50%,-50%) scale(1.3);
  box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(184,150,90,.3);
}
@media (max-width: 980px) {
  .process-timeline::before { left: 24px; }
  .process-tl-item { grid-template-columns: 1fr; gap: 24px; padding-left: 56px; }
  .process-tl-item:nth-child(even) .tl-content,
  .process-tl-item:nth-child(odd) .tl-content { order: 2; text-align: left; }
  .process-tl-item:nth-child(even) .tl-visual,
  .process-tl-item:nth-child(odd) .tl-visual { order: 1; }
  .tl-dot { left: 24px; }
}

/* ── HERO PARALLAX ── */
.hero-parallax-layer {
  will-change: transform;
}

/* ── WORD REVEAL ── */
.word-reveal { overflow: hidden; display: inline-block; }
.word-reveal span {
  display: inline-block; transform: translateY(110%);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.word-reveal.revealed span { transform: translateY(0); }

/* ── HORIZONTAL GALLERY ── */
.horiz-gallery {
  display: flex; gap: 3px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 56px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.horiz-gallery::-webkit-scrollbar { display: none; }
.horiz-gallery-item {
  flex: 0 0 auto; scroll-snap-align: start;
  position: relative; overflow: hidden; cursor: pointer;
}
.horiz-gallery-item.wide { width: 45vw; }
.horiz-gallery-item.tall { width: 30vw; }
.horiz-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1), filter .8s;
  filter: grayscale(100%);
}
.horiz-gallery-item:hover img {
  transform: scale(1.04); filter: grayscale(0%);
}
.hg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,24,20,.6) 0%, transparent 50%);
  display: flex; align-items: flex-end; padding: 24px;
  opacity: 0; transition: opacity .4s;
}
.horiz-gallery-item:hover .hg-overlay { opacity: 1; }
.hg-name {
  font-family: var(--serif); font-size: 1.3rem; font-style: italic;
  color: var(--ivory);
}
.hg-meta {
  font-family: var(--sans); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-2); margin-top: 4px;
}
@media (max-width: 980px) {
  .horiz-gallery { padding: 0 24px; }
  .horiz-gallery-item.wide { width: 70vw; }
  .horiz-gallery-item.tall { width: 50vw; }
}

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,24,20,.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  transform: scale(.95); transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 24px; right: 24px;
  width: 48px; height: 48px; border: 1px solid rgba(244,237,224,.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ivory); cursor: pointer; transition: all .3s; background: transparent;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 1px solid rgba(244,237,224,.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ivory); cursor: pointer; transition: all .3s; background: transparent;
}
.lightbox-nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-caption {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(244,237,224,.6);
  text-align: center;
}
@media (max-width: 980px) {
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

/* ── GSAP SCROLL REVEAL UTILITIES ── */
.gsap-reveal { opacity: 0; transform: translateY(40px); }
.gsap-reveal-word { display: inline-block; overflow: hidden; }
.gsap-reveal-word > span { display: inline-block; transform: translateY(110%); }

/* ── WHATSAPP CTA BUTTON ── */
.whatsapp-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: #25d366; text-decoration: none;
  border: 1px solid #25d366; padding: 12px 24px;
  transition: all .35s;
}
.whatsapp-cta:hover { background: #25d366; color: #fff; }
.whatsapp-cta svg { width: 18px; height: 18px; }