/* Split-screen chooser landing page: a Y-divider from a shared vertex
   point (--vx, --vy) splits the screen into 3 wedges — Dusheli on top,
   T Designs bottom-left, Personaliza2 bottom-right. All three panels are
   full-container, absolutely positioned, and clipped to their own wedge,
   so they always tile the screen with no gaps regardless of vertex
   position. Hovering a wedge shifts the vertex to grow it and shrink the
   other two. --vx/--vy are registered below so the browser can actually
   interpolate them frame-by-frame (glide) instead of snapping straight
   to the new value — plain custom properties aren't animatable. */

@property --vx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --vy {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 55%;
}

.split-body {
  margin: 0;
  background: var(--bg);
  overflow: hidden;
}

.split-screen {
  --vx: 50%;
  --vy: 55%;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  transition: --vx 0.6s ease, --vy 0.6s ease;
}

.split-screen:has(.split-Dusheli:hover),
.split-screen:has(.split-Dusheli:focus-visible) {
  --vx: 50%;
  --vy: 78%;
}
.split-screen:has(.split-tdesigns:hover),
.split-screen:has(.split-tdesigns:focus-visible) {
  --vy: 42%;
  --vx: 62%;
}
.split-screen:has(.split-personaliza2:hover),
.split-screen:has(.split-personaliza2:focus-visible) {
  --vy: 42%;
  --vx: 38%;
}

.account-icon-link {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 6;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.account-icon-link:hover { color: var(--cyan); border-color: var(--cyan); }
.account-icon-link svg { display: block; width: 19px; height: 19px; margin: 0 auto; }

@media (max-width: 560px) {
  .account-icon-link { top: 12px; right: 14px; width: 34px; height: 34px; }
  .account-icon-link svg { width: 17px; height: 17px; }
}

.split-heading {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}

.split-panel {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: filter 0.4s ease;
}

/* Any wedge being hovered/focused dims the other two. */
.split-screen:has(.split-panel:hover) .split-panel:not(:hover),
.split-screen:has(.split-panel:focus-visible) .split-panel:not(:focus-visible) {
  filter: grayscale(1) brightness(0.5);
}

.split-Dusheli {
  clip-path: polygon(0% 0%, 100% 0%, var(--vx) var(--vy));
  background: radial-gradient(circle at 50% 15%, #241708 0%, #030405 70%);
  align-items: flex-start;
  /* Tied to --vy (same variable driving the clip-path) so the content
     tracks the wedge as it grows on hover — T Designs/Personaliza2 do
     the same thing via padding-right/padding-left keyed to --vx. */
  padding-top: calc(var(--vy) * 0.13);
}

.split-tdesigns {
  clip-path: polygon(0% 0%, var(--vx) var(--vy), var(--vx) 100%, 0% 100%);
  background: radial-gradient(circle at 25% 75%, #0c1b20 0%, #030405 70%);
  align-items: flex-end;
  padding-bottom: 9%;
  padding-right: calc(100% - var(--vx));
}

.split-personaliza2 {
  clip-path: polygon(100% 0%, var(--vx) var(--vy), var(--vx) 100%, 100% 100%);
  background: radial-gradient(circle at 75% 75%, #0a1f16 0%, #030405 70%);
  align-items: flex-end;
  padding-bottom: 9%;
  padding-left: var(--vx);
}

.split-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.split-panel:hover::before,
.split-panel:focus-visible::before {
  opacity: 1;
}

.split-content {
  position: relative;
  padding: 0 24px;
  max-width: 340px;
}

.split-logo {
  width: 190px;
  max-width: 40vw;
  margin: 0 auto 18px;
}

/* The cyan glow only reads correctly on T Designs' hollow-outline mark —
   on a solid/filled logo (Personaliza2, and Dusheli once its real logo
   goes in) drop-shadow traces the whole opaque shape and looks like a
   glowing box, so it's scoped here instead of applied to .split-logo
   generally.

   view-transition-name matches the name given to the header logo on the
   T Designs pages (see style.css) — tapping into T Designs morphs this
   big wedge logo up into its small header position on arrival instead
   of just cutting to it. */
.split-tdesigns .split-logo {
  filter: drop-shadow(0 0 30px rgba(34, 230, 230, 0.25));
  view-transition-name: site-logo;
}

/* Matches the header logo's transition name on the Personaliza2 pages.
   Must be a different name than T Designs' above — both logos exist on
   this same landing page at once, and names have to be unique per page. */
.split-personaliza2 .split-logo {
  view-transition-name: personaliza2-logo;
}

.split-logo-placeholder {
  font-family: var(--font);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing: 0.5px;
  color: rgb(142, 251, 247);
  margin-bottom: 18px;
  view-transition-name: dusheli-logo;
}

.split-desc {
  color: var(--muted);
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .split-screen { --vx: 50%; --vy: 50%; display: flex; flex-direction: column; }
  .split-panel {
    position: relative;
    inset: auto;
    flex: 1;
    clip-path: none !important;
    align-items: center;
    padding: 32px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .split-panel:last-child { border-bottom: none; }
  .split-logo { width: 170px; max-width: 60vw; }
}