/* =============================================================
   ANNIVERSARY LAUNCH SCREEN  —  on-brand (NLight: amber + navy)
   Pair with: assets/js/anniversary-launch.js
   All classes prefixed `anniv-` to avoid collisions.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap");

:root {
  --anniv-amber: #FFB966;            /* brand accent  (--theme)  */
  --anniv-amber-soft: #ffd9a8;
  --anniv-navy: #0F183E;             /* brand dark    (--theme2) */
  --anniv-navy-deep: #070c20;
  --anniv-text: #f4f6fb;
  --anniv-muted: #aeb6cc;
}

/* Lock scroll while the overlay is active */
html.anniv-lock, html.anniv-lock body { overflow: hidden !important; }

/* ---------- Overlay shell ---------- */
.anniv-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--anniv-text);
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(255,185,102,.12), transparent 60%),
    linear-gradient(160deg, #11193f 0%, #0a1130 55%, var(--anniv-navy-deep) 100%);
  overflow: hidden;
  opacity: 1;
  transition: opacity .9s ease, visibility .9s ease;
}
.anniv-overlay.anniv-hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* Soft amber vignette */
.anniv-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(620px 320px at 50% 0%,   rgba(255,185,102,.14), transparent 70%),
    radial-gradient(900px 520px at 50% 120%, rgba(255,185,102,.08), transparent 70%);
}

/* ---------- Effect canvases ---------- */
.anniv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anniv-canvas--ambient { z-index: 0; }
.anniv-canvas--fx      { z-index: 4; }

/* ---------- Content ---------- */
.anniv-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 760px;
  transition: opacity .6s ease, transform .6s ease;
}
.anniv-content.anniv-fade-out { opacity: 0; transform: translateY(-14px); pointer-events: none; }

/* Image with rotating amber ring + glow */
.anniv-image-ring {
  position: relative;
  width: 184px;
  height: 184px;
  margin: 0 auto 30px;
  border-radius: 50%;
  animation: anniv-up .8s both;
}
.anniv-ring-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--anniv-amber), rgba(255,185,102,0) 28%,
    var(--anniv-amber) 52%, rgba(255,185,102,0) 80%, var(--anniv-amber));
  filter: drop-shadow(0 0 14px rgba(255,185,102,.45));
  animation: anniv-spin 7s linear infinite;
}
.anniv-image-wrap {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(150deg, #18224d, #0c1330);
  box-shadow: inset 0 0 28px rgba(0,0,0,.55);
}
.anniv-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anniv-image-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  font-size: 52px;
  color: var(--anniv-amber);
}
.anniv-image-fallback small {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 500;
  color: var(--anniv-muted);
}

/* Headings (staggered entrance) */
.anniv-title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: .4px;
  background: linear-gradient(180deg, #ffffff 0%, var(--anniv-amber-soft) 55%, var(--anniv-amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: anniv-up .8s .15s both;
}
.anniv-subtitle {
  margin: 0 0 36px;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  color: var(--anniv-muted);
  animation: anniv-up .8s .3s both;
}

/* ---------- Countdown (glassmorphism) ---------- */
.anniv-countdown {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  animation: anniv-up .8s .45s both;
}
.anniv-card {
  width: clamp(84px, 22vw, 122px);
  padding: 18px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,185,102,.30);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 10px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 26px rgba(255,185,102,.10);
}
.anniv-card__num {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.anniv-card__num.anniv-tick { animation: anniv-tick .45s ease; }
.anniv-card__label {
  margin-top: 6px;
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--anniv-amber-soft);
}
.anniv-colon {
  align-self: center;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 700;
  color: var(--anniv-amber);
  opacity: .65;
  animation: anniv-blink 1s steps(1) infinite;
}

/* ---------- Celebration ---------- */
.anniv-celebrate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease;
}
.anniv-celebrate.anniv-show { opacity: 1; visibility: visible; }

.anniv-bigtitle {
  margin: 0 0 16px;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 800;
  background: linear-gradient(100deg, #fff 0%, var(--anniv-amber) 40%, #fff 55%, var(--anniv-amber) 70%, #fff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0;
  transform: scale(.7);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease;
}
.anniv-celebrate.anniv-show .anniv-bigtitle { opacity: 1; transform: scale(1); animation: anniv-shimmer 3s linear infinite; }

.anniv-thanks {
  margin: 0 0 30px;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: var(--anniv-text);
  opacity: 0;
  transition: opacity .8s ease .45s;
}
.anniv-celebrate.anniv-show .anniv-thanks { opacity: 1; }

/* Enter button — amber glow */
.anniv-enter {
  appearance: none;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 14px 36px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--anniv-navy);
  background: linear-gradient(180deg, var(--anniv-amber-soft), var(--anniv-amber));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease .7s, transform .8s ease .7s, box-shadow .3s ease;
  animation: anniv-glow 2.2s ease-in-out infinite;
}
.anniv-celebrate.anniv-show .anniv-enter { opacity: 1; transform: translateY(0); }
.anniv-enter:hover  { box-shadow: 0 0 32px rgba(255,185,102,.85); }
.anniv-enter:active { transform: translateY(1px); }

