/* ==========================================================================
   Hero Animation - SVG logo reveal with staggered CSS-only animations (~2.5s)
   ========================================================================== */

/* Screen-reader only (keeps h1 accessible while logo is visible) */
.cyl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Logo container */
.cyl-hero-logo {
	max-width: clamp(280px, 50vmin, 480px);
	margin-inline: auto;
}

.cyl-hero-logo svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Base state: everything starts invisible
   ========================================================================== */

.cyl-logo-bracket-tl,
.cyl-logo-bracket-br,
.cyl-logo-connect,
.cyl-logo-your,
.cyl-logo-life,
.cyl-logo-line rect,
.cyl-logo-url,
.cyl-hero__tagline {
	opacity: 0;
}

/* ==========================================================================
   Animations with staggered delays
   ========================================================================== */

/* Brackets: slide from corners (0s) */
.cyl-logo-bracket-tl {
	animation: cyl-slide-tl 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

.cyl-logo-bracket-br {
	animation: cyl-slide-br 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

/* CONNECT: fade up (0.4s) */
.cyl-logo-connect {
	animation: cyl-fade-up-svg 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

/* YOUR: fade from left (0.6s) */
.cyl-logo-your {
	animation: cyl-fade-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* LIFE: fade from right (0.6s) */
.cyl-logo-life {
	animation: cyl-fade-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* Dividing line: scaleX from center (1.0s) */
.cyl-logo-line rect {
	transform-box: fill-box;
	transform-origin: center;
	animation: cyl-line-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

/* URL: fade up (1.3s) */
.cyl-logo-url {
	animation: cyl-fade-up-svg 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

/* Tagline: enters after logo animation completes (~2.0s URL done → 2.2s delay) */
.cyl-hero__tagline {
	margin-top: 1.5rem;
	transform: translateY(24px);
	animation: cyl-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.2s forwards;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes cyl-slide-tl {
	from {
		opacity: 0;
		transform: translate(-20px, -20px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes cyl-slide-br {
	from {
		opacity: 0;
		transform: translate(20px, 20px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes cyl-fade-up-svg {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cyl-fade-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cyl-fade-left {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes cyl-fade-right {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes cyl-line-draw {
	from {
		opacity: 1;
		transform: scaleX(0);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

/* ==========================================================================
   Responsive: phones portrait (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {
	.cyl-hero-logo {
		max-width: 72vw;
	}

	.cyl-hero__tagline {
		margin-top: 1rem;
		font-size: clamp(0.875rem, 3.5vw, 1.125rem);
	}
}

/* ==========================================================================
   Responsive: tablets portrait (481–768px)
   ========================================================================== */

@media (min-width: 481px) and (max-width: 768px) {
	.cyl-hero-logo {
		max-width: clamp(260px, 42vmin, 380px);
	}

	.cyl-hero__tagline {
		margin-bottom: 1.5rem;
	}
}

/* ==========================================================================
   Responsive: landscape tablets / short viewports (height ≤ 700px)
   ========================================================================== */

@media (orientation: landscape) and (max-height: 700px) and (min-height: 501px) {
	.cyl-hero-logo {
		max-width: min(38vh, 300px);
	}

	.cyl-hero__tagline {
		margin-bottom: 1rem;
	}
}

/* ==========================================================================
   Responsive: landscape phones (height ≤ 500px)
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
	.cyl-hero-logo {
		max-width: min(32vh, 200px);
	}

	.cyl-hero__tagline {
		margin-top: 0.5rem;
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   Responsive: very short landscape (height ≤ 400px)
   ========================================================================== */

@media (max-height: 400px) and (orientation: landscape) {
	.cyl-hero-logo {
		max-width: min(26vh, 140px);
	}

	.cyl-hero__tagline {
		margin-top: 0.375rem;
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   Reduced motion: skip all animations, show everything immediately
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.cyl-logo-bracket-tl,
	.cyl-logo-bracket-br,
	.cyl-logo-connect,
	.cyl-logo-your,
	.cyl-logo-life,
	.cyl-logo-line rect,
	.cyl-logo-url,
	.cyl-hero__tagline {
		opacity: 1;
		transform: none;
		animation: none;
	}
}