/**
 * Main Stylesheet
 * This file imports all other CSS files in the correct order
 */

/* Base */
@import 'foundation/reset.css';
@import 'foundation/base.css';
@import 'foundation/utility.css';

/* Layout */
@import 'layout/header.css';
@import 'layout/main.css';
@import 'layout/footer.css';

/* Components */
@import 'object/component/button.css';
@import 'object/component/card.css';
@import 'object/component/accordion.css';

/* Project */
@import 'object/project/top.css';
@import 'object/project/article.css';
@import 'object/project/article-list.css';

/* Print Styles */
@media print {
  @import 'foundation/print.css';
}

/* FOUC Prevention */
.is-loading {
  opacity: 0;
  visibility: hidden;
}

.is-loaded {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Back to Top Button */
.c-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  z-index: 999;
}

.c-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-back-to-top:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.c-back-to-top svg {
  width: 24px;
  height: 24px;
}