/* Global styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #fffbea; /* very light yellow for better reading */
  color: #2c3e50;
  line-height: 1.6;
}

/* Top bar and social icons */
/* Top bar containing social icons and scroll indicator */
.top-bar {
  width: 100%;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Make the top bar fixed so it stays on screen */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fffbea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Social icon container centered */
.social-icons {
  display: flex;
  gap: 0.75rem;
  flex-grow: 1;
  justify-content: center;
}

/* Social icons (default placeholders; replace background-image in CSS with your own icons) */
.social-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #e6d8ff;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.social-icon.fb {
  /* placeholder letter, can be replaced with background-image: url('facebook-icon.png'); */
  position: relative;
}
.social-icon.fb::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #5b3faf;
  font-weight: 700;
  font-size: 1.4rem;
}

.social-icon.ig {
  position: relative;
}
.social-icon.ig::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #5b3faf;
  font-weight: 700;
  font-size: 1.4rem;
}

.social-icon.wa {
  position: relative;
}
.social-icon.wa::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #5b3faf;
  font-weight: 700;
  font-size: 1.4rem;
}

.social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.social-icon img.icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou 'cover', se quiser preencher totalmente */
  border-radius: 50%;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon img.icon-img:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* Hero section layout */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 2rem;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Lens flare overlay */
.lens-flare {
  position: absolute;
  top: 50%;
  left: 0;
  width: 400px;
  height: 400px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 80%);
  filter: blur(30px);
  transform: translate(-50%, -50%);
  opacity: 1;
  mix-blend-mode: screen;
  animation: flareMotion 30s linear infinite;
  z-index: 2;
}

/* Scroll indicator at top right */
.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Vertical track containing a moving thumb */
.scroll-track {
  position: relative;
  width: 0.45rem;
  height: 2.2rem;
  /* Light purple background for carousel track */
  background-color: #dfccff;
  border-radius: 0.25rem;
  overflow: hidden;
}

.scroll-thumb {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  /* Light purple thumb for carousel indicator */
  background-color: #a784f5;
  border-radius: 50%;
  animation: thumbMove 6s ease-in-out infinite;
}

@keyframes thumbMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(100% - 0.4rem));
  }
  100% {
    transform: translateY(0);
  }
}

/* Page dots representing sections */
.page-dots {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.page-dots .dot {
  width: 0.45rem;
  height: 0.45rem;
  /* Light purple background for inactive dots */
  background-color: #d4c1ff;
  border-radius: 50%;
}

.page-dots .dot.active {
  /* Purple color for active dot */
  background-color: #a784f5;
}

/* Image containers equal sizing */
.image-container {
  position: relative;
  flex: 1;
  max-width: 32%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container .main-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease;
  cursor: pointer;
}

/* Provide transitions for reverse scroll animations */
.image-container.left, .image-container.right, .center-text {
  transition: transform 1s ease, opacity 1s ease;
}

/* === Vine animation for left image === */
.image-container.left .rose-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-25%, -20%) scale(0.8);
  transition: opacity 1s ease, transform 2s ease;
  z-index: 12;
}

.image-container.left:hover .rose-svg {
  opacity: 1;
  visibility: visible;
  transform: translate(-25%, -40%) scale(1.3);
}

.image-container.left .rose-svg path {
  stroke: #c8588c;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 4s ease;
}

.image-container.left:hover .rose-svg path {
  stroke-dashoffset: 0;
}

.image-container.left .rose-svg circle {
  fill: #c8588c;
  opacity: 0;
  transition: opacity 1s ease;
}

.image-container.left:hover .rose-svg circle {
  opacity: 0.8;
}

/* === Mirrored vine animation for right image === */
.image-container.right .rose-svg-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Shift the mirrored vine toward the right; adjust percentage to position appropriately */
  transform: translate(-50%, -20%) scale(0.8);
  transition: opacity 1s ease, transform 2s ease;
  z-index: 12;
}

.image-container.right:hover .rose-svg-right {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -40%) scale(1.3);
}

.image-container.right .rose-svg-right path {
  stroke: #a784f5;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 4s ease;
}

.image-container.right:hover .rose-svg-right path {
  stroke-dashoffset: 0;
}

.image-container.right .rose-svg-right circle {
  fill: #a784f5;
  opacity: 0;
  transition: opacity 1s ease;
}

.image-container.right:hover .rose-svg-right circle {
  opacity: 0.8;
}


@keyframes flareMotion {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  20% {
    transform: translate(20%, -60%) scale(1);
    opacity: 0.6;
  }
  35% {
    transform: translate(40%, -40%) scale(1.2);
    opacity: 0.4;
  }
  50% {
    transform: translate(60%, -30%) scale(1.4);
    opacity: 0.8;
  }
  65% {
    transform: translate(80%, -10%) scale(1.5);
    opacity: 0.3;
  }
  80% {
    transform: translate(90%, -30%) scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: translate(110%, -50%) scale(0.8);
    opacity: 0;
  }
}

