/* ==========================================================================
   Ксения Хабаровская — Авторские медитации
   Стили, анимации и темы оформления
   ========================================================================== */

:root {
  --star-color: rgba(182, 102, 66, 0.7);
  --color-light-bg: #F9F5F0;
  --color-light-card: #EBE2D5;
  --color-light-border: #DFD4C5;
  --color-light-text: #362C26;
  --color-light-text-muted: #6E645B;
  --color-rust: #B66642;
  --color-taupe: #AA9C89;
  --color-success: #4A8760;
  --color-warning: #D97706;
  color-scheme: light;
  accent-color: var(--color-rust);
}

.dark {
  --star-color: rgba(255, 255, 255, 0.9);
  color-scheme: dark;
  accent-color: #FF9566;
}

html {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
}

.hide {
  display: none !important;
}

#packages {
  scroll-margin-top: 6rem;
}

/* Bento Card Hover Effect */
.bento-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 30px -10px rgba(54, 44, 38, 0.08), 0 10px 15px -5px rgba(54, 44, 38, 0.04);
}

.dark .bento-card:hover {
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5), 0 10px 15px -5px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Космическое дыхание (Space Breathing Deep Animation)
   ========================================================================== */

@keyframes nebula-breathe {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.35;
    filter: blur(80px);
  }
  50% {
    transform: scale(1.7) rotate(45deg);
    opacity: 0.95;
    filter: blur(120px);
  }
}

@keyframes stars-breathe {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.space-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  top: 50%;
  left: 50%;
  will-change: transform, opacity, filter;
}

.stars-layer {
  position: absolute;
  inset: -50%;
  background-image: 
    radial-gradient(2px 2px at 40px 60px, var(--star-color), rgba(0,0,0,0)), 
    radial-gradient(3px 3px at 120px 150px, var(--star-color), rgba(0,0,0,0)), 
    radial-gradient(1.5px 1.5px at 230px 80px, var(--star-color), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 300px 250px, var(--star-color), rgba(0,0,0,0)),
    radial-gradient(2.5px 2.5px at 450px 380px, var(--star-color), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: stars-breathe 14s ease-in-out infinite;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.dark .stars-layer {
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Sound Wave animation for active playing track */
@keyframes sound-wave-1 { 0%, 100% { height: 6px; } 50% { height: 18px; } }
@keyframes sound-wave-2 { 0%, 100% { height: 16px; } 50% { height: 8px; } }
@keyframes sound-wave-3 { 0%, 100% { height: 10px; } 50% { height: 22px; } }

.wave-bar-1 { animation: sound-wave-1 0.8s ease-in-out infinite; }
.wave-bar-2 { animation: sound-wave-2 0.7s ease-in-out infinite 0.2s; }
.wave-bar-3 { animation: sound-wave-3 0.9s ease-in-out infinite 0.4s; }

/* Brand-Consistent Audio Player Volume Slider */
.player-volume-slider {
  --slider-track-size: 0.375rem;
  --slider-thumb-size: 0.875rem;
  --slider-track-radius: 9999px;
  --slider-thumb-radius: 50%;
  --slider-track-color: rgba(255, 255, 255, 0.22);
  --slider-fill-color: #D47A52;
  --slider-thumb-color: #ffffff;
  --slider-direction: to right;

  --attr-min: attr(min type(<number>), 0);
  --attr-max: attr(max type(<number>), 100);
  --control-value: attr(value type(<number>), 85);
  --slider-progress: calc(
    progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
  );

  appearance: none;
  inline-size: 100%;
  block-size: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.player-volume-slider:dir(rtl) {
  --slider-direction: to left;
}

.dark .player-volume-slider {
  --slider-fill-color: #FF9566;
}

@supports not (opacity: progress(1, 0, 100)) {
  .player-volume-slider {
    --slider-progress: calc(
      (var(--control-value) - var(--attr-min)) /
      (var(--attr-max) - var(--attr-min)) * 100%
    );
  }
}

/* WebKit/Blink */
.player-volume-slider::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: linear-gradient(
    var(--slider-direction),
    var(--slider-fill-color) var(--slider-progress),
    var(--slider-track-color) var(--slider-progress)
  );
}

.player-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2);
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 150ms ease-out;
}

.player-volume-slider:hover::-webkit-slider-thumb,
.player-volume-slider:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

/* Firefox */
.player-volume-slider::-moz-range-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: var(--slider-track-color);
}

