/* Kurepochi — front-end button unit */

.kurepochi-unit {
	margin: 1.5em 0;
	text-align: center;
}

/* Scoped through .kurepochi-unit (not a bare .kurepochi-microcopy selector),
   plus !important on the margin. Compound-class specificity alone wasn't
   enough to beat some themes' own paragraph spacing (confirmed on STORK19's
   ".entry-content p" pushing the microcopy well away from the button), so
   the margin is pinned explicitly. */
.kurepochi-unit .kurepochi-microcopy {
	margin: 0 0 .35em !important;
	font-size: .95em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--kurepochi-microcopy-color, #b23a00);
}

.kurepochi-unit .kurepochi-microcopy--bottom {
	margin: .35em 0 0 !important;
}

.kurepochi-button {
	display: inline-block;
	max-width: 100%;
	padding: .85em 2em;
	border-radius: var(--kurepochi-btn-radius, 8px);
	background: var(--kurepochi-btn-bg, #006fbb);
	color: var(--kurepochi-btn-color, #fff);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

.kurepochi-button:hover,
.kurepochi-button:focus {
	color: var(--kurepochi-btn-color, #fff);
}

/* Hover animation presets (Design tab → Button animation). Exactly one
   kurepochi-anim-* class is present on .kurepochi-unit (see Helper::animation_choices()). */

/* Default: lifts slightly on hover, then visibly sinks/compresses on
   :active (mouse-down / tap) — a tactile "pushed in" feel. */
.kurepochi-anim-press .kurepochi-button:hover,
.kurepochi-anim-press .kurepochi-button:focus {
	filter: brightness(0.95);
	transform: translateY(-1px);
}

.kurepochi-anim-press .kurepochi-button:active {
	filter: brightness(0.85);
	transform: translateY(1px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.kurepochi-anim-lift .kurepochi-button:hover,
.kurepochi-anim-lift .kurepochi-button:focus {
	filter: brightness(0.9);
	transform: translateY(-1px);
}

.kurepochi-anim-scale .kurepochi-button:hover,
.kurepochi-anim-scale .kurepochi-button:focus {
	filter: brightness(0.95);
	transform: scale(1.05);
}

.kurepochi-anim-shadow .kurepochi-button:hover,
.kurepochi-anim-shadow .kurepochi-button:focus {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* Always-on idle effects (Design tab → 通常時のエフェクト). Independent of the
   hover animation above — runs continuously to draw the eye before any
   interaction. Exactly one kurepochi-idle-* class is present on .kurepochi-unit
   (see Helper::idle_effect_choices()). Paused for users who asked for less
   motion. */
.kurepochi-idle-shine .kurepochi-button {
	position: relative;
	overflow: hidden;
}

.kurepochi-idle-shine .kurepochi-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 60%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	animation: kurepochi-shine 2.6s ease-in-out infinite;
}

@keyframes kurepochi-shine {
	0%   { left: -150%; }
	40%  { left: 150%; }
	100% { left: 150%; }
}

.kurepochi-idle-glow .kurepochi-button {
	animation: kurepochi-glow 1.8s ease-in-out infinite;
}

@keyframes kurepochi-glow {
	0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
	50%      { box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 0 16px 4px rgba(255, 255, 255, .4), 0 0 0 8px rgba(0, 0, 0, .06); }
}

@media (prefers-reduced-motion: reduce) {
	.kurepochi-idle-shine .kurepochi-button::after,
	.kurepochi-idle-glow .kurepochi-button {
		animation: none;
	}
}

/* Powered-by credit: visually subdued, always last (spec §4). */
.kurepochi-powered {
	margin: .9em 0 0;
	font-size: .72em;
	color: #9aa0a6;
}
.kurepochi-powered a {
	color: inherit;
	text-decoration: none;
}
.kurepochi-powered a:hover {
	text-decoration: underline;
}