/* ==========================================
   ELLE DANCE STUDIO — elledancestudio.com
   Dark Ballroom Glamour Aesthetic
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Raleway:wght@100;200;300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

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

:root {
  --black:    #080808;
  --near-black: #0e0e0e;
  --surface:  #111111;
  --surface2: #1a1a1a;
  --red:      #C1121F;
  --red-deep: #8b0c17;
  --red-glow: #e01530;
  --gold:     #C9A84C;
  --gold-light: #e4c96e;
  --white:    #F5F0E8;
  --white-dim: rgba(245,240,232,0.7);
  --border:   rgba(201,168,76,0.25);
  --border-red: rgba(193,18,31,0.4);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Grain overlay for depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}


/* ==========================================
   HEADER & NAVIGATION
   ========================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 2.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(8,8,8,0.97);
  box-shadow: 0 1px 0 var(--border-red);
  backdrop-filter: blur(12px);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}

.logo-img {
  height: 52px;
  width: auto;
  display: block;
}

/* Hero logo */
.hero-cta .btn-outline {
  background: rgba(8,8,8,0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Hero wordmark — hairline letterforms so the footage reads through the
   middle of the page instead of being blocked by a solid mark. */
.hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 2.25rem;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  color: var(--white);
  /* Carries the letters over a bright frame without adding visual weight */
  text-shadow: 0 2px 30px rgba(0,0,0,0.55), 0 0 90px rgba(0,0,0,0.35);
}

.hero-wordmark-name {
  font-size: clamp(2.9rem, 10.5vw, 6.6rem);
  font-weight: 100;
  letter-spacing: 0.2em;
  line-height: 1;
  /* letter-spacing adds a trailing gap; pull it back to stay centred */
  text-indent: 0.2em;
}

.hero-wordmark-sub {
  font-size: clamp(0.72rem, 2.1vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.58em;
  line-height: 1;
  color: var(--white-dim);
  text-indent: 0.58em;
}

@media (max-width: 600px) {
  .logo-img { height: 40px; }
}

/* Main navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.main-nav a {
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.35s ease;
}

.main-nav a:hover {
  color: var(--white);
}

.main-nav a:hover::after {
  width: 100%;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-dropdown > a::before {
  content: '';
  display: none;
}

.dropdown-arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gold);
  transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,0.98);
  border: 1px solid var(--border-red);
  border-top: 2px solid var(--red);
  min-width: 240px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--white-dim);
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.dropdown-menu a::after { display: none; }

.dropdown-menu a:hover {
  color: var(--white);
  background: rgba(193,18,31,0.08);
  border-left-color: var(--red);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: none;
  position: relative;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* While the menu is open the header needs its own backdrop, or the
   links scroll visibly behind the logo on pages that start with a
   transparent header. */
body.menu-open .site-header {
  background: rgba(8,8,8,0.97);
  box-shadow: 0 1px 0 var(--border-red);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- Mobile menu ------------------------------------------------
   A full-height scrolling panel that starts below the fixed header,
   so the logo and the close button stay put while the links move. */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  flex-direction: column;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(193,18,31,0.20), transparent 62%),
    linear-gradient(180deg, rgba(12,10,11,0.98), rgba(8,8,8,0.99));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(80px + env(safe-area-inset-top, 0px)) 0 calc(2.5rem + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease, visibility 0s;
}

.mobile-menu-inner {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 1.75rem;
  display: flex;
  flex-direction: column;
}

/* Each block fades up in sequence once the panel opens. */
.mobile-menu-inner > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.open .mobile-menu-inner > * { opacity: 1; transform: none; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(6) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu.open .mobile-menu-inner > *:nth-child(8) { transition-delay: 0.40s; }

.mobile-group { margin-top: 1.6rem; }

.mobile-group-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.15rem;
}

.mobile-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0.35), transparent);
}

.mobile-menu a.mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.5rem 0.1rem;
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.35;
  color: var(--white-dim);
  border-bottom: 1px solid rgba(245,240,232,0.07);
  transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}

/* The chevron is the only ornament, so it carries the hover state. */
.mobile-menu a.mobile-link::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.3;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mobile-menu a.mobile-link:hover,
.mobile-menu a.mobile-link:focus-visible,
.mobile-menu a.mobile-link:active {
  color: var(--white);
  border-bottom-color: var(--border-red);
  padding-left: 0.45rem;
}

