/* ==========================================================================
   Loading screen — four styles
   --------------------------------------------------------------------------
   Rules that apply to all of them:

   1. The panel is removed from the accessibility tree (aria-hidden) and a
      separate role="status" carries the message, so a screen reader announces
      "loading" once rather than reading decorative markup.

   2. Reduced motion removes the ANIMATION, not the loader. Someone who has
      asked for less movement still needs to know the page is working.

   3. Nothing here uses a property that triggers layout. Only opacity and
      transform, both of which the compositor handles without repainting —
      the loader must not itself become the reason the page feels slow.

   4. Every style ends at .is-done, which is applied by JS. If the script never
      runs, the no-JS rule at the bottom hides the panel outright: a visitor
      must never be left staring at a loader because of a failed script.
   ========================================================================== */

#ldr {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--ldr-bg, #2e1a24);
  /* The panel is decorative; hiding it from pointers the moment it fades
     prevents an invisible sheet from swallowing the first click. */
  transition: opacity .45s ease, visibility .45s ease;
}

#ldr.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#ldr .ldr-text {
  position: absolute;
  bottom: clamp(40px, 12vh, 110px);
  inset-inline: 0;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ldr-fg, #c9a24b);
  opacity: .75;
}

/* Visually hidden, still announced. */
.ldr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 1 · monogram ─────────────────────────────────────────────────────────
   The OC mark drawn in gold, breathing once. Slowest of the four but the
   only one that says whose site this is while it waits. */
#ldr[data-style="monogram"] .ldr-mark {
  font-family: "Cinzel", serif;
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  direction: ltr;
  display: inline-flex;
  color: var(--ldr-fg, #c9a24b);
  animation: ldr-breathe 1.9s ease-in-out infinite;
}
#ldr[data-style="monogram"] .ldr-mark .c {
  margin-left: -.46em;
  font-size: 1.12em;
  opacity: .82;
}

@keyframes ldr-breathe {
  0%, 100% { opacity: .45; transform: scale(.985); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ── 2 · curtain ──────────────────────────────────────────────────────────
   Two panels part to reveal the page. Reads as fabric, which is the point on
   a couture site. */
#ldr[data-style="curtain"] { background: transparent; }

#ldr[data-style="curtain"] .ldr-half {
  position: fixed;
  inset-block: 0;
  width: 50.5vw;                 /* .5 overlap: no hairline seam at the join */
  background: var(--ldr-bg, #2e1a24);
  transition: transform .75s cubic-bezier(.76, 0, .24, 1);
}
#ldr[data-style="curtain"] .ldr-half.a { left: 0; }
#ldr[data-style="curtain"] .ldr-half.b { right: 0; }

#ldr[data-style="curtain"].is-done .ldr-half.a { transform: translateX(-100%); }
#ldr[data-style="curtain"].is-done .ldr-half.b { transform: translateX(100%); }

/* The panel itself must not fade — the curtains are the animation. */
#ldr[data-style="curtain"].is-done { opacity: 1; transition: visibility 0s .75s; }

#ldr[data-style="curtain"] .ldr-mark {
  position: relative;
  z-index: 1;
  font-family: "Cinzel", serif;
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: var(--ldr-fg, #c9a24b);
  direction: ltr;
  transition: opacity .3s;
}
#ldr[data-style="curtain"].is-done .ldr-mark { opacity: 0; }

/* ── 3 · bar ──────────────────────────────────────────────────────────────
   A hairline at the top edge. Costs nothing: the page is visible the whole
   time, so LCP is untouched. */
#ldr[data-style="bar"] {
  inset: 0 0 auto 0;
  height: 3px;
  display: block;
  background: transparent;
}
#ldr[data-style="bar"] .ldr-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ldr-fg, #c9a24b), #f2d789);
  box-shadow: 0 0 10px rgba(201, 162, 75, .55);
  transition: width .25s ease;
}
#ldr[data-style="bar"] .ldr-mark,
#ldr[data-style="bar"] .ldr-text { display: none; }

