/* ============================================================
   Bridal by Brittany Ann — dress-rehearsal.css
   Page-only styles for The Dress Rehearsal open day.

   Kept in its own file on purpose. styles.css is the shared
   house style for the whole site and this page is a one-off
   with a warmer, more celebratory treatment, so nothing here
   can leak out and change the boutique's other pages.

   THE ACCENT: the site is strictly black and white. This page
   borrows a single champagne tone for the small celebratory
   details (the ticket, the rules, the numerals). To take the
   page back to pure monochrome, set --dr-gold to var(--g-300)
   below. That one line is the whole change.
   ============================================================ */

.dr {
  --dr-gold: #c9a86c;
  --dr-gold-soft: #e6d4b3;
  --dr-gold-dim: rgba(201, 168, 108, .28);
  --dr-blush: #e7cfcb;
}

/* ============ Hero ============ */
.dr-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.4rem, 8vh, 6.5rem) 0 clamp(4rem, 9vh, 7rem);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(201, 168, 108, .16), transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(255, 255, 255, .07), transparent 60%),
    var(--ink);
}
/* The slow drift of confetti behind the hero. Sits under everything. */
.dr-drift {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .85;
}
.dr-hero > .container { position: relative; z-index: 2; }

.dr-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.dr-eyebrow { color: var(--dr-gold-soft); }
.dr-eyebrow::before { background: var(--dr-gold); opacity: 1; }

.dr-title {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .96;
  margin: 0 0 1.4rem;
}
.dr-title .dr-w {
  display: block;
  opacity: 0;
  transform: translateY(.5em);
  animation: drRise .95s var(--ease) forwards;
}
.dr-title .dr-w:nth-child(1) { animation-delay: .08s; }
.dr-title .dr-w:nth-child(2) { animation-delay: .2s; }
.dr-title .dr-w:nth-child(3) { animation-delay: .32s; }
.dr-title em {
  font-style: italic; font-weight: 300;
  color: var(--dr-gold-soft);
}
@keyframes drRise { to { opacity: 1; transform: none; } }

.dr-lede { color: var(--g-300); max-width: 46ch; }
.dr-hero-cta {
  display: flex; align-items: center; gap: 1.6rem 2rem;
  flex-wrap: wrap; margin: 2rem 0 1.4rem;
}
.dr-link-light { color: var(--white); border-color: rgba(255,255,255,.5); }
.dr-hero-note {
  font-size: .7rem; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--g-400); margin: 0;
}
.dr-hero-note span { color: var(--dr-gold); margin: 0 .5rem; }

/* --- the arched photo + the ticket stub that overlaps it --- */
.dr-hero-art { position: relative; padding-bottom: 3.5rem; }
.dr-arch {
  position: relative;
  border-radius: var(--arch) var(--arch) 6px 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  animation: drFade 1.1s var(--ease) .18s both;
}
.dr-arch img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--arch) var(--arch) 6px 6px;
  filter: grayscale(1) contrast(1.02);
}
/* a hairline of gold tracing the arch, so it reads as "dressed up" */
.dr-arch::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--dr-gold-dim);
  border-radius: var(--arch) var(--arch) 4px 4px;
  pointer-events: none;
}
@keyframes drFade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.dr-ticket {
  position: absolute; left: -1.5rem; bottom: 0;
  width: min(260px, 62%);
  background: var(--white); color: var(--ink);
  padding: 1.4rem 1.5rem 1.3rem;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
  animation: drFade .9s var(--ease) .5s both;
}
.dr-ticket-kicker {
  font-size: .6rem; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--g-500); margin: 0 0 .5rem;
}
.dr-ticket-day {
  font-family: var(--serif); font-size: 1.5rem; font-style: italic;
  margin: 0; line-height: 1; color: var(--g-600);
}
.dr-ticket-date { margin: .1rem 0 .5rem; display: flex; align-items: baseline; gap: .5rem; }
.dr-ticket-date .dr-num { font-family: var(--serif); font-size: 3.4rem; line-height: .9; }
.dr-ticket-date .dr-mon { font-family: var(--serif); font-size: 1.4rem; }
.dr-ticket-time {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 .2rem;
}
.dr-ticket-time span {
  display: block; letter-spacing: .04em; text-transform: none;
  font-size: .78rem; color: var(--g-500); margin-top: .15rem;
}
/* the perforated tear-line of a real ticket */
.dr-perf {
  position: relative; height: 1px; margin: 1rem -1.5rem;
  background-image: linear-gradient(to right, var(--g-300) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}
.dr-perf::before, .dr-perf::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px;
  margin-top: -8px; border-radius: 50%; background: var(--ink);
}
.dr-perf::before { left: -8px; }
.dr-perf::after  { right: -8px; }
.dr-ticket-where { font-size: .82rem; color: var(--g-500); margin: 0; line-height: 1.5; }
.dr-ticket-free {
  position: absolute; top: 1.2rem; right: 1.3rem;
  font-family: var(--serif); font-size: 1.2rem; font-style: italic;
  color: var(--dr-gold); margin: 0;
}