/* ---------- Keyframes ---------- */
@keyframes anniv-up     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes anniv-spin   { to { transform: rotate(360deg); } }
@keyframes anniv-tick   { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--anniv-amber-soft); } 100% { transform: scale(1); } }
@keyframes anniv-blink  { 50% { opacity: .2; } }
@keyframes anniv-shimmer{ to { background-position: -220% center; } }
@keyframes anniv-glow   { 0%,100% { box-shadow: 0 0 12px rgba(255,185,102,.35); } 50% { box-shadow: 0 0 30px rgba(255,185,102,.75); } }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .anniv-image-ring { width: 138px; height: 138px; }
  .anniv-image-fallback { font-size: 40px; }
  .anniv-countdown { gap: 8px; }
  .anniv-card { border-radius: 16px; padding: 14px 8px; }
}

/* =============================================================
   RED VELVET CURTAINS  — cover the screen, then open smoothly
   to reveal the "Happy Anniversary" celebration behind them.
   ============================================================= */
.anniv-curtains {
  position: absolute;
  inset: 0;
  z-index: 30;            /* above the celebration (5) + confetti (4) */
  overflow: hidden;
  pointer-events: none;
}

/* Two deep-red velvet panels, closed (overlapping) by default */
.anniv-cpanel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.50) 0, rgba(0,0,0,.04) 26px,
      rgba(255,255,255,.06) 52px, rgba(0,0,0,.04) 78px, rgba(0,0,0,.50) 104px),
    radial-gradient(140% 60% at 50% 0%, rgba(255,120,120,.10), transparent 60%),
    linear-gradient(180deg, #b32a36 0%, #6e0f17 32%, #2f070c 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.55);
  /* smooth, slow open */
  transition: transform 2.6s cubic-bezier(.66, 0, .2, 1);
  will-change: transform;
}
.anniv-cpanel--left  { left: 0;  transform-origin: left center; }
.anniv-cpanel--right { right: 0; transform-origin: right center; }

/* Gold trim down the inner (centre) edge */
.anniv-cpanel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(90deg, #ffe1b0, #FFB966 55%, rgba(180,120,40,.7));
  box-shadow: 0 0 14px rgba(255,185,102,.5);
}
.anniv-cpanel--left::before  { right: 0; }
.anniv-cpanel--right::before { left: 0; }

/* OPEN: gather each panel toward its outer edge (stays as a side drape) */
.anniv-curtains--open .anniv-cpanel--left  { transform: scaleX(.26); }
.anniv-curtains--open .anniv-cpanel--right { transform: scaleX(.26); }

/* Gold tiebacks that appear as the curtains gather */
.anniv-tieback {
  position: absolute;
  top: 47%;
  width: 62px;
  height: 15px;
  z-index: 31;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe1b0, #FFB966 60%, #8a5a1e);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 14px rgba(255,185,102,.5);
  opacity: 0;
  transition: opacity .6s ease 1.8s;
}
.anniv-tieback::after {            /* tassel */
  content: "";
  position: absolute;
  left: 50%; bottom: -16px;
  width: 13px; height: 20px;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: radial-gradient(circle at 50% 30%, #ffe1b0, #7a4a14);
}
.anniv-tieback--left  { left: 6%;  transform: rotate(-8deg); }
.anniv-tieback--right { right: 6%; transform: rotate(8deg); }
.anniv-curtains--open .anniv-tieback { opacity: 1; }

@media (max-width: 768px) {
  .anniv-cpanel { width: 54%; }
  .anniv-curtains--open .anniv-cpanel--left,
  .anniv-curtains--open .anniv-cpanel--right { transform: scaleX(.18); }
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .anniv-image-ring { width: 138px; height: 138px; }
  .anniv-image-fallback { font-size: 40px; }
  .anniv-countdown { gap: 8px; }
  .anniv-card { border-radius: 16px; padding: 14px 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .anniv-ring-spin, .anniv-colon, .anniv-enter { animation: none; }
  .anniv-celebrate.anniv-show .anniv-bigtitle { animation: none; }
  .anniv-image-ring, .anniv-title, .anniv-subtitle, .anniv-countdown { animation-duration: .01s; }
  .anniv-cpanel { transition: transform 1s ease; }
}