/* ==========================================================================
   Jet Stream — カウントダウンタイマー（拡張版）
   CSS 変数 --jsc-* をインラインスタイルで上書きすることで
   ショートコード属性のカラー設定が反映される。
   ========================================================================== */

/* ── キーフレーム定義 ── */
@keyframes jsc-flip {
	0%   { transform: scaleY( 0.55 ); opacity: 0.2; }
	60%  { transform: scaleY( 1.06 ); opacity: 1;   }
	100% { transform: scaleY( 1 );    opacity: 1;   }
}

@keyframes jsc-glow-pulse {
	0%, 100% { text-shadow: 0 0 6px var( --jsc-accent ), 0 0 12px var( --jsc-accent ); }
	50%       { text-shadow: 0 0 10px var( --jsc-accent ), 0 0 20px var( --jsc-accent ), 0 0 30px var( --jsc-accent ); }
}

/* ── テーマ非依存リセット ── */
.js-countdown,
.js-countdown * {
	box-sizing: border-box;
}

/* ── hidden 属性サポート（古いブラウザ対策） ── */
.js-countdown [hidden] {
	display: none !important;
}

/* ==========================================================================
   CARD タイプ（デフォルト）
   ========================================================================== */

.js-countdown--card {
	--jsc-bg:     #071E4A;
	--jsc-text:   rgba( 255, 255, 255, 0.7 );
	--jsc-num:    #F59E0B;
	--jsc-accent: #0057D9;
	--jsc-font:   'Noto Sans JP', sans-serif;
	--jsc-radius: 0.75rem;

	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.75rem;
	padding:        2rem 1.5rem;
	background:     var( --jsc-bg );
	border-radius:  var( --jsc-radius );
	box-shadow:     0 4px 24px rgba( 0, 0, 0, 0.4 );
	font-family:    var( --jsc-font );
	color:          var( --jsc-text );
	text-align:     center;
}

.js-countdown--card .js-countdown__label {
	margin:          0;
	font-size:       0.9375rem;
	font-weight:     600;
	letter-spacing:  0.08em;
	color:           var( --jsc-text );
	text-transform:  uppercase;
}

.js-countdown--card .js-countdown__cards {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             0.75rem;
}

.js-countdown--card .js-countdown__card {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.375rem;
	min-width:      4.5rem;
	padding:        0.75rem 1rem;
	background:     var( --jsc-accent );
	border-radius:  calc( var( --jsc-radius ) * 0.65 );
	box-shadow:     0 2px 12px rgba( 0, 0, 0, 0.35 );
	position:       relative;
}

.js-countdown--card .js-countdown__number {
	display:              block;
	font-size:            clamp( 2.25rem, 5vw, 3.5rem );
	font-weight:          800;
	line-height:          1;
	font-variant-numeric: tabular-nums;
	color:                var( --jsc-num );
}

.js-countdown--card .js-countdown__unit {
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	color:          var( --jsc-text );
	text-transform: uppercase;
}

.js-countdown--card .js-countdown__expired {
	margin:         0;
	padding:        0.5rem 1.25rem;
	font-size:      1.125rem;
	font-weight:    700;
	color:          var( --jsc-num );
	background:     rgba( 255, 255, 255, 0.08 );
	border-radius:  0.5rem;
	letter-spacing: 0.05em;
}

/* カード間セパレータ（カードの外右側） */
.js-countdown--card .js-countdown__card:not( :last-child )::after {
	content:       ':';
	position:      absolute;
	right:         calc( -0.75rem - 0.4rem );
	top:           50%;
	transform:     translateY( -60% );
	font-size:     2rem;
	font-weight:   800;
	color:         var( --jsc-num );
	pointer-events: none;
}

/* ==========================================================================
   DIGITAL タイプ（7セグメント風）
   ========================================================================== */

.js-countdown--digital {
	--jsc-bg:     #0a0a0a;
	--jsc-text:   #666666;
	--jsc-num:    #F59E0B;
	--jsc-accent: #F59E0B;
	--jsc-font:   'Orbitron', sans-serif;
	--jsc-radius: 0.5rem;

	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.75rem;
	padding:        2rem 1.5rem;
	background:     var( --jsc-bg );
	border-radius:  var( --jsc-radius );
	font-family:    var( --jsc-font );
	color:          var( --jsc-text );
	text-align:     center;
}

