/* =====================================================================
   DENDERA · The Observatory theme (navy, black, gold)
   ===================================================================== */
body.theme-obs {
  --page-bg: #05070F;
  --cross-color: #3FA37A;   /* the Oasis dot in the nav */
  --cross-veil: rgba(6, 12, 8, 0.5);
  color: var(--ink);
}
body.theme-obs .section { background: transparent; }
body.theme-obs .section.solid { background: var(--obs-bg); }
body.theme-obs .section.tinted { background: linear-gradient(180deg, rgba(7,11,24,0) 0%, rgba(7,11,24,0.7) 18%, rgba(7,11,24,0.7) 82%, rgba(7,11,24,0) 100%); }

/* hero veil for the dome video */
.theme-obs .hero .veil.bottom { background: linear-gradient(180deg, rgba(5,7,15,0.25) 0%, rgba(5,7,15,0.05) 35%, rgba(5,7,15,0.85) 85%, #05070F 100%); }

/* the sky canvas sits behind everything, faded so content reads */
.theme-obs .sky-fixed { opacity: 0.62; }
.theme-obs .sky-fixed::after { content: ''; position: absolute; inset: 0; background: rgba(5,7,15,0.55); }

/* signature service list numbers in a celestial style */
.theme-obs .feature .list .k::before { content: '✦ '; font-size: 10px; }

/* member card is navy */
.theme-obs .member-card .face { background: linear-gradient(135deg, #070B16 0%, #121B3A 55%, #070B16 100%); }

/* footer emblem watermark */
.theme-obs .footer::before { content: ''; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; opacity: 0.06; background: url('../assets/logo/emblem.svg') center / contain no-repeat; pointer-events: none; }

/* horizontal panel copy backgrounds */
.theme-obs .panel .copy { background: linear-gradient(180deg, #070B16, #0A1128); }
.theme-obs .panel .copy::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px circle at 20% 80%, rgba(27,42,94,0.45), transparent 60%); pointer-events: none; }

/* moods section palette guard */
.theme-obs .moods { background: #05070F; }

/* =====================================================================
   MEMBER GATE · the Observatory asks for a membership ID before it opens
   ===================================================================== */
html.locked body { overflow: hidden; }
html.locked .nav, html.locked main, html.locked .footer { visibility: hidden; }
html.locked .sky-fixed { opacity: 0.9; }
.gate { position: fixed; inset: 0; z-index: 70; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; color: var(--ink); background: #05070F; opacity: 1; transition: opacity 1.2s var(--ease-in-out), transform 1.4s var(--ease-in-out); }
.gate.open { opacity: 0; transform: scale(1.04); pointer-events: none; }
.gate .g-bg { position: fixed; inset: 0; z-index: 0; }
.gate .g-bg img, .gate .g-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.gate .g-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(5,7,15,0.15), rgba(5,7,15,0.85) 70%), linear-gradient(180deg, rgba(5,7,15,0.3), #05070F 92%); }
.gate .g-inner { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: clamp(40px, 8vh, 90px) var(--gutter) 60px; gap: 0; }
.gate .g-emblem { width: clamp(96px, 14vh, 150px); aspect-ratio: 1; }
.gate .g-emblem svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 16px rgba(var(--gold-rgb), 0.35)); animation: spin 160s linear infinite; }
.gate .g-emblem [class^="e-"] { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: draw 2.2s var(--ease-in-out) forwards; animation-delay: calc(var(--k, 0) * 0.07s + 0.2s); }
.gate .g-emblem circle[class^="e-"][fill="#C9A84C"], .gate .g-emblem .e-node, .gate .g-emblem .e-core, .gate .g-emblem .e-decan, .gate .g-emblem .e-supdot { stroke-dasharray: none; animation: pop 0.8s var(--ease-out) forwards; opacity: 0; animation-delay: 1.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }
.gate .g-word { margin-top: 22px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); }
.gate .g-word small { display: block; font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.44em; color: var(--ink-dim); margin-top: 8px; }
.gate h1 { margin-top: clamp(28px, 5vh, 48px); font-size: clamp(30px, 4.6vw, 62px); }
.gate .g-sub { margin-top: 14px; font-family: var(--font-serif); font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; color: var(--ink-dim); }
.gate-form { margin-top: clamp(28px, 4vh, 44px); width: min(100%, 440px); display: grid; gap: 14px; justify-items: center; }
.gate-form .field { width: 100%; }
.gate-form .field label { text-align: left; }
.gate-form input { text-align: center; font-family: var(--font-serif); font-size: 26px; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 0 14px; }
.gate-form input::placeholder { letter-spacing: 0.22em; font-size: 20px; text-transform: none; }
.gate-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.gate-form.checking .btn { opacity: 0.6; pointer-events: none; }
.gate-form.ok .btn { background: var(--gold-2); border-color: var(--gold-2); }
.gate-form.shake { animation: shake 0.5s var(--ease-out); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.gate-error { min-height: 20px; font-size: 13px; color: #E0A4A4; letter-spacing: 0.04em; }
.gate .g-or { margin-top: clamp(36px, 6vh, 64px); display: flex; align-items: center; gap: 18px; font-size: 10px; letter-spacing: 0.44em; text-transform: uppercase; color: var(--ink-faint); width: min(100%, 520px); }
.gate .g-or::before, .gate .g-or::after { content: ''; flex: 1; height: 1px; background: rgba(var(--gold-rgb), 0.25); }

/* teaser: a locked glimpse of the room + the circle */
.gate .g-teaser { width: min(100%, 1180px); margin-top: clamp(28px, 4vh, 44px); display: grid; gap: clamp(20px, 3vw, 40px); }
.gate .glimpses { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.gate .glimpse { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; border: 1px solid rgba(var(--gold-rgb), 0.25); cursor: pointer; }
.gate .glimpse img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(0.7) brightness(0.55); transform: scale(1.12); transition: filter 1.1s var(--ease-out), transform 1.4s var(--ease-out); }
.gate .glimpse .lock { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; align-content: center; font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); transition: opacity 0.6s; }
.gate .glimpse .lock i { width: 34px; height: 34px; border: 1px solid rgba(var(--gold-rgb), 0.7); border-radius: 50%; display: grid; place-items: center; }
.gate .glimpse .lock i::before { content: ''; width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 2px 2px 1px 1px; margin-top: 3px; box-shadow: 0 -4px 0 -1px transparent; }
.gate .glimpse .lock i::after { content: ''; position: absolute; width: 8px; height: 6px; border: 1px solid var(--gold); border-bottom: 0; border-radius: 4px 4px 0 0; transform: translateY(-6px); }
.gate .glimpse .cap { position: absolute; left: 16px; bottom: 12px; font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity 0.6s; }
.gate .glimpse.peek img { filter: blur(0) saturate(1) brightness(1); transform: scale(1.02); }
.gate .glimpse.peek .lock { opacity: 0; }
.gate .glimpse.peek .cap { opacity: 1; }
.gate .g-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.gate .g-tier { padding: clamp(18px, 2.4vw, 30px); border: 1px solid rgba(var(--gold-rgb), 0.25); background: rgba(255,255,255,0.02); text-align: left; display: grid; gap: 8px; transition: border-color 0.5s, background 0.5s; }
.gate .g-tier:hover { border-color: rgba(var(--gold-rgb), 0.7); background: rgba(var(--gold-rgb), 0.05); }
.gate .g-tier .t { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.gate .g-tier .s { font-family: var(--font-serif); font-size: 18px; color: var(--ink); }
.gate .g-tier .m { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.gate .g-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 32px; }
.gate .g-actions .alt { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid rgba(var(--gold-rgb), 0.4); padding-bottom: 4px; transition: color 0.4s; }
.gate .g-actions .alt:hover { color: var(--gold); }
.gate-apply { width: min(100%, 860px); justify-self: center; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1s var(--ease-in-out); text-align: left; }
.gate-apply > div { min-height: 0; overflow: hidden; }
.gate-apply.open { grid-template-rows: 1fr; }
.gate-apply .form-wrap { margin-top: 8px; padding: clamp(24px, 3.5vw, 48px); border: 1px solid rgba(var(--gold-rgb), 0.25); background: rgba(5,7,15,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gate-apply .head { display: grid; gap: 8px; margin-bottom: 26px; }
.gate-apply .head .serif { font-size: clamp(22px, 2.4vw, 30px); }
.gate .g-foot { margin-top: clamp(36px, 6vh, 64px); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.gate .g-foot a { color: var(--ink-dim); }
.gate .g-foot a:hover { color: var(--gold); }
@media (max-width: 800px) {
  .gate .glimpses { grid-template-columns: repeat(3, 1fr); }
  .gate .glimpse { aspect-ratio: 3 / 4; }
  .gate .g-tiers { grid-template-columns: 1fr; }
  .gate .glimpse .lock { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate .g-emblem [class^="e-"] { stroke-dashoffset: 0; animation: none; opacity: 1; }
}