/**
 * View Transitions API - CSS стили
 * Плавный fade-эффект между страницами
 */

/* Активация cross-document view transitions для MPA */
@view-transition {
  navigation: auto;
}

/* ============================================
   Smooth Scroll & Stable Scrollbar
   ============================================ */

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

html.view-transition-active,
html.page-leaving {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   Page Load Fade-in
   ============================================ */

html:not(.page-ready) main.page {
  opacity: 0;
}

html.page-ready main.page {
  animation: page-fade-in 0.3s ease-out forwards;
}

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

/* ============================================
   Page Exit Fade-out
   ============================================ */

html.page-leaving main.page {
  animation: page-fade-out 0.2s ease-in forwards;
  pointer-events: none;
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.page-ready main.page,
  html.page-leaving main.page {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   Progress Bar
   ============================================ */

.page-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

.page-progress.active {
  opacity: 1;
  animation: progress-smooth 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-progress.finishing {
  animation: progress-complete 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes progress-smooth {
  0% {
    width: 0;
  }
  100% {
    width: 70%;
  }
}

@keyframes progress-complete {
  0% {
    opacity: 1;
  }
  60% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

/* ============================================
   Page Loader (центральный спиннер)
   ============================================ */

.page-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

html.page-leaving .page-loader {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.3s;
}

.page-loader__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__spinner {
    animation: none;
    border-top-color: rgba(59, 130, 246, 0.2);
  }
}

/* Main content получает fade-анимацию */
main.page {
  view-transition-name: main-content;
}

/* Fade out - уходящая страница */
::view-transition-old(main-content) {
  animation: vt-fade-out 0.2s ease-out forwards;
}

/* Fade in - входящая страница */
::view-transition-new(main-content) {
  animation: vt-fade-in 0.2s ease-in forwards;
}


/* Keyframes */
@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation-duration: 0.01s;
  }
}

/* Header исключён из view-transition чтобы избежать мерцания при разных состояниях скролла */
.header {
  view-transition-name: none;
}

/* Header остаётся стабильным при переходах */
html.page-leaving .header,
html.view-transition-active .header {
  position: fixed;
  z-index: 10000;
}

/* ============================================
   Modern CSS Features (Chrome 115+)
   ============================================ */

/* Content Visibility - ленивый рендеринг (Chrome 85+) */
/* НЕ применяем к элементам с GSAP анимациями (.product-card и др.) */
article,
.product-description,
.product-tabs__content,
.reviews,
.delivery-block,
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Text Wrap Balance - балансировка заголовков (Chrome 114+) */
h1, h2, h3, h4,
.product-title,
.category-title,
.news-title {
  text-wrap: balance;
}

/* Accent Color - единый цвет форм (Chrome 93+) */
:root {
  accent-color: #3b82f6;
}

/* ============================================
   Scroll-driven Animations (Chrome 115+)
   ============================================ */

@supports (animation-timeline: view()) {
  /* Класс для элементов без GSAP-анимаций */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    animation: scroll-fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  
  @keyframes scroll-fade-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Только для элементов БЕЗ GSAP (добавь класс .css-scroll-animate) */
  .css-scroll-animate {
    animation: scroll-reveal linear forwards;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }
  
  @keyframes scroll-reveal {
    from {
      opacity: 0.3;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* ============================================
   @starting-style - Entry Animations (Chrome 117+)
   ============================================ */

@supports selector(:open) {
  .modal,
  .popup,
  .dropdown-menu,
  [popover] {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete;
    
    @starting-style {
      opacity: 0;
      transform: scale(0.95);
    }
  }
  
  .modal:not(:popover-open),
  .popup:not(:popover-open),
  [popover]:not(:popover-open) {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ============================================
   CSS :has() - Условные стили (Chrome 105+)
   ============================================ */

/* Форма с ошибками */
.form-group:has(:invalid:not(:placeholder-shown)) {
  --input-border: #ef4444;
}

.form-group:has(:valid:not(:placeholder-shown)) {
  --input-border: #22c55e;
}

/* Карточка с изображением получает другой стиль */
.product-card:has(img:hover) {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Скрываем пустые контейнеры */
.product-list:has(:empty),
.category-list:has(:empty) {
  display: none;
}

/* ============================================
   CSS color-mix() - Динамические цвета (Chrome 111+)
   ============================================ */

:root {
  --primary: #3b82f6;
  --primary-hover: color-mix(in srgb, var(--primary), white 15%);
  --primary-active: color-mix(in srgb, var(--primary), black 15%);
  --primary-muted: color-mix(in srgb, var(--primary), transparent 80%);
}

/* ============================================
   CSS @property - Анимируемые переменные (Chrome 85+)
   ============================================ */

@property --progress-width {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@property --glow-opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* ============================================
   CSS linear() easing - Пружинные эффекты (Chrome 113+)
   ============================================ */

:root {
  --ease-spring: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001 83.6%, 1
  );
  --ease-bounce: linear(
    0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141 13.6%, 0.25, 0.391, 0.563,
    0.765, 1 36.4%, 0.946 40.9%, 0.908, 0.885 50%, 0.879, 0.892, 0.916,
    0.953, 1 68.2%, 0.988, 0.986 77.3%, 1 86.4%, 0.996 95.5%, 1
  );
}

/* Пружинный easing доступен для использования в других местах */
/* Карточки анимируются через GSAP hoverEffect в animations-gl.js */

/* ============================================
   Container Queries - Адаптивные компоненты (Chrome 105+)
   ============================================ */

.product-grid,
.news-grid,
.category-grid {
  container-type: inline-size;
}

@container (max-width: 400px) {
  .product-card,
  .news-card {
    flex-direction: column;
  }
  
  .product-card__image,
  .news-card__image {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

@container (min-width: 600px) {
  .product-card,
  .news-card {
    flex-direction: row;
  }
  
  .product-card__image,
  .news-card__image {
    width: 40%;
    flex-shrink: 0;
  }
}

/* ============================================
   Focus Visible - Улучшенный фокус (Chrome 86+)
   ============================================ */

:focus-visible {
  outline: 2px solid var(--primary, #3b82f6);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   Scroll Snap - Привязка скролла (Chrome 69+)
   ============================================ */

.product-slider,
.gallery-slider {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.product-slider > *,
.gallery-slider > * {
  scroll-snap-align: start;
}

/* ============================================
   Overscroll Behavior - Контроль свайпа (Chrome 63+)
   ============================================ */

.modal,
.mobile-menu,
.sidebar {
  overscroll-behavior: contain;
}

/* ============================================
   Touch Action - Улучшенный тач (Chrome 36+)
   ============================================ */

.product-slider,
.gallery-slider {
  touch-action: pan-x;
}

.map-container {
  touch-action: none;
}