/* ════════════════════════════════════════════════════════════
   SUMMER THEME — Fullscreen image + parallax + brand + sparks
   ════════════════════════════════════════════════════════════ */

.theme-summer {
  --warm-text:    #fff6e6;
  --glass-bg:     rgba(255, 230, 200, 0.07);
  --glass-stroke: rgba(255, 220, 180, 0.20);
}

/* ── 0. Никаких скроллбаров и связанного с мышью дёрганья ── */
body.theme-summer {
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.theme-summer::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Стандартные оверлеи тоже не должны прокручиваться */
.theme-summer .dept-picker-overlay,
.theme-summer .login-overlay {
  overflow: hidden !important;
}

/* Скрываем legacy-элементы */
.theme-summer .dp-orb,
.theme-summer .login-bg { display: none !important; }

/* ── 1. Fullscreen картинка ──────────────────────────────── */
.theme-summer .dept-picker-overlay,
.theme-summer .login-overlay {
  background: #0c0814;
}

.summer-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.08) translate3d(0, 0, 0);
  transform-origin: center center;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  animation: bgIn .9s ease-out both;
}
@keyframes bgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 2. Затемнение для читаемости ────────────────────────── */
.summer-bg-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Угловая виньетка — гасит края, не трогает верх с заголовком */
    radial-gradient(ellipse 130% 100% at 50% 45%,
      transparent 50%,
      rgba(8, 4, 18, 0.32) 100%),
    /* Центральный «прожектор» — затемняет область под карточками */
    radial-gradient(ellipse 75% 55% at 50% 55%,
      rgba(8, 4, 18, 0.55) 0%,
      rgba(8, 4, 18, 0.22) 60%,
      rgba(8, 4, 18, 0.0)  100%);
}
.summer-bg-mask--login {
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%,
      rgba(8, 4, 18, 0.55) 0%,
      rgba(8, 4, 18, 0.85) 100%),
    linear-gradient(180deg,
      rgba(8, 4, 18, 0.4) 0%,
      rgba(8, 4, 18, 0.7) 100%);
}

/* ════════════════════════════════════════════════════════════
   3. БРЕНД-МАРКА: спасательный круг 🛟 + Multi Metrics
   ════════════════════════════════════════════════════════════ */
.summer-brand {
  position: absolute;
  top: 26px;
  left: 30px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  user-select: none;
  animation: brandIn 1s cubic-bezier(.22,.9,.3,1) .25s both;
}
@keyframes brandIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.summer-buoy {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
/* Сам круг — крутится */
.summer-buoy-ring {
  grid-column: 1; grid-row: 1;
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(255, 130, 90, 0.55));
  animation: buoySpin 9s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes buoySpin {
  to { transform: rotate(360deg); }
}
/* Сердцевина — стоит на месте, лишь чуть «дышит» */
.summer-buoy-core {
  grid-column: 1; grid-row: 1;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 230, 200, 0.7));
  animation: coreFloat 3.2s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes coreFloat {
  from { transform: translateY(-1px) scale(1); }
  to   { transform: translateY(1px)  scale(1.06); }
}

/* Текстовая часть бренда */
.summer-brand-text {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  line-height: 1;
  color: #ffffff;
  /* Многослойная тень: резкий 1px-контур + средний halo + широкое затемнение —
     гарантирует читаемость на ярком закате */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.65),
    0 4px 18px rgba(0, 0, 0, 0.85),
    0 0 36px rgba(0, 0, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════
   4. ИСКРЫ — золотые точки, поднимающиеся снизу вверх
   ════════════════════════════════════════════════════════════ */
.summer-sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.summer-spark {
  position: absolute;
  bottom: -10px;
  left: var(--x, 50%);
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 230, 170, 0.95) 0%,
    rgba(255, 170, 90, 0.4)  50%,
    transparent              100%);
  filter: blur(0.4px);
  opacity: 0;
  animation: sparkUp var(--dur, 14s) ease-in var(--d, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes sparkUp {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  10%  { opacity: .9; }
  60%  { opacity: .8; }
  100% { transform: translate(var(--drift, 30px), -110vh) scale(1.05); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   5. Раскладка dept-picker
   ════════════════════════════════════════════════════════════ */
.theme-summer .dp-logo-wrap,
.theme-summer .dept-picker-title {
  display: none !important;
}

.theme-summer .dept-picker-wrap {
  position: absolute !important;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 48px));
  max-width: none;
  /* Если контент вдруг выше окна — прокрутка внутри wrap, без визуальных скроллбаров */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.theme-summer .dept-picker-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }

.theme-summer .dept-picker-header {
  width: 100%;
  display: flex;
  justify-content: center;
}
.theme-summer .dept-picker-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: rgba(255, 240, 220, 0.92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.theme-summer .dept-picker-sub::before,
.theme-summer .dept-picker-sub::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 180, 0.6), transparent);
}

