/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  color: #fff;
}

/* Background */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* PC: PC背景を表示、SP背景を非表示 */
.bg-image-pc {
  display: block;
}

.bg-image-sp {
  display: none;
}

/* オーバーレイ：黒 80%透過 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* Container */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
}

/* ================================
   Header - 会社ロゴ
   PC: x=40, y=30, w=134
   SP: x=128(中央), y=40, w=134
   ================================ */
.header {
  position: absolute;
  top: 30px;
  left: 40px;
}

.logo-company {
  width: 134px;
  height: auto;
}

/* ================================
   Hero Section
   ================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ================================
   80周年ロゴ
   PC: w=239, h=255
   SP: w=215, h=229
   ================================ */
.logo-anniversary {
  width: 239px;
  height: auto;
  margin-bottom: 40px;
}

/* ================================
   Flip Clock Countdown
   PC: 全体 w=349, 各ボックス間隔8px
   SP: 全体 w=271, 各ボックス間隔6px
   ================================ */
.countdown {
  display: flex;
  gap: 8px;
  margin-bottom: 36px;
}

.countdown-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================================
   Flip Unit (2桁で1ボックス)
   PC: w=81, h=56
   SP: w=63, h=44
   ================================ */
.flip-unit {
  position: relative;
  width: 81px;
  height: 56px;
  perspective: 400px;
  border-radius: 6px;
  overflow: hidden;
  /* グラデーション: 黒→#292929(50%)→黒 */
  background: linear-gradient(180deg, #000 0%, #292929 50%, #000 100%);
  /* インナーシャドウ: 白、5px radius（四隅に効く） */
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8);
}

.flip-unit-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 上半分・下半分 */
.unit-top,
.unit-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: 2px;
}

.unit-top {
  top: 0;
  align-items: flex-end;
}

.unit-bottom {
  bottom: 0;
  align-items: flex-start;
}

/* 数字
   PC: フォント Lato 700, 高さ約33px
   SP: 高さ約25px
*/
.digit {
  font-family: 'Lato', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: inline-block;
  width: 24px;
  text-align: center;
}

.unit-top .digit {
  transform: translateY(50%);
}

.unit-bottom .digit {
  transform: translateY(-50%);
}

/* 中央の横線（区切り線）
   Figma: #282828 70%透過、高さ1px（極力薄め）
*/
.unit-divider {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(40, 40, 40, 0.4);
  transform: translateY(-50%);
  z-index: 5;
}

/* ================================
   フリップアニメーション用要素
   ※ シャドウなし（中央に入らないように）
   ================================ */
.flip-unit .flip-top,
.flip-unit .flip-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: 2px;
  backface-visibility: hidden;
  z-index: 10;
}