.mobile-menu a.mobile-link:hover::after,
.mobile-menu a.mobile-link:focus-visible::after,
.mobile-menu a.mobile-link:active::after {
  opacity: 0.9;
  transform: rotate(45deg) translate(2px, -2px);
}

.mobile-menu a.mobile-link[aria-current] {
  color: var(--gold);
  border-bottom-color: rgba(201,168,76,0.4);
}

.mobile-menu a.mobile-link[aria-current]::after { opacity: 0.75; }

/* "Home" sits on its own above the grouped sections. */
.mobile-menu a.mobile-link-home {
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--white);
  border-bottom-color: rgba(201,168,76,0.28);
}

.mobile-menu-footer {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245,240,232,0.07);
  text-align: center;
}

.mobile-menu-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--white-dim);
}

.mobile-menu-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.1rem;
}

.mobile-menu-social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--gold);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.mobile-menu-social a:hover,
.mobile-menu-social a:active {
  color: var(--white);
  border-color: var(--red);
  background: rgba(193,18,31,0.12);
}

.mobile-menu-social svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 380px) {
  .mobile-menu-inner { padding: 0 1.25rem; }
  .mobile-menu a.mobile-link { font-size: 0.85rem; min-height: 48px; }
}

/* Short screens (landscape phones): tighten so scrolling is shorter. */
@media (max-height: 560px) {
  .mobile-menu { padding-top: calc(70px + env(safe-area-inset-top, 0px)); }
  .mobile-group { margin-top: 1.1rem; }
  .mobile-menu a.mobile-link { min-height: 44px; }
  .mobile-menu-footer { margin-top: 1.75rem; padding-top: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-inner > * { opacity: 1; transform: none; transition: none; }
  .mobile-menu.open .mobile-menu-inner > * { transition-delay: 0s; }
  .mobile-menu a.mobile-link { transition: color 0.2s ease; }
}


/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}

/* Animated background */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(193,18,31,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 20%, rgba(201,168,76,0.06) 0%, transparent 60%),
    var(--black);
}

/* Decorative diagonal lines */
.hero-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-lines::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 200%;
  border-left: 1px solid rgba(193,18,31,0.12);
  transform: rotate(-15deg);
}

.hero-lines::after {
  content: '';
  position: absolute;
  top: -20%;
  right: 15%;
  width: 60%;
  height: 200%;
  border-left: 1px solid rgba(201,168,76,0.07);
  transform: rotate(-15deg);
}

/* Video placeholder */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(8,8,8,0.95) 0%,
    rgba(20,5,5,0.8) 50%,
    rgba(8,8,8,0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Hero video ----
   Competition footage sits between the static hero backdrop and the
   logo. It fades in only once it is actually playing, so a blocked or
   never-started video leaves the original gradient untouched. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Visible from the start so the poster frame stands in for the footage
     for anyone who never gets playback: reduced motion, Save-Data, a
     refused autoplay, or a browser that cannot decode either source. */
  opacity: 1;
  transition: opacity 1.8s ease;
}

/* Darkens the middle so the logo and tagline keep their contrast, and
   the top and bottom so the header and the next section stay clean,
   while the edges of the floor stay bright. */
.hero-video-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Light enough to let the floor and the dress read at full strength,
     with the darkening kept where it is actually needed: under the
     header, under the wordmark, and at the hand-off to the next
     section. */
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%,
      rgba(8,8,8,0.62) 0%,
      rgba(8,8,8,0.34) 45%,
      rgba(8,8,8,0.08) 75%,
      rgba(8,8,8,0) 100%),
    linear-gradient(180deg,
      rgba(8,8,8,0.78) 0%,
      rgba(8,8,8,0.08) 18%,
      rgba(8,8,8,0.08) 58%,
      rgba(8,8,8,0.88) 100%);
}

