/* =====================================================================
   DENDERA · landing page (split Observatory / Oasis)
   ===================================================================== */
body.landing { background: #03040A; overflow: hidden; height: 100vh; height: 100svh; }
body.landing.ready { overflow: hidden; }

.split { position: fixed; inset: 0; display: flex; flex-direction: column; }
.half {
  position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; display: block; color: var(--ink);
  transition: flex-grow 1.1s var(--ease-in-out);
  will-change: flex-grow;
}
.split.hover-obs .half-obs { flex-grow: 1.55; }
.split.hover-obs .half-oasis { flex-grow: 0.75; }
.split.hover-oasis .half-oasis { flex-grow: 1.55; }
.split.hover-oasis .half-obs { flex-grow: 0.75; }

.half .bg { position: absolute; inset: -6%; width: 112%; height: 112%; }
.half .bg video, .half .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.half .bg img { z-index: 0; }
.half .bg video { z-index: 1; opacity: 0; transition: opacity 1.6s ease; }
.half .bg video.playing { opacity: 1; }
.half .bg { transition: filter 1.2s var(--ease-out), transform 0.2s linear; }
.half canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.half .shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity 1.1s var(--ease-out); }
.half-obs .shade { background: linear-gradient(180deg, rgba(3,4,10,0.72) 0%, rgba(3,4,10,0.15) 38%, rgba(3,4,10,0.45) 100%); }
.half-oasis .shade { background: linear-gradient(0deg, rgba(4,8,6,0.72) 0%, rgba(4,8,6,0.12) 45%, rgba(4,8,6,0.45) 100%); }
.split.hover-obs .half-oasis .bg, .split.hover-oasis .half-obs .bg { filter: brightness(0.55) saturate(0.7); }
.split.hover-obs .half-obs .bg, .split.hover-oasis .half-oasis .bg { filter: brightness(1.08); }

/* content inside each half */
.half .content {
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); display: grid; gap: 14px;
  max-width: min(900px, 72vw); pointer-events: none;
}
.half-obs .content { bottom: clamp(28px, 6vh, 64px); }
.half-oasis .content { top: clamp(28px, 6vh, 64px); }
.half .content .eyebrow { opacity: 0.85; }
.half .content .title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(28px, 4.6vw, 68px); line-height: 1; }
.half .content .title .c { transition-delay: calc(var(--i) * 0.02s); }
.half .content .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1s var(--ease-in-out); }
.half .content .more > div { min-height: 0; overflow: hidden; display: grid; gap: 14px; }
.half.is-hover .content .more, .split.touch .content .more { grid-template-rows: 1fr; }
.half .content .desc { font-family: var(--font-serif); font-size: clamp(16px, 1.5vw, 22px); font-weight: 300; max-width: 46ch; color: rgba(237,233,224,0.78); opacity: 0; transform: translateY(12px); transition: opacity 0.9s var(--ease-out) 0.2s, transform 0.9s var(--ease-out) 0.2s; }
.half .content .enter { display: inline-flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-top: 6px; margin-bottom: 4px; opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--ease-out) 0.3s, transform 0.9s var(--ease-out) 0.3s; }
.half .content .enter .arrow { width: 40px; height: 1px; background: currentColor; position: relative; }
.half .content .enter .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.half.is-hover .content .desc, .half.is-hover .content .enter, .split.touch .content .desc, .split.touch .content .enter { opacity: 1; transform: none; }
.half .corner { position: absolute; z-index: 4; right: var(--gutter); font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink-faint); writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; }
.half-obs .corner { bottom: clamp(28px, 6vh, 64px); }
.half-oasis .corner { top: clamp(28px, 6vh, 64px); }

