/* Madarek split entry. Shares the design language of css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #060709;
  --text: #f5f5f7;
  --text-2: #a1a1a8;
  --text-3: #6b6e7a;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --cyan: #00e5ff;
  --amber: #ffb340;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ---------- Layout ---------- */
.split { position: relative; display: flex; height: 100vh; height: 100svh; width: 100%; }

.panel {
  --accent: var(--cyan);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition: flex-grow 0.9s var(--ease);
}
.panel-b { --accent: var(--amber); }

.panel-photo, .panel-tint, .panel-grid { position: absolute; inset: 0; }
.panel-photo {
  z-index: -3;
  background-size: cover;
  background-position: center;
  opacity: 0.34;
  transform: scale(1.06);
  transition: opacity 0.9s var(--ease), transform 1.6s var(--ease);
}
.panel-a .panel-photo { background-image: url('../assets/images/entry-almutgadmah.jpg'); background-position: 60% 40%; }
.panel-b .panel-photo { background-image: url('../assets/images/entry-gulf.jpg'); background-position: 45% 50%; }

.panel-tint { z-index: -2; }
.panel-a .panel-tint {
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(0, 229, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.55) 0%, rgba(6, 7, 9, 0.72) 45%, rgba(6, 7, 9, 0.96) 100%);
}
.panel-b .panel-tint {
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(255, 179, 64, 0.13), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.62) 0%, rgba(6, 7, 9, 0.78) 45%, rgba(6, 7, 9, 0.97) 100%);
}
.panel-grid {
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 85%);
}

.panel-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 56px) clamp(28px, 5vw, 96px) clamp(64px, 7vh, 88px);
  transition: opacity 0.6s var(--ease);
}
.panel-b .panel-inner { align-items: flex-end; text-align: right; }

/* ---------- Brand marks ---------- */
.panel-logo {
  height: clamp(110px, 17vh, 180px);
  width: auto;
  align-self: flex-start;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}