/* Pause control — required for auto-playing motion (WCAG 2.2.2) */
.video-play-hint {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.05rem;
  background: rgba(8,8,8,0.45);
  border: 1px solid rgba(201,168,76,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.video-play-hint:hover,
.video-play-hint:focus-visible {
  opacity: 1;
  border-color: var(--gold);
  background: rgba(8,8,8,0.7);
}

.video-play-hint[hidden] { display: none; }

/* Two bars while playing, a triangle once paused */
.video-hint-icon {
  width: 9px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.video-play-hint.is-paused .video-hint-icon {
  width: 0;
  height: 0;
  border: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Before the footage has run once, this button is the only way into it, so
   it stops being a discreet corner control and says what it does. Autoplay
   is refused more often than it looks — Reduce Motion, iOS Low Power Mode,
   Safari's per-site auto-play setting and Android's Data Saver all land
   here — and those visitors were being shown a 10px hint at 60% opacity.
   It reverts to the quiet style the moment playback starts, where it is a
   pause control and should stay out of the way. */
.video-play-hint.is-offer {
  opacity: 1;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  font-size: 0.72rem;
  background: rgba(8,8,8,0.72);
  border-color: var(--gold);
}

.video-play-hint.is-offer .video-hint-icon {
  border-left-width: 13px;
  border-top-width: 8px;
  border-bottom-width: 8px;
}

@media (max-width: 700px) {
  .video-play-hint {
    bottom: 1.35rem;
    right: 1.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.55rem;
  }

  /* Still the only way in, so it keeps its weight on a phone — where
     Low Power Mode makes a refused autoplay most likely. */
  .video-play-hint.is-offer {
    padding: 0.8rem 1.25rem;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
}

.play-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-icon::after {
  content: '';
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--gold);
  margin-left: 3px;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 2rem;
}

.hero-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.3s;
}

.hero-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--white);
  text-shadow: 0 0 60px rgba(193,18,31,0.3);
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.5s;
}

.hero-title span {
  color: var(--red);
  display: block;
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.75rem 0;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.8s;
}

.hero-divider::before,
.hero-divider::after {
  content: '';
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.hero-divider::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.hero-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-style: italic;
  letter-spacing: 0.14em;
  /* Full white, not the 70% dim used elsewhere: over footage at full
     brightness the dimmed version measured 3.8:1, under the 4.5 minimum. */
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 0 50px rgba(0,0,0,0.4);
}

.hero-cta {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 1.1s;
}

.btn-primary {
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  background: var(--red);
  color: var(--white);
  border: 1px solid var(--red);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.btn-primary:hover::before { transform: translateX(0); opacity: 1; }

.btn-outline {
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(201,168,76,0.1);
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 1.5s;
}

.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {
  0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50% { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}


/* ==========================================
   SECTION STYLES
   ========================================== */

section {
  padding: 6rem 2rem;
}

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

.section-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}

.section-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.section-title span { color: var(--red); }

.section-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.section-line::before,
.section-line::after {
  content: '';
  height: 1px;
  width: 60px;
  background: var(--border);
}

.section-dot {
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
}


/* ==========================================
   CATEGORIES (CIRCLES)
   ========================================== */

.categories {
  background: var(--near-black);
  position: relative;
  overflow: hidden;
}

.categories::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-red), transparent);
}

.categories::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-red), transparent);
}

.categories-grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* Row 1: 4 circles */
.circles-row {
  display: grid;
  grid-template-columns: repeat(4, 240px);
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Row 2: 3 circles, centered */
.circles-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  justify-content: center;
  gap: 2rem;
}

/* Individual circle card */
.circle-card {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.circle-card:hover {
  transform: scale(1.06);
}

/* White border ring */
.circle-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  z-index: 3;
  transition: border-color 0.3s ease;
}

.circle-card:hover::before {
  border-color: var(--gold);
}

/* Background image/gradient */
.circle-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.circle-card:hover .circle-bg {
  transform: scale(1.1);
}

