/* 261 Pass 27. Loaded last.
   Private showings circle: hierarchy (Private showings / By appointment lead; tenant line is a footnote),
   Inquire CTA (no public email/phone), subtle ambient ring motion using pass-10 tokens; reduced-motion holds still. */

/* ===== Hierarchy inside the circle ===== */
.oh-card{gap:10px;padding:48px 28px 40px}
.oh-card > .eyebrow{position:relative;z-index:1;margin:0}
.oh-appt .oh-mon{
  position:relative;z-index:1;
  font-size:clamp(32px,4.6vw,48px);font-style:normal;line-height:1.05;margin:0;
  letter-spacing:-.01em;color:var(--paper);
}

/* asterisk footnote: much smaller than body (body is 16px); escapes the pass-10 .oh-time 16px rule */
.oh-note{
  position:relative;z-index:1;
  max-width:26ch;margin:4px 0 0;
  font:400 11px/1.45 var(--sans);
  letter-spacing:.01em;color:var(--label);
  text-wrap:pretty;
}
.oh-acts{position:relative;z-index:1;margin-top:14px}
.oh-acts .btn{min-height:40px;padding:0 22px;font-size:13px}

/* phones: keep the footnote readable and inside the ring */
@media (max-width:600px){
  .oh-note{max-width:22ch;font-size:10.5px;line-height:1.5}
  .oh-appt .oh-mon{font-size:clamp(28px,8.5vw,40px)}
}

/* ===== Subtle motion: draw (existing) then a slow ambient breath on the ring.
   Not a micro-wiggle: opacity only, ~8s, ease from --e-enter. No loop under reduced-motion. ===== */
@media (prefers-reduced-motion: no-preference){
  html.js .oh-card.in .oh-ring{
    animation:ohRingBreath 8s var(--e-enter) 2s infinite alternate;
  }
}
@keyframes ohRingBreath{
  from{opacity:.55}
  to{opacity:1}
}

/* content settles once after the ring draws (narrative: title, then appointment, then footnote, then Inquire) */
@media (prefers-reduced-motion: no-preference){
  html.js .oh-card:not(.in) > .eyebrow,
  html.js .oh-card:not(.in) > .oh-date,
  html.js .oh-card:not(.in) > .oh-note,
  html.js .oh-card:not(.in) > .oh-acts{opacity:0;transform:translateY(var(--reveal-y))}
  html.js .oh-card.in > .eyebrow,
  html.js .oh-card.in > .oh-date,
  html.js .oh-card.in > .oh-note,
  html.js .oh-card.in > .oh-acts{
    opacity:1;transform:none;
    transition:opacity var(--d-enter) var(--e-enter),transform var(--d-enter) var(--e-enter);
  }
  html.js .oh-card.in > .oh-date{transition-delay:.12s}
  html.js .oh-card.in > .oh-note{transition-delay:.22s}
  html.js .oh-card.in > .oh-acts{transition-delay:.32s}
}

@media (prefers-reduced-motion: reduce){
  .oh-ring{animation:none!important;opacity:1!important}
  html.js .oh-card > .eyebrow,
  html.js .oh-card > .oh-date,
  html.js .oh-card > .oh-note,
  html.js .oh-card > .oh-acts{opacity:1;transform:none;transition:none!important}
}