/* Домашняя: два квадрата-входа + переворот «в окно» сайта */

.home-page {
  min-height: 100dvh;
}

.home-shell {
  width: min(920px, calc(100% - 1.5rem));
  max-width: 100%;
  margin: 0 auto;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 1.35rem;
  box-sizing: border-box;
  padding:
    max(1.25rem, env(safe-area-inset-top))
    0
    max(1.25rem, env(safe-area-inset-bottom));
}

.home-hero {
  text-align: center;
  display: grid;
  gap: 0.45rem;
}

.home-brand.brand {
  margin: 0;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  animation: brand-enter 1.1s ease-out both;
}

.home-brand.brand::before,
.home-brand.brand::after {
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.home-lead {
  margin: 0;
  color: var(--mute);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  letter-spacing: 0.04em;
  animation: home-rise 0.8s ease-out 0.15s both;
}

.home-gates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 3vw, 1.35rem);
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  align-items: stretch;
  animation: home-rise 0.9s ease-out 0.28s both;
  perspective: 1600px;
  box-sizing: border-box;
}

.home-gate {
  --dive-x: 0vw;
  --dive-y: 0vh;
  --dive-yaw: 8deg;
  position: relative;
  aspect-ratio: 1;
  display: block;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transform-style: preserve-3d;
}

.home-gate-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  border-radius: inherit;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-gate-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent) inset,
    0 18px 40px color-mix(in srgb, #000 35%, transparent);
}

.home-gate-face-front {
  display: grid;
  align-content: end;
  background: #0a0e14;
}

.home-gate-face-back {
  transform: rotateY(180deg);
  background: #05070a;
}

.home-gate-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: #05070a;
  /* живой сайт во всю грань куба — без scale, иначе похоже на картинку */
  transform: translateZ(0.5px);
}

.home-gate-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #fff 10%, transparent),
      transparent 42%,
      transparent 58%,
      color-mix(in srgb, #000 18%, transparent)
    ),
    linear-gradient(
      180deg,
      transparent 70%,
      color-mix(in srgb, #05070a 25%, transparent)
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}

body.is-portal-dive .home-gate:hover .home-gate-3d,
body.is-portal-dive .home-gate:focus-visible .home-gate-3d {
  transform: none;
}

.home-gate:hover .home-gate-3d,
.home-gate:focus-visible .home-gate-3d {
  transform: translateY(-4px) scale(1.015);
}

.home-gate:hover .home-gate-face-front,
.home-gate:focus-visible .home-gate-face-front {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset,
    0 22px 48px color-mix(in srgb, #000 42%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 18%, transparent);
}

.home-gate:focus-visible {
  outline: none;
}

.home-gate-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-gate-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-gate:hover .home-gate-media img,
.home-gate:focus-visible .home-gate-media img {
  transform: scale(1.1);
}

.home-gate-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 28%,
      color-mix(in srgb, #05070a 55%, transparent) 62%,
      color-mix(in srgb, #05070a 88%, transparent) 100%
    ),
    radial-gradient(
      120% 80% at 50% 0%,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 55%
    );
  pointer-events: none;
}

.home-gate-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1rem 1.05rem;
}

.home-gate-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--accent) 85%, #fff);
}