/* Category background gradients (placeholders until real photos added) */
.cat-new-smooth .circle-bg {
  background:
    url('../images/categories/new-smooth-ballroom.jpg') center/cover no-repeat,
    linear-gradient(145deg, #d4a017 0%, #f5c842 30%, #e8b44a 60%, #c17f24 100%);
}

.cat-new-latin .circle-bg {
  background:
    url('../images/categories/new-latin-rhythm.jpg') center/cover no-repeat,
    linear-gradient(145deg, #c1121f 0%, #e8296e 40%, #d43086 70%, #8b0c17 100%);
}

.cat-resale-smooth .circle-bg {
  background:
    url('../images/categories/resale-smooth-ballroom.jpg') center/cover no-repeat,
    linear-gradient(145deg, #6a1fa1 0%, #9b59b6 40%, #8e44ad 70%, #4a1470 100%);
}

.cat-resale-latin .circle-bg {
  background:
    url('../images/categories/resale-latin-rhythm.jpg') center/cover no-repeat,
    linear-gradient(145deg, #f8c8d4 0%, #e8a0b8 30%, #c5789a 60%, #9b4a6e 100%);
}

.cat-sale .circle-bg {
  background:
    url('../images/categories/sale-dresses.jpg') center/cover no-repeat,
    linear-gradient(145deg, #e74c3c 0%, #f39c12 25%, #2ecc71 50%, #3498db 75%, #9b59b6 100%);
}

.cat-custom .circle-bg {
  background:
    url('../images/categories/custom-dress.jpg') center/cover no-repeat,
    linear-gradient(145deg, #9e9e9e 0%, #bdbdbd 40%, #e0e0e0 70%, #8d8d8d 100%);
}

.cat-measurement .circle-bg {
  background:
    url('../images/categories/measurement.jpg') center/cover no-repeat,
    linear-gradient(145deg, #6fb3d2 0%, #a8d5ea 40%, #b8e0f0 70%, #4a90a4 100%);
}

/* Dark overlay for text readability */
.circle-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  z-index: 1;
  transition: background 0.3s ease;
}

.circle-card:hover .circle-overlay {
  background: rgba(0,0,0,0.55);
}

/* Circle text */
.circle-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.circle-label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transition: color 0.3s ease;
}

.circle-card:hover .circle-label {
  color: var(--gold-light);
}

/* Shimmer effect on hover */
.circle-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: rotate(30deg);
  transition: left 0.6s ease;
  z-index: 4;
  pointer-events: none;
  border-radius: 0;
}

.circle-card:hover::after {
  left: 120%;
}


/* ==========================================
   ABOUT SECTION
   ========================================== */

.about {
  background: var(--black);
  position: relative;
}

.about-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about-quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 8rem;
  line-height: 0.4;
  color: var(--red);
  opacity: 0.25;
  display: block;
  margin-bottom: 1rem;
}

.about-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-dim);
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
}

.about-signature {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* ==========================================
   CONTACT SECTION
   ========================================== */

.contact {
  background: var(--near-black);
  position: relative;
  text-align: center;
}

.contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-red), transparent);
}

.contact-inner {
  max-width: 600px;
  margin: 0 auto;
}

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--white-dim);
  transition: color 0.3s ease;
}

.contact-link:hover { color: var(--red); }

.contact-link-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.contact-link:hover .contact-link-icon {
  border-color: var(--red);
  background: rgba(193,18,31,0.1);
}

.contact-link-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.contact-social-row {
  display: flex;
  gap: 1.25rem;
  margin-top: 2.5rem;
  justify-content: center;
}

.social-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-icon:hover {
  border-color: var(--red);
  background: rgba(193,18,31,0.1);
  transform: translateY(-3px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  color: var(--white-dim);
}


/* ==========================================
   FOOTER
   ========================================== */

.site-footer {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}

.footer-logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.footer-logo span { color: var(--red); }

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-bottom: 1.5rem;
}

.footer-nav a {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  transition: color 0.3s ease;
}

.footer-nav a:hover { color: var(--gold); }

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245,240,232,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  border-color: var(--red);
  background: rgba(193,18,31,0.1);
}

.footer-social svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgba(245,240,232,0.45);
  stroke-width: 1.5;
  transition: stroke 0.3s;
}

.footer-social a:hover svg { stroke: var(--white); }

.footer-copy {
  font-size: 0.65rem;
  color: rgba(245,240,232,0.25);
  letter-spacing: 0.08em;
}

/* ==========================================
   SOLD ARCHIVE & COMPETITIONS PAGES
   ========================================== */

.archive-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 0 2rem 6rem;
}

.archive-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

.archive-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.archive-card:hover img { transform: scale(1.06); }

.archive-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
}

.events-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

.event-item {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.event-date-block {
  flex-shrink: 0;
  width: 70px;
  text-align: center;
  border: 1px solid var(--border-red);
  padding: 0.75rem 0.5rem;
}

.event-date-month {
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 0.25rem;
}

.event-date-day {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  display: block;
}

.event-info { flex: 1; }

.event-name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 0.35rem;
}

.event-location {
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  color: var(--white-dim);
  letter-spacing: 0.05em;
}