.player-volume-slider::-moz-range-progress {
  block-size: var(--slider-track-size);
  border-radius: var(--slider-track-radius);
  background: var(--slider-fill-color);
}

.player-volume-slider::-moz-range-thumb {
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 150ms ease-out;
}

.player-volume-slider:hover::-moz-range-thumb,
.player-volume-slider:active::-moz-range-thumb {
  transform: scale(1.15);
}

.player-volume-slider:focus-visible {
  outline: 2px solid var(--slider-fill-color);
  outline-offset: 2px;
}

.player-seek-slider {
  --slider-thumb-size: 0.875rem;
  --slider-track-size: 0.375rem;
  --slider-progress: 0%;
  display: block;
  block-size: 1.5rem;
}

.player-seek-slider:disabled {
  cursor: default;
  opacity: 0.65;
}

/* Dialog & Backdrop Styles */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
}

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: backdrop-fade-in 0.3s ease-out forwards;
}

@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(170, 156, 137, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(182, 102, 66, 0.6);
}

/* Cabinet Package Photo Carousel */
@property --fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.cabinet-carousel-track {
  position: relative;
  justify-content: flex-start;
  scrollbar-width: none;
  scroll-snap-type: inline mandatory;
  touch-action: manipulation;
  --fade-size: 1.5rem;
  --fade-dir: right;
  --fade-start-pos: 0;
  --fade-end-pos: 100%;
  scroll-padding-inline: 0.25rem;
  mask:
    linear-gradient(black, black) no-clip subtract,
    linear-gradient(to var(--fade-dir), black, transparent) var(--fade-start-pos) 0 / var(--fade-start) 100% no-repeat no-clip,
    linear-gradient(to var(--fade-dir), transparent, black) var(--fade-end-pos) 0 / var(--fade-end) 100% no-repeat no-clip;
  animation: cabinet-fade-start linear both, cabinet-fade-end linear both;
  animation-timeline: scroll(self inline);
  animation-range: 0 var(--fade-size), calc(100% - var(--fade-size)) 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .cabinet-carousel-track {
    scroll-behavior: smooth;
  }
}

.cabinet-carousel-track.more-start {
  --fade-start: var(--fade-size);
}

.cabinet-carousel-track.more-end {
  --fade-end: var(--fade-size);
}

@keyframes cabinet-fade-start {
  to {
    --fade-start: var(--fade-size);
  }
}

@keyframes cabinet-fade-end {
  from {
    --fade-end: var(--fade-size);
  }
}

.cabinet-carousel-track::-webkit-scrollbar {
  display: none;
}

.cabinet-carousel-track.is-centered {
  justify-content: center;
}

.cabinet-carousel-slide {
  flex: 0 0 218px;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .cabinet-carousel-slide {
    flex: 0 0 242px;
  }
}

@media (min-width: 1024px) {
  .cabinet-carousel-slide {
    flex: 0 0 238px;
  }
}

.cabinet-pkg-card {
  position: relative;
  touch-action: manipulation;
}

.cabinet-pkg-card[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0.75rem 0;
  border-block-end: 3px solid currentColor;
  border-radius: 9999px;
}

.cabinet-carousel-btn {
  touch-action: manipulation;
}

.cabinet-carousel-btn:focus-visible,
.cabinet-pkg-card:focus-visible,
.cabinet-carousel-markers button:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
}

.cabinet-carousel-markers button {
  cursor: pointer;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(170, 156, 137, 0.45);
  transition: width 0.2s ease, background-color 0.2s ease;
  touch-action: manipulation;
}

.cabinet-carousel-markers button[aria-current="true"] {
  width: 1.5rem;
  background-color: var(--color-rust);
}