.panel-wordmark {
  height: clamp(110px, 17vh, 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.wm-name { font-size: clamp(1.3rem, 1.7vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; }
.wm-sub { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }

/* ---------- Copy ---------- */
.panel-body { margin-top: auto; margin-bottom: auto; max-width: 560px; padding-top: 3vh; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.title {
  margin-top: 26px;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 700;
  line-height: 1.02;
  padding-bottom: 0.14em;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #ffffff 30%, #b9bcc6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.discipline {
  margin-top: 16px;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.lead {
  margin-top: 18px;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 48ch;
}
.panel-b .lead { margin-left: auto; }

.facts, .chips { list-style: none; display: flex; margin-top: 30px; }
.facts { gap: clamp(24px, 3vw, 48px); }
.facts li { display: flex; flex-direction: column; gap: 2px; }
.facts strong { font-size: clamp(1.5rem, 2vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.facts span { font-size: 0.78rem; color: var(--text-3); letter-spacing: 0.04em; }
.chips { gap: 8px; flex-wrap: wrap; }
.panel-b .chips { justify-content: flex-end; }
.chips li {
  font-size: 0.8rem;
  color: var(--text);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #fff;
  color: #060709;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cta svg { transition: transform 0.4s var(--ease); }
.cta-soon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.enquire {
  display: block;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.25s ease;
}
.enquire:hover, .enquire:focus-visible { color: var(--accent); }

.panel-foot {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Seam ---------- */
.seam {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 0;
  z-index: 5;
  pointer-events: none;
  transition: left 0.9s var(--ease);
}
.seam-line {
  position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.22) 18%, rgba(255,255,255,0.22) 82%, transparent);
}
.seam-badge {
  position: absolute; top: 50%; left: 0;
  width: 76px; height: 76px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.78);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.03);
}
.seam-badge img { width: 46px; height: 46px; object-fit: contain; }

/* ---------- Hover / focus choreography (pointer devices, wide screens) ---------- */
@media (hover: hover) and (min-width: 901px) {
  .split:has(.panel-a:hover) .panel-a, .split:has(.panel-a:focus-visible) .panel-a,
  .split:has(.panel-b:hover) .panel-b, .split:has(.panel-b:focus-within) .panel-b { flex-grow: 1.38; }

  .split:has(.panel-a:hover) .seam, .split:has(.panel-a:focus-visible) .seam { left: 57.98%; }
  .split:has(.panel-b:hover) .seam, .split:has(.panel-b:focus-within) .seam { left: 42.02%; }

  .panel:hover .panel-photo { opacity: 0.55; transform: scale(1); }
  .split:has(.panel-a:hover) .panel-b .panel-inner,
  .split:has(.panel-b:hover) .panel-a .panel-inner { opacity: 0.42; }
  .split:has(.panel-a:hover) .panel-b .panel-photo,
  .split:has(.panel-b:hover) .panel-a .panel-photo { opacity: 0.16; }

  .panel-a:hover .cta { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(0, 229, 255, 0.25); }
  .panel-a:hover .cta svg { transform: translateX(4px); }
}
.panel-a:focus-visible { outline: 2px solid var(--cyan); outline-offset: -6px; }

/* ---------- Footer strip ---------- */
.entry-foot {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  background: linear-gradient(180deg, transparent, rgba(6, 7, 9, 0.9));
  pointer-events: none;
}
.entry-foot a { color: var(--text-2); text-decoration: none; pointer-events: auto; }
.entry-foot a:hover { color: var(--text); }
.entry-foot .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

/* ---------- Entrance (CSS only, so the page is never blank) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.panel-logo, .panel-wordmark, .eyebrow, .title, .discipline, .lead, .facts, .chips, .cta, .enquire, .panel-foot {
  animation: rise 0.9s var(--ease) both;
}
.panel-logo, .panel-wordmark { animation-delay: 0.05s; }
.eyebrow { animation-delay: 0.15s; }
.title { animation-delay: 0.22s; }
.discipline { animation-delay: 0.3s; }
.lead { animation-delay: 0.36s; }
.facts, .chips { animation-delay: 0.44s; }
.cta { animation-delay: 0.52s; }
.enquire, .panel-foot { animation-delay: 0.6s; }
.seam-line { transform-origin: top; animation: draw 1.1s var(--ease) both; }
.seam-badge { animation: fade 0.8s ease 0.4s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Tablet / phone: stack the two companies ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .split { flex-direction: column; height: auto; min-height: 100svh; }
  .panel { flex: none; min-height: 100svh; }
  .panel-b .panel-inner { align-items: flex-start; text-align: left; }
  .panel-b .lead { margin-left: 0; }
  .panel-b .chips { justify-content: flex-start; }
  .panel-inner { padding: 28px 24px 72px; }
  .panel-logo, .panel-wordmark { height: 104px; }
  .seam { display: none; }
  .panel-b { border-top: 1px solid var(--line); }
  .entry-foot { position: static; flex-wrap: wrap; gap: 10px; background: var(--bg); padding: 20px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .title { font-size: clamp(2.2rem, 4vw, 3.6rem); margin-top: 18px; }
  .facts, .chips { margin-top: 20px; }
  .cta { margin-top: 24px; padding: 12px 22px; }
  .panel-logo, .panel-wordmark { height: 104px; }
}

/* Left photo is a dusk scene, so it needs more light than the right one */
.panel-a .panel-photo { opacity: 0.62; }
.panel-a .panel-tint {
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(0, 229, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.30) 0%, rgba(6, 7, 9, 0.58) 45%, rgba(6, 7, 9, 0.95) 100%);
}
@media (hover: hover) and (min-width: 901px) {
  .panel-a:hover .panel-photo { opacity: 0.85; }
  .split:has(.panel-b:hover) .panel-a .panel-photo { opacity: 0.26; }
}

@media (max-width: 900px) {
  .panel { min-height: 0; }
  .panel-inner { padding: 28px 24px 40px; }
  .panel-body { padding-top: 28px; margin: 0; }
  .panel-foot { margin-top: 36px; line-height: 1.8; }
  .eyebrow { font-size: 0.64rem; letter-spacing: 0.12em; }
}

/* ---------- Enter transition ---------- */
.enter-veil {
  position: fixed; inset: 0;
  z-index: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.panel-inner { z-index: 1; }

.split.entering { pointer-events: none; }
.split.entering .panel-a { flex-grow: 1; z-index: 2; }
.split.entering .panel-b { flex-grow: 0.0001; }
.split.entering .panel-b .panel-inner { min-width: 50vw; opacity: 0; transition: opacity 0.3s ease; }
.split.entering .seam { left: 100%; opacity: 0; transition: left 0.9s var(--ease), opacity 0.5s ease; }

.split.entering .panel-a .panel-photo {
  opacity: 1;
  transform: scale(1.14);
  transition: opacity 0.9s var(--ease), transform 2.2s cubic-bezier(0.3, 0, 0.2, 1);
}
.split.entering .panel-a .panel-body,
.split.entering .panel-a .panel-foot {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 0.45s ease, transform 0.7s var(--ease);
}
.split.entering .panel-a .panel-body *,
.split.entering .panel-a .panel-foot { animation: none; }

.split.entering .panel-logo {
  animation: none;
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.2, 1);
  will-change: transform;
}
.split.veiled .enter-veil { opacity: 1; }
body.entering .entry-foot { opacity: 0; transition: opacity 0.35s ease; }

@media (max-width: 900px) {
  .split.entering .panel-b { flex-grow: 0; }
  .split.entering .panel-b .panel-inner { min-width: 0; }
}

/* ---- Primary call to action: label + arrow in its own circle ---- */
.cta:not(.cta-soon) { padding: 7px 7px 7px 26px; gap: 16px; font-size: 1rem; letter-spacing: -0.005em; }
.cta-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #060709; color: #fff;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.cta-icon svg { transition: transform 0.45s var(--ease); }
@media (hover: hover) and (min-width: 901px) {
  .panel-a:hover .cta-icon { background: var(--cyan); color: #060709; }
  .panel-a:hover .cta-icon svg { transform: translateX(3px); }
}

/* ==========================================================================
   Madarek Gulf side (added 2026-09-22, when the Gulf site went live).
   Everything above is the Almutgadmah side and the shared frame, left as it was.
   ========================================================================== */
:root { --green: #3de07a; }                                  /* the Gulf accent, the same electric green as its site */
.panel-b { --accent: var(--green); }
.panel-b .panel-tint {
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(61, 224, 122, 0.11), transparent 60%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.62) 0%, rgba(6, 7, 9, 0.78) 45%, rgba(6, 7, 9, 0.97) 100%);
}

/* The Gulf logo is a wide wordmark (4.3:1), so it is sized by width and sits centred in the same box as the left logo */
.gulf-logo { width: clamp(210px, 19vw, 320px); height: auto; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6)); }
.panel-b .panel-wordmark { justify-content: center; flex-shrink: 0; }   /* the box holds its height like the left logo does */

/* hover: the Gulf side answers the same way the left side does, in its own colour */
@media (hover: hover) and (min-width: 901px) {
  .panel-b:hover .cta { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(61, 224, 122, 0.25); }
  .panel-b:hover .cta svg { transform: translateX(4px); }
  .panel-b:hover .cta-icon { background: var(--green); color: #060709; }
  .panel-b:hover .cta-icon svg { transform: translateX(3px); }
}
.panel-b:focus-visible { outline: 2px solid var(--green); outline-offset: -6px; }

/* ---- Enter transition, mirrored: the Gulf panel sweeps open to the left, the parent folds away ---- */
.split.entering-b .panel-b { flex-grow: 1; z-index: 2; }
.split.entering-b .panel-a { flex-grow: 0.0001; }
.split.entering-b .panel-a .panel-inner { min-width: 50vw; opacity: 0; transition: opacity 0.3s ease; }
.split.entering-b .seam { left: 0; opacity: 0; transition: left 0.9s var(--ease), opacity 0.5s ease; }
.split.entering-b .panel-b .panel-photo {
  opacity: 1;
  transform: scale(1.14);
  transition: opacity 0.9s var(--ease), transform 2.2s cubic-bezier(0.3, 0, 0.2, 1);
}
.split.entering-b .panel-b .panel-body,
.split.entering-b .panel-b .panel-foot {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 0.45s ease, transform 0.7s var(--ease);
}
.split.entering-b .panel-b .panel-body *,
.split.entering-b .panel-b .panel-foot,
.split.entering-b .panel-wordmark { animation: none; }
/* The logo is pinned to the viewport for the glide, because the panel's right-aligned content would otherwise
   drift as the panel widens. It travels to the exact spot the Gulf site's header logo occupies. */
.split.entering-b .gulf-logo {
  position: fixed; margin: 0;
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.2, 1);
  will-change: transform;
}
@media (max-width: 900px) {
  .split.entering-b .panel-a { flex-grow: 0; }
  .split.entering-b .panel-a .panel-inner { min-width: 0; }
}

/* Laptop heights: the three Gulf chips wrap to two rows, so the Gulf column runs out of air before the left one does.
   Spacing is tightened a little here; type sizes stay the same on both sides. */
@media (min-width: 901px) and (max-height: 880px) {
  .panel-b .chips { margin-top: 22px; }
  .panel-b .chips li { padding: 6px 12px; }
  .panel-b .cta { margin-top: 28px; }
}

/* ==========================================================================
   Cinematic photographs, readable text, the seam drifts with the cursor (2026-09-22, replaced the emblem-and-dim-photo entrance)
   ========================================================================== */
:root { --seam: 50%; --drift: 0px; --text-2: #c2c5ce; }

/* the photographs are shown at full strength; a dark band sits only under the words (left on the left, right on the right) */
.panel-a .panel-photo { background-image: url('../assets/images/entry-left.jpg'); background-position: 50% 62%; opacity: 1; transform: translateX(var(--drift)) scale(1.04); transition: transform 1.2s var(--ease), filter 0.8s ease, opacity 0.9s var(--ease); }
.panel-b .panel-photo { background-image: url('../assets/images/entry-right.jpg'); background-position: 50% 45%; opacity: 1; transform: translateX(calc(var(--drift) * -1)) scale(1.04); transition: transform 1.2s var(--ease), filter 0.8s ease, opacity 0.9s var(--ease); }
.panel-a .panel-tint {
  background:
    linear-gradient(90deg, rgba(6, 7, 9, 0.97) 0%, rgba(6, 7, 9, 0.93) 30%, rgba(6, 7, 9, 0.8) 48%, rgba(6, 7, 9, 0.42) 70%, rgba(6, 7, 9, 0.1) 100%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.5) 0%, rgba(6, 7, 9, 0.05) 26%, rgba(6, 7, 9, 0.05) 58%, rgba(6, 7, 9, 0.92) 100%);
}
.panel-b .panel-tint {
  background:
    linear-gradient(270deg, rgba(6, 7, 9, 0.97) 0%, rgba(6, 7, 9, 0.93) 30%, rgba(6, 7, 9, 0.8) 48%, rgba(6, 7, 9, 0.42) 70%, rgba(6, 7, 9, 0.1) 100%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.5) 0%, rgba(6, 7, 9, 0.05) 26%, rgba(6, 7, 9, 0.05) 58%, rgba(6, 7, 9, 0.92) 100%);
}
.panel-grid { opacity: 0.5; }
.lead { color: var(--text-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.title { text-shadow: none; }

/* the seam and the halves follow the cursor: the position comes from js/entry-drift.js */
.panel-a { flex: 0 0 var(--seam); }
.panel-b { flex: 1 1 0; }
.seam { left: var(--seam); transition: left 0.7s var(--ease); }
@media (hover: hover) and (min-width: 901px) {
  .split:has(.panel-a:hover) .panel-a, .split:has(.panel-a:focus-visible) .panel-a { flex-grow: 0; }
  .split:has(.panel-b:hover) .panel-b, .split:has(.panel-b:focus-within) .panel-b { flex-grow: 1; }
  .split:has(.panel-a:hover) .seam, .split:has(.panel-a:focus-visible) .seam,
  .split:has(.panel-b:hover) .seam, .split:has(.panel-b:focus-within) .seam { left: var(--seam); }
  .panel:hover .panel-photo, .panel-a:hover .panel-photo { opacity: 1; filter: brightness(1.06); }
  .split:has(.panel-a:hover) .panel-b .panel-photo, .split:has(.panel-b:hover) .panel-a .panel-photo { opacity: 0.55; }
  .split:has(.panel-a:hover) .panel-b .panel-inner, .split:has(.panel-b:hover) .panel-a .panel-inner { opacity: 0.5; }
}
.split.entering .panel-a { flex: 1 1 100%; }
.split.entering-b .panel-a { flex: 0 0 0; }
.split.entering .panel-a .panel-photo, .split.entering-b .panel-b .panel-photo { opacity: 1; filter: brightness(1.12); }

/* the centre mark: a neutral instruction, not one company's emblem */
.seam-badge { width: 64px; height: 64px; color: var(--text); background: rgba(8, 10, 14, 0.55); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.seam-badge svg { display: block; }
.seam-label { position: absolute; top: calc(50% + 48px); left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; font-family: var(--mono); font-size: 0.64rem; line-height: 1.6; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); animation: fade 0.8s ease 0.5s both; }
.split.lean-a .seam-badge { border-color: rgba(0, 229, 255, 0.5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(0, 229, 255, 0.06); }
.split.lean-b .seam-badge { border-color: rgba(61, 224, 122, 0.5); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(61, 224, 122, 0.06); }
.split.entering .seam, .split.entering-b .seam { opacity: 0; }

/* the fact labels say what the number is */
.facts span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

@media (max-width: 900px) {
  .panel-a, .panel-b { flex: none; }
  .panel-a .panel-tint, .panel-b .panel-tint { background: linear-gradient(180deg, rgba(6, 7, 9, 0.25) 0%, rgba(6, 7, 9, 0.45) 40%, rgba(6, 7, 9, 0.94) 100%); }
  .split.entering .panel-b, .split.entering-b .panel-a { flex: 0 0 0; }
}

/* Entering: the photograph holds its own half and dims, instead of being stretched and zoomed across the whole screen
   (that magnified the picture about three times and looked blurred). The other side folds to black, the logo glides, the veil closes. */
.split.entering .panel-a .panel-photo, .split.entering .panel-a .panel-tint { right: auto; left: 0; width: 50vw; }
.split.entering-b .panel-b .panel-photo, .split.entering-b .panel-b .panel-tint { left: auto; right: 0; width: 50vw; }
.split.entering .panel-a .panel-photo, .split.entering-b .panel-b .panel-photo {
  opacity: 1; transform: scale(1.04); filter: brightness(0.62);
  transition: filter 0.9s ease, transform 0.9s var(--ease);
}
@media (max-width: 900px) {
  .split.entering .panel-a .panel-photo, .split.entering .panel-a .panel-tint,
  .split.entering-b .panel-b .panel-photo, .split.entering-b .panel-b .panel-tint { width: auto; left: 0; right: 0; }
}
/* the photograph's inner edge melts into the dark rather than ending in a hard line */
.split.entering .panel-a .panel-photo, .split.entering .panel-a .panel-tint {
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.split.entering-b .panel-b .panel-photo, .split.entering-b .panel-b .panel-tint {
  -webkit-mask-image: linear-gradient(270deg, #000 72%, transparent 100%); mask-image: linear-gradient(270deg, #000 72%, transparent 100%);
}