.js-countdown--digital .js-countdown__label {
	margin:         0;
	font-size:      0.75rem;
	font-weight:    400;
	letter-spacing: 0.25em;
	color:          var( --jsc-text );
	text-transform: uppercase;
}

.js-countdown--digital .js-countdown__cards {
	display:     flex;
	align-items: center;
	gap:         0.25rem;
}

.js-countdown--digital .js-countdown__card {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.25rem;
}

.js-countdown--digital .js-countdown__number {
	display:              block;
	font-size:            clamp( 2.5rem, 6vw, 4rem );
	font-weight:          700;
	line-height:          1;
	font-variant-numeric: tabular-nums;
	color:                var( --jsc-num );
	/* 控えめなグロー */
	text-shadow:
		0 0 6px  rgba( 245, 158, 11, 0.5 ),
		0 0 14px rgba( 245, 158, 11, 0.25 );
	letter-spacing:       0.05em;
}

.js-countdown--digital .js-countdown__unit {
	font-size:      0.6rem;
	font-weight:    400;
	letter-spacing: 0.2em;
	color:          var( --jsc-text );
	text-transform: uppercase;
}

/* セパレータ「:」 */
.js-countdown--digital .js-countdown__sep {
	display:     block;
	font-size:   clamp( 2rem, 4vw, 3rem );
	font-weight: 700;
	color:       var( --jsc-accent );
	line-height: 1;
	padding:     0 0.1em;
	align-self:  flex-start;
	margin-top:  0.1em;
	text-shadow:
		0 0 6px  rgba( 245, 158, 11, 0.5 ),
		0 0 14px rgba( 245, 158, 11, 0.25 );
	transition: opacity 0.1s ease;
}

/* JS で付け替えるクラス */
.js-countdown--digital .js-countdown__sep--hidden {
	opacity: 0;
}

.js-countdown--digital .js-countdown__expired {
	margin:         0;
	padding:        0.5rem 1rem;
	font-size:      1rem;
	font-weight:    700;
	color:          var( --jsc-num );
	letter-spacing: 0.1em;
	text-shadow:
		0 0 6px  rgba( 245, 158, 11, 0.5 ),
		0 0 14px rgba( 245, 158, 11, 0.25 );
}

/* ==========================================================================
   MINIMAL タイプ
   ========================================================================== */

.js-countdown--minimal {
	--jsc-bg:     transparent;
	--jsc-text:   #64748B;
	--jsc-num:    #071E4A;
	--jsc-accent: #CBD5E1;
	--jsc-font:   'Noto Sans JP', sans-serif;

	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.5rem;
	padding:        1.5rem 1rem;
	background:     var( --jsc-bg );
	font-family:    var( --jsc-font );
	color:          var( --jsc-text );
	text-align:     center;
}

.js-countdown--minimal .js-countdown__label {
	margin:         0;
	font-size:      0.8125rem;
	font-weight:    400;
	letter-spacing: 0.1em;
	color:          var( --jsc-text );
	border-bottom:  1px solid var( --jsc-accent );
	padding-bottom: 0.5rem;
	width:          100%;
}

.js-countdown--minimal .js-countdown__cards {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             1.5rem;
}

.js-countdown--minimal .js-countdown__card {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.125rem;
}

.js-countdown--minimal .js-countdown__number {
	display:              block;
	font-size:            clamp( 3rem, 7vw, 5rem );
	font-weight:          800;
	line-height:          1;
	font-variant-numeric: tabular-nums;
	color:                var( --jsc-num );
	letter-spacing:       -0.02em;
}

.js-countdown--minimal .js-countdown__unit {
	font-size:      0.6875rem;
	font-weight:    400;
	letter-spacing: 0.12em;
	color:          var( --jsc-text );
	text-transform: uppercase;
	border-top:     1px solid var( --jsc-accent );
	padding-top:    0.25rem;
	width:          100%;
	text-align:     center;
}