.event-badge {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  align-self: center;
}

/* ==========================================
   ABOUT & CONTACT FULL PAGES
   ========================================== */

.page-hero {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(193,18,31,0.1) 0%, transparent 70%),
    var(--black);
  padding: 8rem 2rem 4rem;
}

.page-hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.page-hero h1 span { color: var(--red); }

.page-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

.page-content p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--white-dim);
  margin-bottom: 1.5rem;
}

.contact-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.contact-info-block h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.contact-info-block a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: var(--white-dim);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.3s ease;
}

.contact-info-block a:hover { color: var(--red); }

.contact-info-block svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .contact-full-grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0 1rem 4rem; }
  .event-item { flex-direction: column; gap: 1rem; }
}


/* ==========================================
   DRESS CATALOG GRID & CARDS
   ========================================== */

.dress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.dress-card {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dress-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(193,18,31,0.18);
}

.dress-card-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111;
}

.dress-card-image img {
  width: 100%;
  height: 100%;
  /* contain, not cover: a dress cropped at the hem or the headpiece is
     the one thing a dressmaker's catalogue must not do. */
  object-fit: contain;
  transition: transform 0.5s ease;
}

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

.dress-card-no-image {
  background: linear-gradient(145deg, #1a0508, #080808);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dress-card-no-image::after {
  content: '💃';
  font-size: 3rem;
  opacity: 0.25;
}

.dress-card-body { padding: 1.25rem; }

.dress-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.dress-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.dress-card-meta {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--white-dim);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.dress-card-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: var(--white-dim);
  margin-top: 0.75rem;
  line-height: 1.65;
}

.dress-card-inquiry {
  display: block;
  margin-top: 1.1rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--red);
  color: var(--red);
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.dress-card-inquiry:hover {
  background: var(--red);
  color: var(--white);
}

@media (max-width: 600px) {
  .dress-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; padding: 0 1rem 3rem; }
}

/* ==========================================
   CATALOG FILTER & SORT TOOLBAR
   ========================================== */

/* [hidden] alone loses to the grids' display rule */
.dress-grid[hidden],
.archive-grid[hidden] { display: none; }

.catalog-controls {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 1.75rem;
}

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.catalog-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 150px;
}

.catalog-field[hidden] { display: none; }

.catalog-field-search { flex: 1 1 260px; }

.catalog-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.catalog-input,
.catalog-select {
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--surface2);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.catalog-input::placeholder { color: rgba(245,240,232,0.4); }

.catalog-input:focus,
.catalog-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}

.catalog-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  cursor: pointer;
}

.catalog-select option { background: var(--surface2); color: var(--white); }

.catalog-clear {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  background: none;
  border: 1px solid var(--red);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.catalog-clear:hover { background: var(--red); color: var(--white); }
.catalog-clear[hidden] { display: none; }

.catalog-count {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 1rem;
}

.catalog-empty {
  text-align: center;
  padding: 3.5rem 2rem 5rem;
}

.catalog-empty[hidden] { display: none; }

.catalog-empty-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.catalog-empty-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--white-dim);
  margin-top: 0.75rem;
}

.catalog-clear-inline { margin-top: 1.5rem; }

.catalog-more {
  text-align: center;
  padding: 0 2rem 5rem;
}

.catalog-more[hidden] { display: none; }

.catalog-more-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: 1px solid var(--gold);
  padding: 0.85rem 2.5rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.catalog-more-btn:hover { background: var(--gold); color: var(--black); }

@media (max-width: 600px) {
  .catalog-controls { padding: 0 1rem 1.25rem; }
  .catalog-toolbar { padding: 1rem; gap: 0.85rem; }
  .catalog-field { min-width: 0; flex: 1 1 100%; }
  .catalog-clear { width: 100%; }
}

/* ==========================================
   LIGHTBOX
   ========================================== */

.is-zoomable { cursor: zoom-in; }

