/* ============================================================
   BEKER.WORLD — Homepage (split screen)
   ============================================================ */

body.section-home {
  overflow: hidden;
  height: 100vh;
}

/* ----------------------------------------
   Language switcher — home (overlay)
---------------------------------------- */
.lang-switcher--home {
  position: fixed;
  top: 1.6rem;
  right: 2rem;
  z-index: 200;
  color: #6B5A4E;
}

/* ----------------------------------------
   Split screen
---------------------------------------- */
.split-screen {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* ----------------------------------------
   Panels
---------------------------------------- */
.panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.split-screen:has(.panel--ms:hover) .panel--ms { flex: 1.3; }
.split-screen:has(.panel--ms:hover) .panel--l  { flex: 0.75; }
.split-screen:has(.panel--l:hover)  .panel--l  { flex: 1.3; }
.split-screen:has(.panel--l:hover)  .panel--ms { flex: 0.75; }

.panel--ms {
  background-color: #ECF1F7;
  color: var(--ms-primary);
}

.panel--l {
  background-color: #F5EDE2;
  color: var(--l-primary);
}

/* ----------------------------------------
   Panel content
---------------------------------------- */
.panel__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  gap: 0.6rem;
  user-select: none;
}

.panel__subtitle {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.45;
}

.panel__name {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}

.panel__enter {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.panel:hover .panel__enter {
  opacity: 0.55;
  transform: translateY(0);
}

/* ----------------------------------------
   Divider + "Beker"
   Stays fixed at viewport centre — intentional:
   as a panel expands, the name gently drifts
   toward the other side, a subtle metaphor.
---------------------------------------- */
.split-divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

/* The 1px line */
.split-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(100, 80, 60, 0.18) 15%,
    rgba(100, 80, 60, 0.18) 85%,
    transparent 100%
  );
}

.split-divider__name {
  font-family: var(--font-serif);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #7A6255;
  opacity: 0.5;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 0.5rem 0;
  white-space: nowrap;
  background-color: transparent;
}

/* ----------------------------------------
   Responsive — stack vertically on mobile
---------------------------------------- */
@media (max-width: 640px) {
  body.section-home {
    overflow: auto;
    height: auto;
  }

  .split-screen {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .panel {
    flex: none;
    height: 50vh;
    min-height: 260px;
  }

  .split-screen:has(.panel--ms:hover) .panel--ms,
  .split-screen:has(.panel--ms:hover) .panel--l,
  .split-screen:has(.panel--l:hover)  .panel--l,
  .split-screen:has(.panel--l:hover)  .panel--ms {
    flex: none;
  }

  .split-divider {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
  }

  .split-divider::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
  }

  .split-divider__name {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 0.35em;
    padding: 0 0.5rem;
  }

  .lang-switcher--home {
    top: 1rem;
    right: 1rem;
  }
}