/* Image containers */
.image-container {
  position: relative;
  flex: 1;
  max-width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.main-photo {
  width: 90%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.5s ease;
  cursor: pointer;
}

/* Remove overflow clipping for the right image so the lilac vine can extend beyond */
.image-container.right {
  overflow: visible;
}

/* Center text */
.center-text {
  flex: 1;
  max-width: 34%;
  text-align: center;
  padding: 1rem;
}

.center-text h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.center-text h2 {
  font-size: 1.2rem;
  font-weight: 300;
  text-align: justify;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 0.5rem;
}

.center-text h3 {
  font-size: 1.1rem;
  font-weight: 100;
  text-align: justify;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

.center-text p {
  font-size: 1rem;
  text-align: justify;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
  
  color: #555;
}

/* Buttons */
.btn-contact {
  background: linear-gradient(135deg, #d4c1ff, #a784f5);
  color: #fff;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(167, 132, 245, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.btn-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(167, 132, 245, 0.7);
  filter: brightness(1.1);
}

/* Overlays (rose and birds) */

/* Values section */
.values {
  background-color: #fef9ef;
  padding: 4rem 2rem;
  text-align: center;
  min-height: 70vh;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
  position: relative; /* needed for corner decorations */
}

.values h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.values p {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: #555;
}

.values.show {
  opacity: 1;
  transform: translateY(0);
}

/* Video container for YouTube embed */
.video-container {
  position: relative;
  width: 100%;
  /* 16:9 aspect ratio (56.25%) */
  padding-top: 56.25%;
  margin-bottom: 2rem;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}


/* The old image-based border has been removed. A new SVG-based border is defined in HTML. */

/* Scroll-out animations for hero section */
.hero.animate-out .left {
  transform: translateX(-120%);
  transition: transform 1s ease;
}

.hero.animate-out .right {
  transform: translateX(120%);
  transition: transform 1s ease;
}

.hero.animate-out .center-text {
  transform: translateY(-50%);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}

/* Responsive design */
@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .image-container, .center-text {
    max-width: 100%;
    flex: unset;
  }
  .image-container {
    margin-bottom: 2rem;
    aspect-ratio: auto;
  }
  .lens-flare {
    width: 200px;
    height: 200px;
  }
  .center-text h1 {
    font-size: 1.5rem;
  }
  .center-text h2 {
      text-align: justify;
    font-size: 1.4rem;
  }
  .center-text h3 {
      text-align: justify;
    font-size: 1.2rem;
  }
  .center-text p {
      text-align: justify;
      font-size: 1rem;
  }
}

/* Mobile content styles */
.mobile-content {
  display: none; /* hidden on desktop by default */
}

@media (max-width: 992px) {
  /* Hide hero and values sections on small screens */
  .hero,
  .values {
    display: none;
  }

  .mobile-content {
    display: block;
    padding: 1rem;
    margin-top: 4rem; /* Push content below fixed top bar */
  }

  .mobile-text {
    text-align: center;
    margin-bottom: 1rem;
  }

  .image-carousel {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    margin: 0 auto 1rem;
  }

  .image-carousel .image-slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
  }

  .image-carousel .image-slide.active {
    display: block;
  }

  .image-carousel .image-slide img {
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  .mobile-video-values {
    text-align: center;
    margin-top: 1rem;
  }

  .mobile-video-values .video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    margin: 0 auto 1rem;
  }

  .mobile-video-values .video-container iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 100%;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  /* Vine overlay for mobile slides */
  .rose-svg-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-25%, -20%) scale(0.8);
    transition: opacity 1s ease, transform 2s ease;
    z-index: 12;
  }

  .rose-svg-mobile path {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 4s ease;
  }

  .rose-svg-mobile circle {
    fill: currentColor;
    opacity: 0;
    transition: opacity 1s ease;
  }

  .rose-svg-mobile.animate {
    opacity: 1;
    visibility: visible;
    transform: translate(-25%, -40%) scale(1.3);
  }

  .rose-svg-mobile.animate path {
    stroke-dashoffset: 0;
  }

  .rose-svg-mobile.animate circle {
    opacity: 0.8;
  }

  /* Colors for left and right mobile slides */
  .left-slide .rose-svg-mobile {
    color: #c8588c;
  }
  .right-slide .rose-svg-mobile {
    color: #a784f5;
  }
}

/* Global vector border using swirling vines. This SVG spans the entire page and
   draws delicate swirl motifs in the corners. It is positioned behind all
   other content and uses the same vine motif as the hover effects, but in
   a golden tone. */
.border-swirls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.border-swirls path {
  stroke: #d6b88c;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
}

.border-swirls circle {
  fill: #d6b88c;
  opacity: 0.3;
}