.dark .cabinet-carousel-markers button[aria-current="true"] {
  background-color: #F4A27E;
}

/* ==========================================================================
   Доступные формы авторизации и пост-интерактивная валидация
   ========================================================================== */
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.auth-input {
  font-size: max(1rem, 0.9375rem);
  min-height: 48px;
}

.auth-input:focus-visible {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
}

.dark .auth-input:focus-visible {
  outline-color: #F4A27E;
}

/* Показываем ошибки только ПОСЛЕ завершения взаимодействия (:user-invalid) или сабмита */
.auth-input:is(:user-invalid, .user-invalid-fallback) {
  border-color: #dc2626 !important;
  background-color: rgba(239, 68, 68, 0.06);
}

.dark .auth-input:is(:user-invalid, .user-invalid-fallback) {
  border-color: #f87171 !important;
  background-color: rgba(127, 29, 29, 0.25);
}

.auth-input[data-show-valid="true"]:is(:user-valid, .user-valid-fallback) {
  border-color: #4A8760 !important;
}

.dark .auth-input[data-show-valid="true"]:is(:user-valid, .user-valid-fallback) {
  border-color: #34d399 !important;
}

.auth-field-error {
  display: none;
}

#auth-dialog:not([data-enhanced-validation="true"]) .auth-field:has(.auth-input:is(:user-invalid, .user-invalid-fallback)) .auth-field-error,
.auth-field.has-field-error .auth-field-error {
  display: flex;
}

/* Список требований к паролю */
.password-rules-box {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#auth-dialog:not([data-enhanced-validation="true"]) .auth-field:has(.auth-input:is(:user-invalid, .user-invalid-fallback)) .password-rules-box,
.auth-field.has-field-error .password-rules-box {
  border-color: rgba(220, 38, 38, 0.45);
}

.dark #auth-dialog:not([data-enhanced-validation="true"]) .auth-field:has(.auth-input:is(:user-invalid, .user-invalid-fallback)) .password-rules-box,
.dark .auth-field.has-field-error .password-rules-box {
  border-color: rgba(248, 113, 113, 0.45);
}

.password-rule-item {
  color: var(--color-light-text-muted);
  transition: color 0.18s ease;
}

.dark .password-rule-item {
  color: #9ca3af;
}

.password-rule-item[data-rule-met="true"] {
  color: #15803d;
  font-weight: 600;
}

.dark .password-rule-item[data-rule-met="true"] {
  color: #4ade80;
}

#auth-dialog:not([data-enhanced-validation="true"]) .auth-field:has(.auth-input:is(:user-invalid, .user-invalid-fallback)) .password-rule-item[data-rule-met="false"],
.auth-field.has-field-error .password-rule-item[data-rule-met="false"] {
  color: #b91c1c;
  font-weight: 600;
}

.dark #auth-dialog:not([data-enhanced-validation="true"]) .auth-field:has(.auth-input:is(:user-invalid, .user-invalid-fallback)) .password-rule-item[data-rule-met="false"],
.dark .auth-field.has-field-error .password-rule-item[data-rule-met="false"] {
  color: #fca5a5;
}

/* ==========================================================================
   Юридические документы и читаемая типографика (Оферта, Политика)
   ========================================================================== */
.legal-prose {
  line-height: 1.65;
  overflow-wrap: break-word;
}

.legal-prose h1,
.legal-prose h2,
.legal-prose h3 {
  text-wrap: balance;
  scroll-margin-top: 6rem;
}

.legal-prose p,
.legal-prose li {
  text-wrap: pretty;
}

.legal-prose a {
  overflow-wrap: break-word;
}

@media print {
  .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #111111 !important;
  }
}

/* ==========================================================================
   Настраиваемое кадрирование фотографий и обложек (object-fit / object-position)
   ========================================================================== */
.framed-media-img {
  object-fit: var(--media-fit, cover);
  object-position: var(--media-pos, 50% 50%);
}

.framed-media-author {
  --media-fit: cover;
  --media-pos: 50% 0%;
}

.framed-media-backdrop {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.08);
  opacity: 0.52;
  pointer-events: none;
}