.js-countdown--minimal .js-countdown__expired {
	margin:         0;
	font-size:      1.125rem;
	font-weight:    600;
	color:          var( --jsc-text );
	letter-spacing: 0.05em;
}

/* ==========================================================================
   BANNER タイプ
   ========================================================================== */

.js-countdown--banner {
	--jsc-bg:     #0057D9;
	--jsc-text:   rgba( 255, 255, 255, 0.85 );
	--jsc-num:    #ffffff;
	--jsc-accent: rgba( 255, 255, 255, 0.35 );
	--jsc-font:   'Noto Sans JP', sans-serif;

	display:    block;
	background: var( --jsc-bg );
	padding:    1rem 1.5rem;
	font-family: var( --jsc-font );
	color:       var( --jsc-text );
}

.js-countdown--banner .js-countdown__banner-inner {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             1rem 2rem;
	max-width:       72rem;
	margin:          0 auto;
}

.js-countdown--banner .js-countdown__label {
	margin:         0;
	font-size:      1rem;
	font-weight:    700;
	letter-spacing: 0.04em;
	color:          var( --jsc-num );
	white-space:    nowrap;
}

.js-countdown--banner .js-countdown__cards {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
}

.js-countdown--banner .js-countdown__card {
	display:     flex;
	align-items: baseline;
	gap:         0.2em;
}

.js-countdown--banner .js-countdown__number {
	display:              inline-block;
	font-size:            clamp( 1.5rem, 3vw, 2rem );
	font-weight:          800;
	line-height:          1;
	font-variant-numeric: tabular-nums;
	color:                var( --jsc-num );
}

.js-countdown--banner .js-countdown__unit {
	font-size:   0.75rem;
	font-weight: 600;
	color:       var( --jsc-text );
}

/* カード間区切り */
.js-countdown--banner .js-countdown__card:not( :last-child )::after {
	content:    ' /';
	font-size:  1rem;
	color:      var( --jsc-accent );
	margin-left: 0.35rem;
}

/* CTA ボタン */
.js-countdown--banner .js-countdown__cta {
	display:         inline-block;
	padding:         0.5em 1.25em;
	background:      var( --jsc-num );
	color:           var( --jsc-bg );
	font-size:       0.875rem;
	font-weight:     700;
	letter-spacing:  0.04em;
	text-decoration: none;
	border-radius:   0.375rem;
	white-space:     nowrap;
	transition:      opacity 0.2s ease;
}

.js-countdown--banner .js-countdown__cta:hover,
.js-countdown--banner .js-countdown__cta:focus {
	opacity: 0.85;
	outline: 2px solid var( --jsc-num );
	outline-offset: 2px;
}

.js-countdown--banner .js-countdown__expired {
	margin:         0;
	font-size:      1rem;
	font-weight:    700;
	color:          var( --jsc-num );
	text-align:     center;
}

/* ==========================================================================
   フリップアニメーション（全タイプ共通）
   ========================================================================== */

.js-countdown__number--flip {
	animation: jsc-flip 0.25s ease forwards;
}

/* ==========================================================================
   reduced-motion: アニメーション無効化
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.js-countdown__number--flip,
	.js-countdown--digital .js-countdown__sep {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* タブレット */
@media ( max-width: 768px ) {
	.js-countdown--card .js-countdown__card:not( :last-child )::after {
		display: none;
	}

	.js-countdown--banner .js-countdown__banner-inner {
		gap: 0.75rem 1rem;
	}
}

/* モバイル */
@media ( max-width: 480px ) {
	/* card */
	.js-countdown--card .js-countdown__card {
		min-width:  3.5rem;
		padding:    0.5rem 0.75rem;
	}

	/* digital */
	.js-countdown--digital .js-countdown__cards {
		gap: 0.125rem;
	}

	/* minimal */
	.js-countdown--minimal .js-countdown__cards {
		gap: 1rem;
	}

	/* banner: 縦積み */
	.js-countdown--banner .js-countdown__banner-inner {
		flex-direction: column;
		align-items:    center;
		text-align:     center;
	}
}