@media (max-width: 900px) {
  .dr-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .dr-hero-copy .eyebrow { justify-content: center; }
  .dr-lede { margin-left: auto; margin-right: auto; }
  .dr-hero-cta { justify-content: center; }
  .dr-hero-art { max-width: 460px; margin: 1.5rem auto 0; padding-bottom: 4.5rem; }
  /* Centre it with auto margins, NOT translateX. The entrance animation
     finishes on `transform: none`, and an animation beats a normal
     declaration, so a translate-based centring is wiped the moment the
     card lands and the ticket slides off the right of the screen. */
  .dr-ticket { left: 0; right: 0; margin-inline: auto; width: min(300px, 84%); text-align: left; }
}
@media (max-width: 640px) {
  /* On a phone the hero lede is a full screen of centred text at desktop
     size, which is a wall. Smaller type and a tighter measure make it a
     paragraph again. */
  .dr-lede { font-size: 1rem; line-height: 1.62; max-width: 34ch; }
  .dr-hero-note { font-size: .58rem; letter-spacing: .14em; }
  .dr-hero-note span { margin: 0 .3rem; }
  .dr-hero-cta .btn { width: 100%; }
}
@media (max-width: 420px) {
  .dr-ticket { padding: 1.2rem 1.2rem 1.1rem; }
  .dr-perf { margin-left: -1.2rem; margin-right: -1.2rem; }
  .dr-ticket-date .dr-num { font-size: 2.9rem; }
}

/* ============ The promise ============ */
.dr-promise-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--g-200);
  border: 1px solid var(--g-200);
}
.dr-promise-card {
  background: var(--paper); padding: clamp(1.8rem, 3.5vw, 2.6rem);
  transition: background .4s var(--ease);
}
.dr-promise-card:hover { background: var(--white); }
.dr-pnum {
  display: block; font-family: var(--serif); font-size: 1.1rem;
  color: var(--dr-gold); margin-bottom: 1rem; letter-spacing: .1em;
}
.dr-promise-card h3 { font-size: 1.7rem; margin-bottom: .5rem; }
.dr-promise-card p { color: var(--g-600); font-size: .98rem; margin: 0; }
@media (max-width: 820px) { .dr-promise-grid { grid-template-columns: 1fr; } }

/* ============ On the day ============ */
.dr-day-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.13);
}
.dr-day-card {
  background: var(--ink);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  position: relative;
  transition: background .45s var(--ease);
}
.dr-day-card:hover { background: var(--charcoal); }
.dr-dnum {
  display: block; font-family: var(--serif); font-size: 1rem;
  letter-spacing: .12em; color: var(--dr-gold); margin-bottom: 1.1rem;
}
.dr-day-card h3 { font-size: 1.55rem; margin-bottom: .55rem; color: var(--white); }
.dr-day-card p { color: var(--g-300); font-size: .95rem; margin: 0; }
.dr-day-card a { color: var(--dr-gold-soft); text-decoration: none; border-bottom: 1px solid var(--dr-gold-dim); }
.dr-day-card a:hover { border-bottom-color: var(--dr-gold-soft); }
@media (max-width: 900px) { .dr-day-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dr-day-grid { grid-template-columns: 1fr; } }

.dr-more {
  text-align: center; margin: 2.4rem auto 0; max-width: 52ch;
  font-size: .92rem; color: var(--g-400); font-style: italic;
}

/* ============ How it works ============ */
.dr-how-inner {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.dr-how-inner .section-head { margin-bottom: 0; }
.dr-steps { list-style: none; counter-reset: drstep; margin: 0; padding: 0; }
.dr-steps li {
  counter-increment: drstep;
  position: relative; padding: 0 0 2rem 4.2rem;
  border-left: 1px solid var(--g-200); margin-left: 1.2rem;
}
.dr-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.dr-steps li::before {
  content: counter(drstep, decimal-leading-zero);
  position: absolute; left: 0; top: -.15rem; transform: translateX(-50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--dr-gold);
  font-family: var(--serif); font-size: .95rem; color: var(--dr-gold);
}
.dr-steps h3 { font-size: 1.55rem; margin-bottom: .35rem; }
.dr-steps p { color: var(--g-600); margin: 0; font-size: .98rem; }
@media (max-width: 820px) { .dr-how-inner { grid-template-columns: 1fr; } }

/* ============ Register ============ */
.dr-register { scroll-margin-top: 5rem; }
.dr-form-card {
  position: relative;
  max-width: 860px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--g-200);
  padding: clamp(2rem, 5vw, 3.6rem);
}
/* a soft champagne wash in the top corners, so the card feels like an invitation */
.dr-form-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 40% at 0% 0%, rgba(201,168,108,.13), transparent 62%),
    radial-gradient(70% 40% at 100% 0%, rgba(231,207,203,.16), transparent 62%);
}
.dr-form-card > * { position: relative; }