.theme-summer .dept-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* ════════════════════════════════════════════════════════════
   6. Карточки — стеклянные, с пульсирующим glow
   ════════════════════════════════════════════════════════════ */
.theme-summer .dept-card {
  background: linear-gradient(180deg,
    rgba(255, 220, 190, 0.10) 0%,
    rgba(20, 10, 35, 0.55)   100%);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 230, 200, 0.18);
}
.theme-summer .dept-card:hover {
  border-color: rgba(255, 220, 180, 0.35);
  box-shadow:
    0 32px 64px -18px rgba(0, 0, 0, 0.65),
    0 0 60px -10px rgba(255, 150, 110, 0.4),
    inset 0 1px 0 rgba(255, 230, 200, 0.28);
}

/* Подсветка-glow вокруг карточки — медленно дышит */
.theme-summer .dept-card-border-glow {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 230, 200, 0.06);
  animation: glowBreath 4.5s ease-in-out infinite alternate;
}
@keyframes glowBreath {
  from { box-shadow: inset 0 0 0 1px rgba(255, 230, 200, 0.06), 0 0 0 0 rgba(255, 200, 140, 0); }
  to   { box-shadow: inset 0 0 0 1px rgba(255, 230, 200, 0.10), 0 0 24px -10px var(--glow, rgba(255, 200, 140, .35)); }
}
.theme-summer .dept-card:hover .dept-card-border-glow {
  animation: none;
  box-shadow:
    inset 0 0 0 1.5px var(--glow, rgba(255, 200, 140, 0.55)),
    0 0 50px -10px var(--glow, rgba(255, 180, 120, 0.6));
}

.theme-summer .dept-card-icon-wrap { margin-bottom: 8px; }
.theme-summer .dept-card-icon-halo {
  background: radial-gradient(circle,
    rgba(255, 220, 170, 0.55) 0%,
    rgba(255, 130, 110, 0.25) 45%,
    transparent              75%) !important;
  animation-duration: 4s;
}
.theme-summer .dept-card-icon {
  filter: drop-shadow(0 6px 18px rgba(255, 150, 100, 0.45));
  animation: iconBob 4.5s ease-in-out infinite alternate;
}
@keyframes iconBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

.theme-summer .dept-card-name {
  color: #fff8eb;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.theme-summer .dept-card-desc {
  color: rgba(255, 230, 210, 0.7);
}

/* ════════════════════════════════════════════════════════════
   7. Кнопка "Перейти"
   ════════════════════════════════════════════════════════════ */
.theme-summer .dept-card-btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-family: 'Geist', inherit;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .35px;
  box-shadow:
    0 6px 22px -6px rgba(255, 130, 90, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -8px 18px -8px rgba(120, 30, 60, 0.4) !important;
  transition:
    transform .25s cubic-bezier(.34,1.56,.64,1),
    box-shadow .25s,
    filter .2s !important;
  z-index: 1;
}
.theme-summer .dept-card-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(255, 240, 210, 0.28) 0%,
      rgba(255, 240, 210, 0.0)  45%,
      rgba(180, 60, 80, 0.0)    55%,
      rgba(180, 60, 80, 0.18)  100%);
  pointer-events: none;
  z-index: 1;
}
.theme-summer .dept-card-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 35%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.4,.1,.3,1);
  pointer-events: none;
  z-index: 2;
}
.theme-summer .dept-card:hover .dept-card-btn::after { left: 130%; }