.home-gate-title {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: clamp(1.12rem, 3.6vw, 1.4rem);
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 16px color-mix(in srgb, #000 55%, transparent);
}

.home-gate-desc {
  font-size: 0.88rem;
  font-weight: 500;
  color: color-mix(in srgb, #e8eef5 82%, transparent);
  line-height: 1.35;
}

.home-note {
  margin: 0;
  text-align: center;
  color: var(--mute);
  font-size: 0.78rem;
  font-weight: 600;
  animation: home-rise 0.8s ease-out 0.45s both;
}

/* Переворот плитки → видно сайт на обороте → влёт в окно */
body.is-portal-dive {
  overflow: hidden;
  pointer-events: none;
}

body.is-portal-dive .home-hero,
body.is-portal-dive .home-note {
  animation: home-dive-away 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

body.is-portal-dive .home-gate:not(.is-diving) {
  animation: home-dive-sibling 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

body.is-portal-dive .atmosphere {
  animation: home-dive-bg 1.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* is-diving / cube-flip отключены: уход с хаба идёт через edge-swap-out-fade */

.home-portal-flash {
  position: fixed;
  inset: -6%;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 75% 65% at 50% 48%,
      color-mix(in srgb, #f4fbff 28%, transparent) 0%,
      color-mix(in srgb, var(--accent, #3ec6c8) 14%, transparent) 24%,
      color-mix(in srgb, #05070a 75%, transparent) 62%,
      #05070a 100%
    );
}

.home-portal-flash.is-on {
  animation: home-portal-flash 1.2s cubic-bezier(0.33, 0.1, 0.2, 1) forwards;
}

/* Переворот куба → на обороте живой сайт в грани */
@keyframes home-cube-to-back {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }
  28% {
    transform: translate3d(0, -1%, 36px) rotateY(35deg) scale(1.04);
  }
  55% {
    transform: translate3d(0, 0, 70px) rotateY(95deg) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 48px) rotateY(180deg) scale(1.12);
  }
}

@keyframes home-glass-fade {
  0% { opacity: 1; }
  55% { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes home-dive-copy {
  to {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(5px);
  }
}

@keyframes home-dive-away {
  to {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-6px) scale(0.97);
  }
}

@keyframes home-dive-sibling {
  to {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 16px, -30px) scale(0.9);
  }
}

@keyframes home-dive-bg {
  to {
    filter: brightness(0.42) blur(5px);
    opacity: 0.5;
  }
}

@keyframes home-portal-flash {
  0%,
  48% {
    opacity: 0;
  }
  70% {
    opacity: 0.35;
  }
  88% {
    opacity: 0.82;
  }
  100% {
    opacity: 1;
  }
}

@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Телефон: обе плитки в кадре рядом — удобно ткнуть */
@media (max-width: 720px) {
  .home-shell {
    width: min(100% - 1rem, 520px);
    max-width: calc(100% - 1rem);
    min-height: 100dvh;
    min-height: 100svh;
    align-content: center;
    justify-items: stretch;
    gap: 0.75rem;
    margin-inline: auto;
    padding:
      max(0.75rem, env(safe-area-inset-top))
      0
      max(0.85rem, env(safe-area-inset-bottom));
  }

  .home-titles-col {
    width: 100%;
    height: 100%;
    min-width: 0;
  }

  .home-hero {
    gap: 0.25rem;
  }

  .home-brand.brand {
    font-size: clamp(1.35rem, 7.5vw, 1.85rem);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  .home-brand.brand::before,
  .home-brand.brand::after {
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  .home-lead {
    font-size: 0.88rem;
  }

  .home-gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
    margin-inline: 0;
    /* тянем плитки по высоте экрана — удобнее ткнуть */
    min-height: min(58dvh, 420px);
    align-items: stretch;
  }

  .home-gate {
    aspect-ratio: auto;
    height: 100%;
    min-height: min(52dvh, 380px);
    border-radius: 16px;
    /* крупная зона нажатия */
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
  }

  .home-gate-face {
    border-radius: inherit;
  }

  .home-gate-copy {
    padding: 0.7rem 0.7rem 0.75rem;
    gap: 0.12rem;
  }

  .home-gate-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  .home-gate-title {
    font-size: clamp(0.92rem, 4.2vw, 1.08rem);
    line-height: 1.2;
  }

  .home-gate-desc {
    font-size: 0.72rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .home-note {
    font-size: 0.7rem;
    padding-inline: 0.5rem;
  }

  /* без hover-lift на таче — меньше ложных сдвигов */
  .home-gate:hover .home-gate-3d,
  .home-gate:focus-visible .home-gate-3d {
    transform: none;
  }
}

@media (max-width: 380px) {
  .home-gates {
    gap: 0.5rem;
    min-height: min(54dvh, 360px);
  }

  .home-gate {
    min-height: min(48dvh, 340px);
  }

  .home-gate-desc {
    -webkit-line-clamp: 2;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand.brand,
  .home-lead,
  .home-gates,
  .home-note,
  .home-gate-3d,
  .home-gate.is-diving .home-gate-3d,
  .home-portal-flash.is-on,
  body.is-portal-dive .home-hero,
  body.is-portal-dive .home-note,
  body.is-portal-dive .home-gate:not(.is-diving),
  body.is-portal-dive .atmosphere {
    animation: none !important;
    transition: none !important;
  }
}

/* справа: две отдельные карточки — ПК сверху, мобилка снизу */
.home-titles-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.55rem, 2vw, 0.85rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
}

/* левая плитка задаёт квадрат колонки; правая тянется в ту же высоту */
.home-gates > .home-gate {
  width: 100%;
  min-width: 0;
}

.home-gate-mini {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

.home-gate-mini .home-gate-face-front {
  align-content: end;
}

.home-gate-device {
  position: absolute;
  right: 0.75rem;
  top: 0.65rem;
  z-index: 1;
  width: clamp(2.6rem, 9vw, 3.4rem);
  height: clamp(2.6rem, 9vw, 3.4rem);
  display: grid;
  place-items: center;
  border-radius: 14px;
  pointer-events: none;
}

.home-gate-device svg {
  width: 70%;
  height: 70%;
  display: block;
}

.home-gate-mini-pc .home-gate-device {
  color: var(--accent, #3dffd0);
  background: color-mix(in srgb, var(--accent, #3dffd0) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #3dffd0) 40%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent, #3dffd0) 18%, transparent);
}

.home-gate-mini-mob .home-gate-device {
  color: #d4b8ff;
  background: color-mix(in srgb, #b57cff 16%, transparent);
  border: 1px solid color-mix(in srgb, #b57cff 42%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, #b57cff 18%, transparent);
}

.home-gate-mini-pc .home-gate-face-front {
  border-color: color-mix(in srgb, var(--accent, #3dffd0) 40%, var(--line));
}

.home-gate-mini-mob .home-gate-face-front {
  border-color: color-mix(in srgb, #b57cff 42%, var(--line));
}

.home-gate-mini-pc:hover .home-gate-face-front,
.home-gate-mini-pc:focus-visible .home-gate-face-front {
  border-color: color-mix(in srgb, var(--accent, #3dffd0) 65%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #3dffd0) 28%, transparent) inset,
    0 18px 40px color-mix(in srgb, #000 42%, transparent),
    0 0 36px color-mix(in srgb, var(--accent, #3dffd0) 22%, transparent);
}

.home-gate-mini-mob:hover .home-gate-face-front,
.home-gate-mini-mob:focus-visible .home-gate-face-front {
  border-color: color-mix(in srgb, #b57cff 65%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #b57cff 28%, transparent) inset,
    0 18px 40px color-mix(in srgb, #000 42%, transparent),
    0 0 36px color-mix(in srgb, #b57cff 22%, transparent);
}

.home-gate-mini .home-gate-title {
  font-size: clamp(1.15rem, 3.8vw, 1.45rem);
  letter-spacing: 0.01em;
  text-indent: 0;
}

.home-gate-mini-mob .home-gate-title {
  color: #ead9ff;
  text-shadow: 0 0 18px rgba(181, 124, 255, 0.35);
}

.home-gate-mini-mob .home-gate-kicker {
  color: color-mix(in srgb, #d4b8ff 80%, var(--mute));
}

.home-gate-mini .home-gate-media img {
  object-position: center;
}

@media (max-width: 560px) {
  .home-titles-col {
    gap: 0.45rem;
  }

  .home-gate-device {
    right: 0.5rem;
    top: 0.45rem;
    border-radius: 12px;
  }

  .home-gate-mini .home-gate-copy {
    padding: 0.65rem 0.7rem 0.75rem;
  }
}