/* Hero Section — clean white background with right-aligned art on desktop */
.hero-bg {
  background-color: #ffffff;
  background-image: url('/images/hero-bg-fashion1.png'); /* adjust to your real path/name */
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 48%;
  min-height: 620px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f3f4f6; /* subtle divider */
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-bg {
    background-size: 60%;
    background-position: right bottom;
    min-height: 640px;
  }
}

/* Mobile — modern stacked layout with centered text and full-width CTA */
@media (max-width: 768px) {
  .hero-bg {
    background-size: 88%;
    background-position: center 92%;
    min-height: 680px;
    padding-top: 96px;         /* account for fixed header */
    padding-bottom: 240px;     /* room for artwork overlap */
  }
  .hero-bg .hero-title {
    font-size: 2rem;           /* ~text-3xl */
    line-height: 1.2;
  }
  .hero-bg .hero-sub {
    font-size: 1.05rem;
  }
  .hero-bg .hero-cta {
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }
}

/* Very small devices */
@media (max-width: 380px) {
  .hero-bg {
    background-size: 95%;
    padding-bottom: 260px;
  }
  .hero-bg .hero-title {
    font-size: 1.75rem;
  }
}


/* Mobile-first stacking for hero */
.hero-bg-mobile {
  background: #fff; /* no background image, white background */
}

/* Desktop/tablet keep background image */
@media (min-width: 768px) {
  .hero-bg-mobile {
    background-image: url('/images/hero-bg-fashion1.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 48%;
    min-height: 620px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
  }
}

/* ---------- HERO (white, responsive) ---------- */
.hero-bg-mobile {
  background: #fff;
}

/* Desktop/tablet: use background image on the right */
@media (min-width: 768px) {
  .hero-bg-mobile {
    background-image: url('/images/hero-bg-fashion1.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 48%;
    min-height: 620px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
  }
}

/* Tablet tune */
@media (max-width: 1024px) and (min-width: 768px) {
  .hero-bg-mobile {
    background-size: 60%;
    background-position: right bottom;
    min-height: 640px;
  }
}

/* Mobile stacking + spacing for the foreground image */
@media (max-width: 767px) {
  .hero-sub { font-size: 1.05rem; }
  .hero-cta { width: 100%; display: inline-flex; justify-content: center; }
  .hero-img { width: 100%; max-width: 420px; margin: 0 auto; }
}

/* ---------- ELEGANT ANIMATIONS ---------- */

/* Base reveal state (before in-view) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* When observed */
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Optional fade-only (no slide) */
.fade-only { transform: none; }

/* Hero load-in (slightly different timing) */
.hero-load {
  opacity: 0;
  transform: translateY(10px);
  animation: heroFadeUp .9s ease forwards;
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: none; }
}

/* Nice subtle hover float for cards/buttons */
.float-hover {
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.float-hover:hover { transform: translateY(-3px); }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-load, .float-hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Optional: slightly smoother scrolling on modern devices */
html { scroll-behavior: smooth; }


/* Desktop hero text alignment fix */
@media (min-width: 768px) {
  .hero-bg-mobile .hero-content {
    max-width: 50%;       /* keep text on left half */
    margin-left: 0;       /* remove any default auto margins */
    text-align: left;     /* ensure left alignment */
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .nav-email { display: none !important; }
}