/* ==========================================================================
   ANIMATIONS.CSS — senojflags.com
   Keyframes, transition timing, and hover/interactive states. GSAP (see
   assets/js/animations.js) drives entrance/scroll animations by animating
   opacity/transform directly via JS on elements tagged [data-sfl-reveal]
   and [data-sfl-reveal-section] — the CSS below sets their *initial*
   hidden state so there's no flash-of-unstyled-content before GSAP runs,
   and owns every hover/click micro-interaction that doesn't need
   scroll-triggering.
   ========================================================================== */

[data-sfl-reveal] {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}

[data-sfl-reveal-section] {
	opacity: 0;
	transform: translateY(32px);
	will-change: opacity, transform;
}

.sfl-card {
	opacity: 0;
	transform: translateY(16px);
	will-change: opacity, transform;
}

html.no-js [data-sfl-reveal],
html.no-js [data-sfl-reveal-section],
html.no-js .sfl-card {
	opacity: 1;
	transform: none;
}

.sfl-button {
	transition: transform 0.3s var(--sfl-ease-spring), opacity 0.2s var(--sfl-ease);
}

.sfl-button:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

.sfl-button:active {
	transform: translateY(0);
}

.sfl-icon-btn {
	transition: background 0.2s var(--sfl-ease), transform 0.2s var(--sfl-ease-spring);
}

.sfl-icon-btn:active {
	transform: scale(0.92);
}

.sfl-mode-toggle svg {
	transition: transform 0.4s var(--sfl-ease-spring);
}

.sfl-mode-toggle:hover svg {
	transform: rotate(20deg);
}

.sfl-header {
	transition: background-color 0.3s var(--sfl-ease), border-color 0.3s var(--sfl-ease), backdrop-filter 0.3s var(--sfl-ease);
}

.sfl-header.is-scrolled {
	background: var(--sfl-header-bg);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom-color: var(--sfl-border);
}

.sfl-nav__list a {
	transition: color 0.2s var(--sfl-ease);
}

.sfl-nav__list a::after {
	transition: transform 0.3s var(--sfl-ease-spring);
}

.sfl-search-bar {
	transition: max-height 0.4s var(--sfl-ease), border-color 0.4s var(--sfl-ease);
}

.sfl-mobile-nav {
	transition: max-height 0.35s var(--sfl-ease);
}

.sfl-menu-toggle span {
	transition: transform 0.3s var(--sfl-ease), opacity 0.3s var(--sfl-ease);
}

.sfl-menu-toggle.is-active span:nth-child(1) {
	transform: translateY(5.6px) rotate(45deg);
}

.sfl-menu-toggle.is-active span:nth-child(2) {
	opacity: 0;
}

.sfl-menu-toggle.is-active span:nth-child(3) {
	transform: translateY(-5.6px) rotate(-45deg);
}

.sfl-card__inner {
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.sfl-card:hover .sfl-card__inner,
.sfl-card:focus .sfl-card__inner {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35);
}

.sfl-card__overlay {
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.sfl-card:hover .sfl-card__overlay,
.sfl-card:focus .sfl-card__overlay {
	transform: translateY(0);
	opacity: 1;
}

.sfl-slider-nav {
	transition: background 0.25s var(--sfl-ease), color 0.25s var(--sfl-ease), transform 0.25s var(--sfl-ease-spring), opacity 0.25s var(--sfl-ease);
}

.sfl-slider-nav:hover {
	transform: scale(1.08);
}

.sfl-social-icon {
	transition: background 0.2s var(--sfl-ease), color 0.2s var(--sfl-ease), transform 0.25s var(--sfl-ease-spring);
}

.sfl-social-icon:hover {
	transform: translateY(-2px);
}

.sfl-footer__col-list a {
	transition: color 0.2s var(--sfl-ease);
}

.sfl-map__region {
	transition: fill 0.25s var(--sfl-ease), stroke 0.25s var(--sfl-ease);
}

.sfl-map__tooltip {
	transition: opacity 0.2s var(--sfl-ease);
}

.sfl-modal {
	transition: opacity 0.3s var(--sfl-ease), visibility 0.3s var(--sfl-ease);
}

.sfl-modal__card {
	transform: translateY(24px) scale(0.96);
	transition: transform 0.4s var(--sfl-ease-spring);
}

.sfl-modal.is-open .sfl-modal__card {
	transform: translateY(0) scale(1);
}

.sfl-modal__close {
	transition: background 0.2s var(--sfl-ease), color 0.2s var(--sfl-ease), transform 0.3s var(--sfl-ease-spring);
}

.sfl-modal__close:hover {
	transform: rotate(90deg);
}

@keyframes sfl-float-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(14px, -18px) rotate(3deg); }
}

.sfl-hero__floating-flag {
	animation: sfl-float-drift 9s ease-in-out infinite;
}

@keyframes sfl-glow-pulse {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.06); }
}

.sfl-hero__glow,
.sfl-footer__glow {
	animation: sfl-glow-pulse 10s ease-in-out infinite;
}

.sfl-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--sfl-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.4s var(--sfl-ease), visibility 0.4s var(--sfl-ease);
}

.sfl-loading-overlay.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sfl-loading-spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2.5px solid var(--sfl-border);
	border-top-color: var(--sfl-text);
	animation: sfl-spin 0.7s linear infinite;
}

@keyframes sfl-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-sfl-reveal],
	[data-sfl-reveal-section],
	.sfl-card {
		opacity: 1 !important;
		transform: none !important;
	}
}