.is-zoomable:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* A quiet magnifier that only appears on hover, so the grid stays calm */
.dress-card-image.is-zoomable::after,
.archive-card.is-zoomable::after {
  content: '';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(8,8,8,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.dress-card:hover .dress-card-image.is-zoomable::after,
.archive-card:hover.is-zoomable::after,
.is-zoomable:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.lightbox.is-zoomed .lightbox-stage { cursor: grab; }
.lightbox.is-zoomed .lightbox-stage:active { cursor: grabbing; }

.lightbox-image {
  /* Leaves the frame clear of the close button and the side arrows */
  max-width: 86%;
  max-height: 94%;
  object-fit: contain;
  transform-origin: center center;
  opacity: 0;
  transition: opacity 0.35s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-image.is-loaded { opacity: 1; }

.lightbox-spinner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201,168,76,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: lightbox-spin 0.9s linear infinite;
}

.lightbox-spinner[hidden] { display: none; }

@keyframes lightbox-spin { to { transform: rotate(360deg); } }

.lightbox-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(8,8,8,0.5);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  background: rgba(193,18,31,0.25);
  border-color: var(--gold);
  color: var(--white);
}

.lightbox-btn[hidden] { display: none; }

.lightbox-close { top: 1.25rem; right: 1.25rem; font-size: 1.6rem; }
.lightbox-prev { left: 1.25rem; top: 50%; margin-top: -26px; }
.lightbox-next { right: 1.25rem; top: 50%; margin-top: -26px; }

.lightbox-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(5,5,5,0.9) 35%);
}

.lightbox-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

.lightbox-meta {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: var(--gold);
  margin-top: 0.25rem;
}

.lightbox-meta[hidden] { display: none; }

.lightbox-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  max-width: 100%;
}

.lightbox-thumb {
  width: 48px;
  height: 62px;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumb.is-active { opacity: 1; border-color: var(--gold); }

.lightbox-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lightbox-count {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--white-dim);
  white-space: nowrap;
}

.lightbox-zoom {
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.lightbox-zoom:hover,
.lightbox-zoom:focus-visible { background: rgba(201,168,76,0.15); border-color: var(--gold); }

.lightbox-inquiry {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 0.6rem 1.2rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.lightbox-inquiry:hover { background: var(--red); color: var(--white); }
.lightbox-inquiry[hidden] { display: none; }

@media (max-width: 700px) {
  .lightbox-btn { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
  .lightbox-bar { gap: 0.75rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
  .lightbox-info { flex: 1 1 100%; }
  .lightbox-tools { flex: 1 1 100%; justify-content: space-between; }
  .lightbox-thumbs { order: 3; flex: 1 1 100%; }
  .lightbox-image { max-width: 96%; max-height: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-image { transition: none; }
  .lightbox-spinner { animation-duration: 2s; }
  .dress-card-image.is-zoomable::after,
  .archive-card.is-zoomable::after { transition: none; }
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */

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

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================
   SHOP PAGES (Category Landing)
   ========================================== */

.shop-hero {
  min-height: 45vh;
  display: flex;
  align-items: flex-end;
  padding: 6rem 2rem 3rem;
  position: relative;
  background: var(--black);
  overflow: hidden;
}

.shop-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  transition: gap 0.3s ease;
}

.back-link:hover { gap: 0.75rem; }

.coming-soon {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 1.5rem;
}

.coming-soon-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.coming-soon-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--white-dim);
  font-style: italic;
}


/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1100px) {
  .circles-row { grid-template-columns: repeat(4, 200px); }
  .circles-row-3 { grid-template-columns: repeat(3, 200px); }
  .circle-card { width: 200px; height: 200px; }
}

@media (max-width: 900px) {
  .site-header { padding: 0 1.5rem; }
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .circles-row { grid-template-columns: repeat(2, 190px); }
  .circles-row-3 { grid-template-columns: repeat(3, 155px); }
  .circle-card { width: 190px; height: 190px; }
  .circle-label { font-size: 0.75rem; }
}

@media (max-width: 600px) {
  section { padding: 4rem 1.25rem; }
  .hero-content { padding: 0 1.25rem; }
  .hero-cta { flex-direction: column; align-items: center; }
  .circles-row { grid-template-columns: repeat(2, 155px); gap: 1rem; }
  .circles-row-3 { grid-template-columns: repeat(3, 100px); gap: 0.75rem; }
  .circle-card { width: 155px; height: 155px; }
  .circles-row-3 .circle-card { width: 100px; height: 100px; }
  .circle-label { font-size: 0.65rem; }
  .circles-row-3 .circle-label { font-size: 0.55rem; }
}

@media (max-width: 380px) {
  .circles-row { grid-template-columns: repeat(2, 130px); }
  .circle-card { width: 130px; height: 130px; }
}