/* ── 4 · skeleton ─────────────────────────────────────────────────────────
   Grey blocks where the dresses will be. Measured best for Core Web Vitals
   because it shows the layout instead of covering it. */
#ldr[data-style="skeleton"] {
  background: var(--cream, #faf6f2);
  place-items: start center;
  padding-top: clamp(74px, 10vh, 120px);
  overflow: hidden;
}
#ldr[data-style="skeleton"] .ldr-mark,
#ldr[data-style="skeleton"] .ldr-text { display: none; }

.ldr-skel-wrap { width: min(1180px, 92vw); }

/* A hero band above the grid, so the skeleton reads as THIS site's layout —
   a wide banner, then a row of dress tiles — rather than a generic card wall. */
.ldr-skel-hero {
  height: clamp(120px, 22vh, 240px);
  border-radius: 18px;
  margin-bottom: 26px;
  background: linear-gradient(160deg, #efe6e2, #e7dcd7);
  position: relative;
  overflow: hidden;
}
.ldr-skel-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: ldr-sweep 1.6s infinite;
}

.ldr-skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px;
}
.ldr-skel i {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #ece4e0;
  position: relative;
  overflow: hidden;
}
.ldr-skel i::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: ldr-sweep 1.4s infinite;
}
.ldr-skel i:nth-child(n+5) { display: none; }
@media (min-width: 861px) { .ldr-skel i:nth-child(n+5) { display: block; } }

@keyframes ldr-sweep { 100% { transform: translateX(100%); } }

/* ── 5 · shimmer ──────────────────────────────────────────────────────────
   Kinetic typography: the wordmark rendered in gold with a brighter highlight
   sweeping across it, the way light catches embroidery. */
#ldr[data-style="shimmer"] .ldr-word {
  font-family: "Cinzel", serif;
  direction: ltr;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  letter-spacing: .16em;
  font-weight: 600;
  background: linear-gradient(100deg,
    var(--ldr-fg, #c9a24b) 0%, var(--ldr-fg, #c9a24b) 38%,
    #fff6da 50%, var(--ldr-fg, #c9a24b) 62%, var(--ldr-fg, #c9a24b) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldr-shimmer 2.2s ease-in-out infinite;
}
@keyframes ldr-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* ── 6 · ring ─────────────────────────────────────────────────────────────
   A thin gold arc rotating around the monogram — restrained and premium. */
#ldr[data-style="ring"] .ldr-ring {
  display: grid;
  place-items: center;
  width: clamp(96px, 20vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 75, .18);
  border-top-color: var(--ldr-fg, #c9a24b);
  border-right-color: var(--ldr-fg, #c9a24b);
  animation: ldr-spin 1s linear infinite;
}
#ldr[data-style="ring"] .ldr-mark {
  font-family: "Cinzel", serif;
  direction: ltr;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  color: var(--ldr-fg, #c9a24b);
  display: inline-flex;
  animation: ldr-spin-rev 1s linear infinite;  /* keep the letters upright */
}
#ldr[data-style="ring"] .ldr-mark .c { margin-left: -.46em; font-size: 1.12em; opacity: .82; }
@keyframes ldr-spin { to { transform: rotate(360deg); } }
@keyframes ldr-spin-rev { to { transform: rotate(-360deg); } }

/* ── 7 · counter ──────────────────────────────────────────────────────────
   An editorial percentage climbing 0 → 100, the number driven by the loader
   script. Fashion houses use a bare counter as a confident, modern intro. */
#ldr[data-style="counter"] .ldr-count {
  font-family: "Cinzel", serif;
  direction: ltr;
  font-size: clamp(3.4rem, 13vw, 8rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ldr-fg, #c9a24b);
  font-variant-numeric: tabular-nums;
}
#ldr[data-style="counter"] .ldr-count::after { content: "%"; font-size: .42em; vertical-align: super; opacity: .7; margin-inline-start: .06em; }

/* ── 8 · dots ─────────────────────────────────────────────────────────────
   Three dots rising in sequence. The quietest, most modern option. */
#ldr[data-style="dots"] .ldr-dots { display: inline-flex; gap: 14px; }
#ldr[data-style="dots"] .ldr-dots i {
  width: clamp(11px, 2.4vw, 15px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ldr-fg, #c9a24b);
  animation: ldr-bounce 1.2s ease-in-out infinite;
}
#ldr[data-style="dots"] .ldr-dots i:nth-child(2) { animation-delay: .16s; }
#ldr[data-style="dots"] .ldr-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ldr-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40%           { transform: translateY(-14px); opacity: 1; }
}

/* ── 9 · aurora ───────────────────────────────────────────────────────────
   A soft gradient that drifts behind the monogram — the "animated gradient"
   look, tuned to the brand's wine-and-gold rather than neon. */
#ldr[data-style="aurora"] { overflow: hidden; }
#ldr[data-style="aurora"]::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38% 46% at 24% 30%, rgba(201, 162, 75, .40), transparent 60%),
    radial-gradient(42% 50% at 78% 70%, rgba(109, 43, 74, .55), transparent 62%),
    radial-gradient(46% 52% at 60% 22%, rgba(46, 26, 36, .0), transparent 60%);
  filter: blur(6px);
  animation: ldr-aurora 7s ease-in-out infinite alternate;
  z-index: 0;
}
#ldr[data-style="aurora"] .ldr-mark,
#ldr[data-style="aurora"] .ldr-text { position: relative; z-index: 1; }
#ldr[data-style="aurora"] .ldr-mark {
  font-family: "Cinzel", serif;
  direction: ltr;
  font-size: clamp(3rem, 9vw, 5.5rem);
  color: var(--ldr-fg, #c9a24b);
  display: inline-flex;
  animation: ldr-breathe 2.4s ease-in-out infinite;
}
#ldr[data-style="aurora"] .ldr-mark .c { margin-left: -.46em; font-size: 1.12em; opacity: .82; }
@keyframes ldr-aurora {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.05); }
  100% { transform: translate3d(5%, 4%, 0) scale(1.18); }
}