/* divider */
.divider { position: relative; z-index: 6; height: 0; flex: 0 0 0; pointer-events: none; overflow: visible; }
.divider .line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.9) 30%, rgba(var(--gold-rgb), 0.9) 70%, transparent); transform: scaleX(0); transition: transform 1.6s var(--ease-in-out) 0.6s; }
body.ready .divider .line { transform: scaleX(1); }
.divider .medal { position: absolute; left: 50%; top: 0; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #0B0E17 0%, #0B0E17 60%, rgba(11,14,23,0) 72%); display: grid; place-items: center; opacity: 0; transition: opacity 1s ease 1.2s; }
body.ready .divider .medal { opacity: 1; }
.divider .medal svg { width: 58px; height: 58px; animation: spin 90s linear infinite; }
.divider .medal svg * { stroke-width: 2.2px; }
.split.hover-obs .divider .medal svg, .split.hover-oasis .divider .medal svg { animation-duration: 24s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* brand at the very top middle */
.brand-top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; padding-top: clamp(18px, 3vh, 34px); pointer-events: none; }
.brand-top .emblem-wrap { width: clamp(88px, 12vh, 132px); aspect-ratio: 1; }
.brand-top .emblem-wrap svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.35)); }
.brand-top .word { margin-top: clamp(8px, 1.4vh, 16px); width: clamp(150px, 22vh, 230px); opacity: 0; transform: translateY(8px); transition: opacity 1.2s var(--ease-out) 1.5s, transform 1.2s var(--ease-out) 1.5s; }
.brand-top .word svg { width: 100%; height: auto; }
.brand-top .tag { margin-top: 10px; font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(237,233,224,0.6); opacity: 0; transition: opacity 1.2s ease 2s; }
body.ready .brand-top .word, body.ready .brand-top .tag { opacity: 1; transform: none; }
.brand-top .glow { position: absolute; top: -120px; left: 50%; width: 520px; height: 420px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(3,4,10,0.85) 0%, rgba(3,4,10,0.35) 45%, transparent 70%); z-index: -1; }

/* stroke drawing of the emblem on load */
.brand-top .emblem-wrap [class^="e-"] { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: draw 2.4s var(--ease-in-out) forwards; animation-delay: calc(var(--k, 0) * 0.08s + 0.2s); }
.brand-top .emblem-wrap circle[class^="e-"][fill="#C9A84C"], .brand-top .emblem-wrap .e-node, .brand-top .emblem-wrap .e-core, .brand-top .emblem-wrap .e-decan, .brand-top .emblem-wrap .e-supdot { stroke-dasharray: none; animation: pop 0.8s var(--ease-out) forwards; opacity: 0; animation-delay: 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }

/* bottom bar */
.landing-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--gutter) 18px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(237,233,224,0.55); pointer-events: none; opacity: 0; transition: opacity 1.2s ease 2.2s; }
body.ready .landing-foot { opacity: 1; }
.landing-foot a { pointer-events: auto; color: var(--gold); }
.landing-foot .l, .landing-foot .r { display: flex; gap: 26px; align-items: center; }
.landing-foot .status { display: inline-flex; align-items: center; gap: 10px; }
.landing-foot .status i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* intro curtain */
.intro { position: fixed; inset: 0; z-index: 80; background: #03040A; pointer-events: none; transition: opacity 1.4s ease 0.9s; }
body.ready .intro { opacity: 0; }

/* entrance of the halves */
.half-obs { transform: translateY(-6%); opacity: 0; }
.half-oasis { transform: translateY(6%); opacity: 0; }
body.ready .half-obs, body.ready .half-oasis { transform: none; opacity: 1; transition: transform 1.8s var(--ease-out) 0.5s, opacity 1.6s ease 0.5s, flex-grow 1.1s var(--ease-in-out), filter 1.2s; }

/* leaving animation: clicked half swells */
.split.leaving .half.chosen { flex-grow: 6 !important; }
.split.leaving .half:not(.chosen) { flex-grow: 0.0001 !important; }
.split.leaving .half.chosen .content, .split.leaving .half .corner { opacity: 0; transition: opacity 0.5s; }
body.leaving .brand-top, body.leaving .landing-foot, body.leaving .divider { opacity: 0; transition: opacity 0.6s; }

/* touch / small screens */
@media (max-width: 900px), (hover: none) {
  .split { flex-direction: column; }
  .half .content { max-width: none; left: 22px; right: 22px; }
  .half .corner { display: none; }
  .brand-top .glow { width: 360px; }
  .landing-foot { justify-content: center; }
  .landing-foot .l { display: none; }
}
@media (max-height: 560px) {
  .brand-top .word, .brand-top .tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .half-obs, .half-oasis { transform: none; opacity: 1; }
  .brand-top .emblem-wrap [class^="e-"] { stroke-dashoffset: 0; animation: none; opacity: 1; }
  .divider .medal svg { animation: none; }
}

/* dim the half that is not being explored */
.half .content, .half .corner { transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-in-out); transform-origin: left bottom; }
.half-oasis .content { transform-origin: left top; }
.split.hover-oasis .half-obs .content { opacity: 0; transform: scale(0.85) translateY(24px); }
.split.hover-obs .half-oasis .content { opacity: 0.22; transform: scale(0.85) translateY(-16px); }
.split.hover-oasis .half-obs .corner, .split.hover-obs .half-oasis .corner { opacity: 0; }
@media (max-width: 600px) {
  .half .content .eyebrow { font-size: 9px; letter-spacing: 0.28em; }
  .landing-foot { font-size: 9px; letter-spacing: 0.22em; padding-bottom: 14px; }
  .landing-foot .r { gap: 16px; }
}