/* ─────────────────────────────────────────────
   Landing page styles — OaxanaBrand
   Layout: top/bottom split — desktop and mobile
   ───────────────────────────────────────────── */

body.page-landing {
  background: #0A1628;
  overflow: hidden;
}

/* ─── Top/bottom split ─── */
.landing {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, #0A1628 50%, #F5F0E8 50%);
}

/* ─── Zones — full width, stacked ─── */
.landing__zone {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

/* Top — Catalyst (dark) */
.landing__zone--left {
  top: 0; bottom: auto;
  height: 50%;
}

/* Bottom — Human (cream) */
.landing__zone--right {
  bottom: 0; top: auto;
  height: 50%;
}

/* ─── Circular photo — centered on the horizontal seam ─── */
.landing__face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center 8%;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  display: block;
  animation: fadeIn 1.2s ease both;
}

/* ─── Labels ─── */
.zone__label {
  position: absolute;
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 10;
  animation: fadeIn 1s 0.8s ease both;
  opacity: 0;
}

/* THE CATALYST › — top-left of dark half */
.landing__zone--left .zone__label {
  top: 16px;
  left: 16px;
  color: #5B9BD5;
}

/* ‹ THE HUMAN — bottom-right of cream half */
.landing__zone--right .zone__label {
  bottom: 16px;
  right: 16px;
  color: #185FA5;
}

/* ─── Inline arrow — THE CATALYST › ─── */
.landing__zone--left .zone__label::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #5B9BD5;
  border-right: 2px solid #5B9BD5;
  transform: rotate(45deg);
  margin-left: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ─── Inline arrow — ‹ THE HUMAN ─── */
.landing__zone--right .zone__label::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #185FA5;
  border-right: 2px solid #185FA5;
  transform: rotate(225deg);
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.zone__arrow { display: none; }

/* ─── Word container ─── */
.zone__words {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ─── Marquee strips — centered in each half ─── */
.mq-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
}

.mq-track {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}

.mq-track--left {
  color: #5B9BD5;
  opacity: 0.70;
  animation: mqRight 40s linear infinite;
}

.mq-track--right {
  color: #185FA5;
  opacity: 0.70;
  animation: mqLeft 40s linear infinite;
}

/* ─── Animations ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mqLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mqRight { from { transform: translateX(-50%); } to { transform: translateX(0); }    }

/* ─── Desktop — spacing + brightness tweaks ─── */
@media (min-width: 768px) {

  /* Push bottom marquee further from the photo to match top spacing */
  .landing__zone--right .mq-wrap {
    top: 58%;
  }

  /* Brighten Catalyst label + marquee on dark background */
  .landing__zone--left .zone__label {
    color: #91C0E8;
  }
  .landing__zone--left .zone__label::after {
    border-top-color: #91C0E8;
    border-right-color: #91C0E8;
  }
  .mq-track--left {
    color: #91C0E8;
    opacity: 0.90;
  }

}

/* ─── Mobile — smaller photo + slightly smaller text ─── */
@media (max-width: 767px) {

  .landing__face {
    width: 58.5vw;
    height: 58.5vw;
    max-width: none;
    max-height: none;
  }

  .zone__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .mq-track           { font-size: 13px; }
  .mq-track--left     { animation: mqRight 35s linear infinite; }
  .mq-track--right    { animation: mqLeft  35s linear infinite; }

}