/**
 * View Transitions CSS - AIzis Theme
 *
 * Transition Types:
 * 1. Slide Left/Right - Header navigation
 * 2. Thumbnail Expand - News index to detail
 * 3. Thumbnail Shrink - News detail to index
 * 4. Detail Slide - News detail to detail (prev/next)
 * 5. Fade - Default fallback
 * 6. Stagger - List item entrance
 */

/* ==========================================
   Base Configuration
   ========================================== */

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Default transition timing */
:root {
  --vt-duration-slide: 0.4s;
  --vt-duration-thumbnail: 0.5s;
  --vt-duration-fade: 0.3s;
  --vt-easing-slide: cubic-bezier(0.4, 0, 0.2, 1);
  --vt-easing-thumbnail: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   1. Default Fade Transition
   ========================================== */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--vt-duration-fade);
  animation-timing-function: ease-out;
}

/* ==========================================
   2. Slide Left Transition (Forward Navigation)
   HOME → COMPANY → SERVICES → NEWS → RECRUIT → CONTACT
   ========================================== */

.transition-slide-left::view-transition-old(root) {
  animation: vt-slide-out-left var(--vt-duration-slide) var(--vt-easing-slide);
}

.transition-slide-left::view-transition-new(root) {
  animation: vt-slide-in-right var(--vt-duration-slide) var(--vt-easing-slide);
}

/* ==========================================
   3. Slide Right Transition (Backward Navigation)
   CONTACT → RECRUIT → NEWS → SERVICES → COMPANY → HOME
   ========================================== */

.transition-slide-right::view-transition-old(root) {
  animation: vt-slide-out-right var(--vt-duration-slide) var(--vt-easing-slide);
}

.transition-slide-right::view-transition-new(root) {
  animation: vt-slide-in-left var(--vt-duration-slide) var(--vt-easing-slide);
}

/* ==========================================
   4. News Index → Detail (Thumbnail Expand)
   ========================================== */

.transition-news-index-to-detail::view-transition-group(root) {
  z-index: 0;
}

.transition-news-index-to-detail::view-transition-group(news-banner) {
  z-index: 1;
}

.transition-news-index-to-detail::view-transition-old(root) {
  animation: vt-fade-out 0.3s ease-out;
}

.transition-news-index-to-detail::view-transition-new(root) {
  animation: vt-fade-in 0.3s 0.1s ease-out both;
}

/* Thumbnail to banner animation */
::view-transition-old(news-banner),
::view-transition-new(news-banner) {
  animation-duration: var(--vt-duration-thumbnail);
  animation-timing-function: var(--vt-easing-thumbnail);
  /* Prevent clipping during animation */
  overflow: visible;
}

/* Title animation */
::view-transition-old(news-title),
::view-transition-new(news-title) {
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
}

/* ==========================================
   5. News Detail → Index (Thumbnail Shrink)
   ========================================== */

.transition-news-detail-to-index::view-transition-group(root) {
  z-index: 0;
}

.transition-news-detail-to-index::view-transition-group(news-banner) {
  z-index: 1;
}

.transition-news-detail-to-index::view-transition-old(root) {
  animation: vt-fade-out 0.2s 0.1s ease-out both;
}

.transition-news-detail-to-index::view-transition-new(root) {
  animation: vt-fade-in 0.3s ease-out;
}

/* ==========================================
   6. News Detail → Detail (Prev/Next)
   ========================================== */

.transition-news-detail-to-detail::view-transition-old(root) {
  animation: vt-slide-out-left 0.35s ease-out;
}

.transition-news-detail-to-detail::view-transition-new(root) {
  animation: vt-slide-in-right 0.35s ease-out;
}

/* Back navigation (right to left) */
.transition-news-detail-to-detail.is-back::view-transition-old(root) {
  animation-name: vt-slide-out-right;
}

