/* ── SECRET ROOM PANEL ─────────────────────────────────────
   Fullscreen modal. Only reachable by tapping clock 3 times.
   Not in the nav, not in the scroll flow.
─────────────────────────────────────────────────────────── */
#secret-panel {
  position: fixed; inset: 0; z-index: 400;
  background: linear-gradient(170deg, #f0d0c8 0%, #e8b8a8 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(3rem,6vw,5rem) clamp(2rem,6vw,5rem);
  text-align: center;
  animation: fadeIn .5s ease;
  overflow-y: auto;
}

#secret-panel .secret-close {
  position: fixed; top: 1.4rem; right: 1.4rem;
  background: rgba(253,240,235,.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(232,169,154,.3); border-radius: 50px;
  padding: .45rem 1rem; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: .68rem;
  letter-spacing: .2em; color: var(--text-mid); text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(180,90,80,.1); transition: all .3s;
}
#secret-panel .secret-close:hover { background: rgba(232,169,154,.25); }

.secret-badge {
  font-size: .6rem; letter-spacing: .55em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
  border: 1px solid rgba(201,149,106,.3);
  padding: .4rem 1.2rem; display: inline-block;
}

.secret-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-style: italic; color: var(--text-dark);
  margin-bottom: .7rem; line-height: 1.3;
}

.secret-sub {
  font-size: .72rem; color: var(--text-light);
  letter-spacing: .1em; margin-bottom: 2.5rem;
  max-width: 480px; line-height: 1.7;
}

/* ── BEFORE/AFTER SLIDER ─────────────────────────────────── */
.ba-outer { width: 100%; max-width: 680px; position: relative; }

.ba-wrap {
  position: relative; width: 100%; overflow: hidden;
  cursor: ew-resize;
  box-shadow: 0 20px 60px rgba(180,90,80,.2);
  user-select: none; touch-action: pan-y; border-radius: 2px;
}

/* After image — sets the natural height of the slider */
.ba-after-img {
  display: block; width: 100%; height: auto; pointer-events: none;
}

/* Before clip container */
.ba-before {
  position: absolute; top: 0; left: 0;
  width: 50%; height: 100%; overflow: hidden;
}

/* Before image — full width, clipped by parent */
.ba-before-img {
  position: absolute; top: 0; left: 0;
  height: 100%; object-fit: cover; pointer-events: none;
  /* width set dynamically by BASliderModule */
}

.ba-divider {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: rgba(253,240,235,.92);
  left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 5;
}

.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid rgba(232,169,154,.7);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(180,90,80,.2); pointer-events: none;
}
.ba-handle svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--rose); stroke-width: 2;
}

.ba-label-before,
.ba-label-after {
  position: absolute; top: .75rem;
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(253,240,235,.95); font-family: 'Jost', sans-serif;
  background: rgba(58,31,26,.45); backdrop-filter: blur(4px);
  padding: .28rem .7rem; z-index: 7; pointer-events: none;
}
.ba-label-before { left: .75rem; top: .75rem; }
.ba-label-after  { right: .75rem; top: auto; bottom: .75rem; }