/* ═══════════════════════════════════════════════════════════
   JML — Portal (split-screen landing)
   ═══════════════════════════════════════════════════════════ */

.portal-body { background: #000; color: var(--cream); height: 100dvh; overflow: hidden; }

/* Centre brand */
.portal-brand {
  position: fixed; top: clamp(20px, 4vh, 40px); left: 50%; translate: -50% 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; pointer-events: none;
}
.portal-logo {
  width: clamp(58px, 8vw, 84px);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.5));
}
.portal-tagline {
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
  font-size: clamp(13px, 1.6vw, 17px); color: var(--cream-deep);
  letter-spacing: .02em;
}

.portal-hint {
  position: fixed; bottom: clamp(64px, 11vh, 96px); left: 50%; translate: -50% 0; z-index: 30;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: rgba(232,221,199,.62);
  pointer-events: none; animation: hintFloat 2.6s ease-in-out infinite;
}
@keyframes hintFloat { 0%,100% { transform: translate(-50%, 0); opacity: .62; } 50% { transform: translate(-50%, -5px); opacity: 1; } }

/* Split layout */
.portal { display: flex; height: 100dvh; width: 100%; }

.portal-half {
  position: relative; flex: 1 1 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: flex-basis .7s var(--ease-out);
  isolation: isolate;
}
.half-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.08);
  transition: transform 1.1s var(--ease-out), filter .7s;
}
.half-overlay { position: absolute; inset: 0; z-index: -1; transition: background-color .7s; }
.half-photo  .half-bg      { filter: grayscale(20%) brightness(.82); }
.half-photo  .half-overlay { background: linear-gradient(180deg, rgba(18,16,13,.28), rgba(18,16,13,.62)); }
.half-studio .half-bg      { filter: grayscale(75%) brightness(.5) contrast(1.05); }
.half-studio .half-overlay { background: linear-gradient(180deg, rgba(6,5,4,.55), rgba(6,5,4,.82)); }

/* content */
.half-content {
  position: relative; z-index: 2; text-align: center;
  padding: 0 clamp(18px, 4vw, 40px); max-width: 540px;
  transform: translateY(0);
}
.half-kicker {
  display: inline-block; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 14px;
}
.half-studio .half-kicker { color: #C9A876; }
.half-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 70px); line-height: .96; letter-spacing: -.01em;
  color: #F3EBDB; text-shadow: 0 4px 30px rgba(0,0,0,.5);
  white-space: nowrap;
}
.half-title .ch { display: inline-block; }
.half-desc {
  margin: 16px auto 26px; max-width: 34ch;
  font-size: clamp(13.5px, 1.3vw, 16px); color: rgba(243,235,219,.82); line-height: 1.6;
}
.half-enter {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: #F3EBDB; padding: 12px 26px; border: 1px solid rgba(243,235,219,.6); border-radius: 999px;
  transition: background-color .35s, color .35s, border-color .35s;
}
.enter-arrow { transition: transform .35s var(--ease-out); }

/* divider line */
.portal-half + .portal-half::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  width: 1px; background: rgba(232,221,199,.22);
}

/* REC badge on studio */
.rec-badge {
  position: absolute; top: clamp(80px, 13vh, 120px); right: clamp(20px, 4vw, 46px); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; color: #F3EBDB;
}
.rec-badge i { width: 9px; height: 9px; border-radius: 50%; background: #E4483B; animation: recBlink 1.4s steps(1) infinite; }
@keyframes recBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: .15; } }

/* hover / focus states (desktop) */
@media (hover: hover) and (min-width: 861px) {
  .portal:hover .portal-half { flex-basis: 42%; }
  .portal .portal-half:hover { flex-basis: 58%; }
  .portal-half:hover .half-bg { transform: scale(1.02); }
  .half-photo:hover  .half-bg { filter: grayscale(0%) brightness(.92); }
  .half-studio:hover .half-bg { filter: grayscale(30%) brightness(.62); }
  .portal-half:hover .half-overlay { background: linear-gradient(180deg, rgba(10,8,6,.2), rgba(10,8,6,.55)); }
  .portal-half:hover .half-title { letter-spacing: .02em; }
  .portal-half:hover .half-enter { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .portal-half:hover .enter-arrow { transform: translateX(5px); }
}

/* Footer */
.portal-foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px clamp(16px, 4vw, 40px);
  font-size: 12px; color: rgba(232,221,199,.6);
  background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  pointer-events: none;
}
.portal-foot a { pointer-events: auto; transition: color .3s; }
.portal-foot a:hover { color: var(--cream); }
.foot-wa { color: var(--wa) !important; }

/* Mobile: stack */
@media (max-width: 860px) {
  .portal-body { height: auto; overflow: auto; }
  .portal { flex-direction: column; height: auto; padding-top: 128px; }
  .portal-half { flex: none; min-height: 46vh; }
  .portal-half + .portal-half::before { width: 100%; height: 1px; top: 0; bottom: auto; }
  .portal-brand { position: absolute; }
  .portal-hint { display: none; }
  .rec-badge { top: 18px; }
  .portal-foot { position: static; flex-direction: column; gap: 6px; text-align: center; background: #000; padding-bottom: 24px; }
}
@media (max-width: 480px) {
  .portal-foot { font-size: 11px; }
}