.transition-news-detail-to-detail.is-back::view-transition-new(root) {
  animation-name: vt-slide-in-left;
}

/* ==========================================
   7. Fade Transition (Default)
   ========================================== */

.transition-fade::view-transition-old(root) {
  animation: vt-fade-out var(--vt-duration-fade) ease-out;
}

.transition-fade::view-transition-new(root) {
  animation: vt-fade-in var(--vt-duration-fade) ease-out;
}

/* ==========================================
   Keyframe Animations
   ========================================== */

@keyframes vt-slide-out-left {
  to {
    transform: translateX(-30%);
    opacity: 0;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(30%);
    opacity: 0;
  }
}

@keyframes vt-slide-out-right {
  to {
    transform: translateX(30%);
    opacity: 0;
  }
}

@keyframes vt-slide-in-left {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }
}

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

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-scale-up {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
}

@keyframes vt-scale-down {
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* ==========================================
   8. Persistent Elements (Header/Footer)
   ========================================== */

/* Header stays fixed during transitions */
.site-header,
.header {
  view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  /* Keep header static */
  animation: none;
  mix-blend-mode: normal;
}

/* Footer can fade slightly */
.site-footer,
.footer {
  view-transition-name: site-footer;
}

::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation-duration: 0.2s;
}

/* ==========================================
   9. View Transition Name Assignments
   ========================================== */

/* News thumbnail - dynamically set via JS */
.news-thumbnail-transition {
  view-transition-name: news-banner;
  contain: layout;
}

/* News detail banner */
.post-banner-transition {
  view-transition-name: news-banner;
  contain: layout;
}

/* News title - dynamically set via JS */
.news-title-transition {
  view-transition-name: news-title;
}

/* Page titles */
.page-title {
  view-transition-name: page-title;
}

::view-transition-old(page-title),
::view-transition-new(page-title) {
  animation-duration: 0.3s;
}

/* ==========================================
   10. Performance Optimizations
   ========================================== */

/* Contain layout to prevent reflows */
.news-thumbnail-wrapper,
.post-banner-wrapper {
  contain: layout style;
}

/* Will-change for animated elements */
.vt-ready .news-thumbnail,
.vt-ready .post-banner {
  will-change: transform;
}

/* Remove will-change after transition */
.news-thumbnail,
.post-banner {
  will-change: auto;
}

/* ==========================================
   11. Stagger Animation Classes
   (Applied via JavaScript)
   ========================================== */

@keyframes vt-stagger-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-animate .news-archive-item {
  animation: vt-stagger-in 0.4s ease-out backwards;
}

.stagger-animate .news-archive-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-animate .news-archive-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-animate .news-archive-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-animate .news-archive-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-animate .news-archive-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-animate .news-archive-item:nth-child(6) { animation-delay: 0.3s; }
.stagger-animate .news-archive-item:nth-child(7) { animation-delay: 0.35s; }
.stagger-animate .news-archive-item:nth-child(8) { animation-delay: 0.4s; }
.stagger-animate .news-archive-item:nth-child(9) { animation-delay: 0.45s; }
.stagger-animate .news-archive-item:nth-child(10) { animation-delay: 0.5s; }

/* ==========================================
   12. Mobile Adjustments
   ========================================== */

@media (max-width: 768px) {
  :root {
    --vt-duration-slide: 0.3s;
    --vt-duration-thumbnail: 0.4s;
  }

  /* Reduce slide distance on mobile */
  @keyframes vt-slide-out-left {
    to {
      transform: translateX(-20%);
      opacity: 0;
    }
  }

  @keyframes vt-slide-in-right {
    from {
      transform: translateX(20%);
      opacity: 0;
    }
  }

  @keyframes vt-slide-out-right {
    to {
      transform: translateX(20%);
      opacity: 0;
    }
  }

  @keyframes vt-slide-in-left {
    from {
      transform: translateX(-20%);
      opacity: 0;
    }
  }
}