.theme-summer .dept-card-btn:not([style*="cursor:default"]):hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    0 14px 34px -8px rgba(255, 130, 90, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 20px -8px rgba(120, 30, 60, 0.45) !important;
}

.theme-summer .dept-card.is-active {
  border-color: rgba(255, 220, 170, 0.45);
}
.theme-summer .dept-card.is-active::after {
  box-shadow: 0 0 80px -10px rgba(255, 180, 120, 0.4);
}

.theme-summer .dept-card-auth-badge {
  background: rgba(255, 210, 140, 0.18);
  border-color: rgba(255, 210, 140, 0.45);
  color: #ffe6b8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.theme-summer .dp-particles {
  mix-blend-mode: screen;
  opacity: .45;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   8. LOGIN
   ════════════════════════════════════════════════════════════ */
.theme-summer .login-card {
  position: relative;
  z-index: 5;
  background:
    linear-gradient(180deg,
      rgba(255, 230, 200, 0.13) 0%,
      rgba(20, 10, 35, 0.55)   100%);
  border: 1px solid rgba(255, 220, 180, 0.22);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    0 30px 70px -10px rgba(0, 0, 0, 0.7),
    0 0 60px -10px rgba(255, 150, 110, 0.3),
    inset 0 1px 0 rgba(255, 230, 200, 0.22);
}
.theme-summer .login-logo { filter: drop-shadow(0 0 24px rgba(255, 200, 140, 0.6)); }
.theme-summer .login-title {
  background: linear-gradient(92deg, #fff6e6, #ffd89b, #ff7e5f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.theme-summer .login-sub { color: rgba(255, 235, 210, 0.7); }
.theme-summer .login-field span { color: rgba(255, 230, 200, 0.75); }
.theme-summer .login-field input {
  background: rgba(255, 240, 220, 0.06);
  border-color: rgba(255, 220, 180, 0.18);
  color: #fff6e6;
}
.theme-summer .login-field input::placeholder { color: rgba(255, 230, 200, 0.35); }
.theme-summer .login-field input:focus {
  border-color: rgba(255, 180, 120, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 180, 120, 0.12);
}
.theme-summer .login-remember { color: rgba(255, 230, 210, 0.66); }
.theme-summer .login-remember input[type="checkbox"] { accent-color: #ff8a6c; }

.theme-summer .login-btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 14px;
  font-weight: 800;
  letter-spacing: .35px;
  box-shadow:
    0 8px 26px -6px rgba(255, 130, 90, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -8px 18px -8px rgba(120, 30, 60, 0.4);
}
.theme-summer .login-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 35%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.4,.1,.3,1);
  pointer-events: none;
}
.theme-summer .login-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow:
    0 16px 38px -8px rgba(255, 130, 90, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 20px -8px rgba(120, 30, 60, 0.45);
}
.theme-summer .login-btn:hover::after { left: 130%; }
.theme-summer .login-btn:disabled { opacity: .55; filter: saturate(.7); }

.theme-summer .login-back-btn { color: rgba(255, 230, 210, 0.7); }
.theme-summer .login-back-btn:hover {
  color: #fff6e6;
  background: rgba(255, 230, 200, 0.1);
}

.theme-summer .login-dept-badge {
  box-shadow: 0 0 18px -4px currentColor;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════
   9. Адаптив
   ════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .theme-summer .dept-picker-wrap {
    /* На мобильном — top-align с отступом под бренд, чтобы не пересекалось */
    top: 80px;
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    gap: 14px;
  }
  .theme-summer .dept-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .summer-brand { top: 18px; left: 18px; gap: 10px; }
  .summer-buoy { width: 48px; height: 48px; }
  .summer-buoy-ring { font-size: 42px; }
  .summer-buoy-core { font-size: 16px; }
  .summer-brand-text { display: none; }
}

@media (max-width: 380px) {
  .summer-brand-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .summer-bg { animation: none !important; transform: scale(1.02) !important; }
  .summer-buoy-ring,
  .summer-buoy-core,
  .summer-brand,
  .summer-spark,
  .theme-summer .dept-card-icon,
  .theme-summer .dept-card-border-glow {
    animation: none !important;
  }
}