.dr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
@media (max-width: 640px) { .dr-grid2 { grid-template-columns: 1fr; } }

.dr-field { margin-bottom: 1.3rem; }
.dr-field label {
  display: block; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--g-500); margin-bottom: .5rem;
}
.dr-req { color: var(--dr-gold); }
.dr-opt { color: var(--g-400); text-transform: none; letter-spacing: .04em; font-size: .72rem; font-style: italic; }
.dr-field input, .dr-field select {
  width: 100%; padding: .9rem 1rem;
  font-family: var(--sans); font-weight: 300; font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--g-200); border-radius: 0;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.dr-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--g-500) 50%), linear-gradient(135deg, var(--g-500) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.dr-field input::placeholder { color: var(--g-400); }
.dr-field input:hover, .dr-field select:hover { border-color: var(--g-300); }
.dr-field input:focus, .dr-field select:focus {
  outline: none; background: var(--white);
  border-color: var(--dr-gold); box-shadow: 0 0 0 3px rgba(201,168,108,.18);
}
.dr-field input.dr-bad { border-color: #8a1f1f; background: #fdf5f5; }

/* honeypot: off-screen for people, still fillable for a bot */
.dr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dr-msg { font-size: .9rem; margin: 0 0 1rem; }
.dr-msg:empty { margin: 0; }
.dr-msg .err { display: block; background: #f7e3e3; color: #8a1f1f; padding: .8rem 1rem; }
.dr-msg .info { display: block; color: var(--g-500); }

.dr-submit-row {
  display: flex; align-items: center; gap: 1.6rem;
  flex-wrap: wrap; margin-top: .6rem;
}
.dr-submit { min-width: 200px; }
.dr-submit[disabled] { opacity: .5; cursor: progress; }
.dr-privacy { flex: 1 1 260px; font-size: .8rem; color: var(--g-500); margin: 0; line-height: 1.55; }
.dr-privacy a { color: var(--g-600); }

/* --- success state --- */
.dr-done { text-align: center; animation: drFade .6s var(--ease) both; }
.dr-done-mark { width: 76px; height: 76px; margin: 0 auto 1.6rem; }
.dr-done-mark svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dr-done-ring { stroke: var(--dr-gold); stroke-width: 1.5; stroke-dasharray: 183; stroke-dashoffset: 183; animation: drDraw .8s var(--ease) .1s forwards; }
.dr-done-tick { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; animation: drDraw .5s var(--ease) .55s forwards; }
@keyframes drDraw { to { stroke-dashoffset: 0; } }
.dr-done-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.dr-done-share { font-size: .9rem; color: var(--g-500); max-width: 46ch; margin: 0 auto; }

/* ============ FAQ ============ */
.dr-faq-list { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--g-200); }
.dr-q { border-bottom: 1px solid var(--g-200); }
.dr-q summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--serif); font-size: 1.3rem;
  transition: color .3s var(--ease);
}
.dr-q summary::-webkit-details-marker { display: none; }
.dr-q summary::after {
  content: "+"; flex: none;
  font-family: var(--sans); font-weight: 300; font-size: 1.4rem; line-height: 1;
  color: var(--dr-gold);
  transition: transform .35s var(--ease);
}
.dr-q[open] summary::after { transform: rotate(45deg); }
.dr-q summary:hover { color: var(--g-600); }
.dr-q p { margin: 0 0 1.4rem; color: var(--g-600); max-width: 62ch; font-size: .98rem; }

/* ============ Final band ============ */
.dr-final { text-align: center; }
.dr-final-title { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: .8rem; }
.dr-final .lede { color: var(--g-300); }
.dr-final-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.8rem; }
.dr-final-note { font-size: .88rem; color: var(--g-400); margin: 0; }
.dr-final-note a { color: var(--dr-gold-soft); }

/* ============ Confetti cannons ============ */
.dr-confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 300;
  opacity: 0; transition: opacity .4s linear;
}
.dr-confetti.firing { opacity: 1; }

/* ============ Reduced motion ============
   Somebody who has asked their device for less movement gets the
   page with none of it: no confetti, no drift, no entrance. The
   content is identical. */
@media (prefers-reduced-motion: reduce) {
  .dr-title .dr-w, .dr-arch, .dr-ticket, .dr-done { animation: none; opacity: 1; transform: none; }
  .dr-done-ring, .dr-done-tick { animation: none; stroke-dashoffset: 0; }
  .dr-drift, .dr-confetti { display: none; }
}