/* The Human Constellation doorway for The Way of the Living Mirror.
   Additive, contained, and intentionally separate from the protected room architecture. */
.shared-sky-doorway,
.shared-sky-earned{
  --shared-sky-x:50%;
  --shared-sky-y:42%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(208,183,127,.32);
  background:
    radial-gradient(circle at var(--shared-sky-x) var(--shared-sky-y),rgba(116,154,166,.18),transparent 30%),
    radial-gradient(circle at 82% 12%,rgba(208,183,127,.13),transparent 28%),
    linear-gradient(135deg,#101713 0%,#111a1b 48%,#0d1110 100%);
  color:#f4efe5;
  box-shadow:0 24px 62px rgba(24,29,27,.18);
}
.shared-sky-doorway{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  align-items:center;
  gap:clamp(1.25rem,4vw,3.5rem);
  margin:clamp(1.1rem,3vw,1.8rem) 0 .35rem;
  padding:clamp(1.35rem,4.5vw,3.5rem);
  min-height:390px;
  border-radius:clamp(22px,4vw,34px);
}
.shared-sky-doorway:before,
.shared-sky-earned:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 23%,rgba(255,255,255,.9) 0 1px,transparent 1.8px),
    radial-gradient(circle at 68% 16%,rgba(255,255,255,.74) 0 1px,transparent 1.8px),
    radial-gradient(circle at 89% 42%,rgba(208,183,127,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 35% 78%,rgba(186,221,224,.75) 0 1px,transparent 1.8px),
    radial-gradient(circle at 72% 72%,rgba(255,255,255,.62) 0 1px,transparent 1.6px);
  background-size:190px 170px,260px 230px,330px 280px,230px 210px,290px 260px;
  opacity:.38;
}
.shared-sky-doorway:after,
.shared-sky-earned:after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -12% -55% 28%;
  height:80%;
  border:1px solid rgba(221,211,185,.12);
  border-radius:50% 50% 0 0;
  box-shadow:0 -20px 70px rgba(112,153,164,.08);
  transform:rotate(-4deg);
}
.shared-sky-visual{
  position:relative;
  width:min(310px,72vw);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.34));
}
.shared-sky-mirror{
  position:absolute;
  inset:8%;
  border:1px solid rgba(227,218,196,.48);
  border-radius:49% 51% 48% 52% / 54% 47% 53% 46%;
  background:
    radial-gradient(circle at 52% 43%,rgba(189,219,222,.16),transparent 30%),
    linear-gradient(125deg,rgba(255,255,255,.04),rgba(255,255,255,0) 36%,rgba(208,183,127,.06) 68%,rgba(255,255,255,.025));
  box-shadow:
    inset 0 0 46px rgba(190,221,224,.06),
    0 0 0 12px rgba(255,255,255,.018),
    0 0 62px rgba(92,133,142,.12);
}
.shared-sky-mirror:before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:inherit;
  border:1px solid rgba(208,183,127,.19);
  transform:rotate(12deg);
}
.shared-sky-mirror:after{
  content:"";
  position:absolute;
  left:22%;
  top:12%;
  width:26%;
  height:70%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:rotate(24deg);
  filter:blur(2px);
}
.shared-sky-light{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#f5e5b9;
  box-shadow:0 0 14px rgba(245,229,185,.9);
}
.shared-sky-light:nth-child(1){left:48%;top:44%;width:8px;height:8px}
.shared-sky-light:nth-child(2){left:28%;top:31%}
.shared-sky-light:nth-child(3){left:61%;top:24%;width:4px;height:4px;background:#c7e2e4}
.shared-sky-light:nth-child(4){left:70%;top:55%;width:6px;height:6px}
.shared-sky-light:nth-child(5){left:38%;top:68%;width:4px;height:4px;background:#c7e2e4}
.shared-sky-thread{
  position:absolute;
  left:31%;
  top:48%;
  width:42%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(207,226,227,.45),rgba(208,183,127,.42),transparent);
  transform:rotate(-17deg);
  transform-origin:center;
}
.shared-sky-visual-note{
  position:absolute;
  bottom:.2rem;
  margin:0;
  color:rgba(241,235,223,.7);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
}
.shared-sky-copy{min-width:0;position:relative;z-index:1}
.shared-sky-copy .eyebrow,
.shared-sky-earned .eyebrow{color:#d8c28a}
.shared-sky-copy h2,
.shared-sky-earned h2{
  margin:.4rem 0 .75rem;
  color:#fffaf0;
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,3.8rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.03em;
}
.shared-sky-lede{
  max-width:720px;
  margin:0;
  color:#e7e0d2;
  font-family:var(--serif);
  font-size:clamp(1.08rem,2.3vw,1.42rem);
  line-height:1.5;
}
.shared-sky-summary{max-width:720px;color:#c9c7bf;line-height:1.7}
.shared-sky-facts{display:flex;flex-wrap:wrap;gap:.48rem;margin:1.15rem 0 1.3rem}
.shared-sky-facts span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.4rem .72rem;
  border:1px solid rgba(210,195,160,.24);
  border-radius:999px;
  background:rgba(245,238,222,.055);
  color:#e4ddd0;
  font-size:.76rem;
}
.shared-sky-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}
.shared-sky-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.58rem;
  min-height:48px;
  padding:.78rem 1.08rem;
  border:1px solid #d0b77f;
  border-radius:999px;
  background:linear-gradient(135deg,#e0ca96,#b99253);
  box-shadow:0 13px 28px rgba(0,0,0,.22);
  color:#151712;
  text-decoration:none;
  font-weight:850;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.shared-sky-primary:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(0,0,0,.28);filter:brightness(1.04)}
.shared-sky-primary:focus-visible,.shared-sky-secondary:focus-visible{outline:3px solid #fff;outline-offset:4px}
.shared-sky-secondary{color:#eee6d5;font-weight:750;text-underline-offset:.25em}
.shared-sky-note{display:block;margin-top:.8rem;color:rgba(241,235,223,.62);font-size:.78rem;line-height:1.55}
.shared-sky-doorway.is-returning .shared-sky-mirror{box-shadow:inset 0 0 50px rgba(190,221,224,.1),0 0 0 12px rgba(255,255,255,.022),0 0 74px rgba(208,183,127,.16)}

.shared-sky-earned{
  margin:1rem 0;
  padding:clamp(1.25rem,4vw,2.4rem);
  border-radius:var(--radius);
}
.shared-sky-earned[hidden]{display:none!important}
.shared-sky-earned-inner{display:grid;grid-template-columns:minmax(150px,.34fr) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:center}
.shared-sky-earned-visual{position:relative;min-height:170px;display:grid;place-items:center}
.shared-sky-earned-visual .shared-sky-mirror{inset:8% 18%}
.shared-sky-earned-copy{min-width:0}
.shared-sky-earned h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.shared-sky-earned p{max-width:700px;color:#d5d0c5}
.shared-sky-earned.is-revealed{animation:shared-sky-reveal .7s ease both}
.shared-sky-status{margin:.7rem 0 0;color:#d8c28a;font-size:.8rem}

@media (prefers-reduced-motion:no-preference){
  .shared-sky-mirror{animation:shared-sky-breathe 7.5s ease-in-out infinite}
  .shared-sky-light{animation:shared-sky-pulse 4.8s ease-in-out infinite}
  .shared-sky-light:nth-child(3),.shared-sky-light:nth-child(5){animation-delay:-1.8s}
  .shared-sky-light:nth-child(4){animation-delay:-3s}
  .shared-sky-thread{animation:shared-sky-thread 10s ease-in-out infinite}
  @keyframes shared-sky-breathe{50%{transform:scale(1.018) rotate(.6deg);border-color:rgba(227,218,196,.62)}}
  @keyframes shared-sky-pulse{50%{opacity:.45;transform:scale(.72)}}
  @keyframes shared-sky-thread{50%{opacity:.4;transform:rotate(-14deg) scaleX(.92)}}
  @keyframes shared-sky-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media(max-width:760px){
  .shared-sky-doorway{grid-template-columns:1fr;min-height:0;gap:.35rem;padding:1.25rem 1.05rem 1.4rem}
  .shared-sky-visual{width:min(230px,66vw);margin-top:-.15rem;margin-bottom:-.1rem}
  .shared-sky-copy h2{font-size:clamp(2.1rem,11vw,3.2rem)}
  .shared-sky-actions{align-items:stretch}
  .shared-sky-primary{width:100%;text-align:center}
  .shared-sky-secondary{width:100%;padding:.42rem;text-align:center}
  .shared-sky-note{text-align:center}
  .shared-sky-earned-inner{grid-template-columns:1fr}
  .shared-sky-earned-visual{min-height:135px}
  .shared-sky-earned-visual .shared-sky-mirror{inset:2% 27%}
}
@media(max-width:390px){
  .shared-sky-doorway{border-radius:22px}
  .shared-sky-visual{width:205px}
  .shared-sky-copy h2{font-size:2.35rem}
  .shared-sky-facts span{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .shared-sky-doorway *,
  .shared-sky-earned *{animation:none!important;transition:none!important}
}
@media(prefers-contrast:more){
  .shared-sky-doorway,.shared-sky-earned{border-width:2px}
  .shared-sky-summary,.shared-sky-note,.shared-sky-earned p{color:#fff}
  .shared-sky-facts span{border-color:#fff;color:#fff}
}