/* ── 10 · glass ───────────────────────────────────────────────────────────
   Glassmorphism 2.0: a frosted card floating over the brand colour, the
   monogram resting on it. Reads as futuristic and premium. */
#ldr[data-style="glass"] .ldr-glass {
  display: grid;
  place-items: center;
  width: clamp(130px, 30vw, 180px);
  aspect-ratio: 1;
  border-radius: 26px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: ldr-float 3s ease-in-out infinite;
}
#ldr[data-style="glass"] .ldr-mark {
  font-family: "Cinzel", serif;
  direction: ltr;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--ldr-fg, #c9a24b);
  display: inline-flex;
}
#ldr[data-style="glass"] .ldr-mark .c { margin-left: -.46em; font-size: 1.12em; opacity: .82; }
@keyframes ldr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── accessibility ────────────────────────────────────────────────────────
   Motion is removed; the loader is not. The shimmer, the breathing and the
   curtain sweep all stop, and the panel simply cuts away when ready. */
@media (prefers-reduced-motion: reduce) {
  #ldr,
  #ldr .ldr-half,
  #ldr .ldr-mark,
  #ldr .ldr-word,
  #ldr .ldr-ring,
  #ldr .ldr-dots i,
  #ldr .ldr-glass,
  #ldr[data-style="aurora"]::before,
  #ldr[data-style="bar"] .ldr-fill { transition-duration: .01ms; animation: none !important; }
  .ldr-skel i::after,
  .ldr-skel-hero::after { animation: none; opacity: 0; }
  #ldr[data-style="monogram"] .ldr-mark,
  #ldr .ldr-dots i { opacity: 1; }
  /* Kinetic type can't clip to transparent with no animation — show it solid. */
  #ldr[data-style="shimmer"] .ldr-word {
    background: none; -webkit-background-clip: initial; background-clip: initial;
    color: var(--ldr-fg, #c9a24b);
  }
}

/* ── no JavaScript ────────────────────────────────────────────────────────
   The script is what removes the loader. Without it the panel would cover the
   site permanently, so it is never shown in the first place. */
.no-js #ldr { display: none !important; }