.flip-unit .flip-top {
  top: 0;
  background: linear-gradient(180deg, #000 0%, #292929 100%);
  border-radius: 6px 6px 0 0;
  align-items: flex-end;
  transform-origin: bottom center;
  transform: rotateX(0deg);
  /* box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8); */
  box-shadow:
  inset 0 5px 5px -5px rgba(255, 255, 255, 0.7),  /* 上 */
  inset 5px 0 5px -5px rgba(255, 255, 255, 0.8),  /* 左 */
  inset -5px 0 5px -5px rgba(255, 255, 255, 0.8); /* 右 */
}

.flip-unit .flip-top .digit {
  transform: translateY(50%);
}

.flip-unit .flip-bottom {
  bottom: 0;
  background: linear-gradient(180deg, #292929 0%, #000 100%);
  border-radius: 0 0 6px 6px;
  align-items: flex-start;
  transform-origin: top center;
  transform: rotateX(90deg);
  /* box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8); */
  box-shadow:
  inset 5px 0 5px -5px rgba(255, 255, 255, 0.8),  /* 左 */
  inset -5px 0 5px -5px rgba(255, 255, 255, 0.8), /* 右 */
  inset 0 -5px 5px -5px rgba(255, 255, 255, 0.8); /* 下 */
}

.flip-unit .flip-bottom .digit {
  transform: translateY(-50%);
}

/* Flip Animation */
@keyframes flipTop {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes flipBottom {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

.flip-unit .flip-top.animate {
  animation: flipTop 0.3s ease-in forwards;
}

.flip-unit .flip-bottom.animate {
  animation: flipBottom 0.3s ease-out 0.3s forwards;
}

/* ================================
   Countdown Label (DAYS, HOURS, etc.)
   PC: 高さ約5.5px
   SP: 高さ約4.3px
   ================================ */
.countdown-label {
  font-family: 'Lato', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: 5px;
  opacity: 0.9;
  text-transform: uppercase;
}

/* ================================
   Coming Soon
   PC: font-size=32, letter-spacing=6.4
   SP: font-size=28, w=212
   ================================ */
.coming-soon {
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 6.4px;
  text-transform: uppercase;
}

.coming-soon .dots {
  display: inline-block;
  min-width: 1.5em;
  text-align: left;
}

/* ================================
   In-View Animations
   ================================ */

/* 初期状態: 非表示 */
.header,
.logo-anniversary,
.countdown-group,
.coming-soon {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* アニメーション後: 表示 */
.header.in-view,
.logo-anniversary.in-view,
.countdown-group.in-view,
.coming-soon.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ヘッダー: フェードイン + 上からスライド */
.header {
  transform: translateY(-30px);
}

.header.in-view {
  transform: translateY(0);
}

/* 80周年ロゴ: スケールアップ + フェードイン */
.logo-anniversary {
  transform: scale(0.8) translateY(20px);
}

.logo-anniversary.in-view {
  transform: scale(1) translateY(0);
}

/* カウントダウン: 順番にフェードイン */
.countdown-group:nth-child(1) { transition-delay: 0.3s; }
.countdown-group:nth-child(2) { transition-delay: 0.45s; }
.countdown-group:nth-child(3) { transition-delay: 0.6s; }
.countdown-group:nth-child(4) { transition-delay: 0.75s; }

/* COMING SOON: 最後にフェードイン */
.coming-soon {
  transition-delay: 0.9s;
}

/* ================================
   Responsive - SP (390px)
   Figma SPデザイン準拠
   ================================ */
@media (max-width: 767px) {
  /* SP: 背景画像切り替え */
  .bg-image-pc {
    display: none;
  }

  .bg-image-sp {
    display: block;
  }

  /* ヘッダー：中央配置 */
  .header {
    top: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
  }

  .header.in-view {
    transform: translateX(-50%) translateY(0);
  }

  .logo-company {
    width: 134px;
  }

  /* 80周年ロゴ: w=215 */
  .logo-anniversary {
    width: 215px;
    margin-bottom: 40px;
    transform: scale(0.8) translateY(20px);
  }

  .logo-anniversary.in-view {
    transform: scale(1) translateY(0);
  }

  /* カウントダウン: 全体w=271, 各ボックスw=63, 間隔約6px */
  .countdown {
    gap: 6px;
    margin-bottom: 32px;
  }

  /* ボックス: w=63, h=44 */
  .flip-unit {
    width: 63px;
    height: 44px;
    border-radius: 4px;
  }

  .flip-unit .flip-top {
    border-radius: 4px 4px 0 0;
  }

  .flip-unit .flip-bottom {
    border-radius: 0 0 4px 4px;
  }

  /* 数字サイズ調整 */
  .digit {
    font-size: 30px;
    width: 18px;
  }

  /* ラベル: 高さ約4.3px */
  .countdown-label {
    font-size: 6px;
    margin-top: 4px;
  }

  /* COMING SOON: font-size=28 */
  .coming-soon {
    font-size: 28px;
    letter-spacing: 5.6px;
    transform: translateY(30px);
  }

  .coming-soon.in-view {
    transform: translateY(0);
  }

  /* カウントダウングループ */
  .countdown-group {
    transform: translateY(30px);
  }

  .countdown-group.in-view {
    transform: translateY(0);
  }
}

/* ================================
   Responsive - Tablet
   ================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .logo-company {
    width: 134px;
  }

  .logo-anniversary {
    width: 220px;
    margin-bottom: 38px;
  }

  .flip-unit {
    width: 72px;
    height: 50px;
    border-radius: 5px;
  }

  .flip-unit .flip-top {
    border-radius: 5px 5px 0 0;
  }

  .flip-unit .flip-bottom {
    border-radius: 0 0 5px 5px;
  }

  .digit {
    font-size: 34px;
    width: 21px;
  }

  .countdown-label {
    font-size: 7px;
  }

  .coming-soon {
    font-size: 30px;
    letter-spacing: 6px;
  }
}