/* ========================================
   Wingsoft — Sections & Responsive
   Hero · Section Layout · About · Services · Contact · Footer · Animations · Responsive
   ======================================== */

/* ---------- Hero Section ---------- */

.hero-section {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--ios-section-padding) 24px var(--ios-section-padding);
	overflow: hidden;
	background: linear-gradient(150deg, var(--ios-hero-from) 0%, var(--ios-hero-mid) 50%, var(--ios-hero-from) 100%);
}

.hero-section__bg-wrap {
	position: absolute;
	top: -15%;
	left: 0;
	right: 0;
	height: 130%;
	pointer-events: none;
	will-change: transform;
}

.hero-section__bg {
	position: absolute;
	inset: 0;
	background-image: url("../images/tech-abstract.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.hero-section__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--ios-blue-rgb), 0.18) 0%, transparent 70%),
		radial-gradient(ellipse 60% 50% at 80% 80%, rgba(var(--ios-blue-rgb), 0.08) 0%, transparent 60%),
		linear-gradient(180deg, rgba(var(--ios-bg-rgb), 0.6) 0%, rgba(var(--ios-bg-rgb), 0.85) 100%);
	pointer-events: none;
}

.hero-section__content {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.hero-section__content .ios-large-title {
	font-size: clamp(42px, 8vw, 72px);
	letter-spacing: -0.5px;
	margin-bottom: 40px;
}

.hero-logo-wrap {
	position: relative;
	display: inline-block;
	line-height: 1;
}

.hero-logo-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ios-dark);
	-webkit-mask-image: var(--logo-mask);
	mask-image: var(--logo-mask);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	filter: drop-shadow(0 4px 20px rgba(var(--ios-blue-rgb), 0.3));
}

.hero-logo {
	display: block;
	max-width: 312px;
	height: auto;
	opacity: 0;
}

.hero-section__subtitle {
	font-size: clamp(18px, 3vw, 24px);
	font-weight: 300;
	color: var(--ios-gray);
	line-height: 1.5;
	margin-bottom: 40px;
}

/* ---------- Section Layout ---------- */

.ios-section {
	padding: var(--ios-section-padding) 0;
	position: relative;
}

.ios-section--full {
	min-height: calc(100dvh - var(--ios-nav-height));
	padding: var(--ios-section-padding) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ios-section--full > .ios-container {
	width: 100%;
}

.ios-section__title {
	text-align: center;
	margin-bottom: 48px;
}

.ios-section--full .ios-section__title {
	margin-bottom: 40px;
}

/* ---------- Light Section ---------- */

.ios-section.ios-section--light {
	background: var(--ios-light-bg);
}

.ios-section--light .ios-section__title {
	color: var(--ios-light-text);
}

.ios-section--light .ios-card--glass {
	background: var(--ios-light-card-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid var(--ios-light-card-border);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ios-section--light .ios-card--glass p,
.ios-section--light .ios-card--glass h1,
.ios-section--light .ios-card--glass h2,
.ios-section--light .ios-card--glass h3,
.ios-section--light .ios-card--glass .ios-body,
.ios-section--light .ios-card--glass .ios-callout,
.ios-section--light .ios-card--glass .ios-title-3 {
	color: var(--ios-light-text);
}

.ios-section--light .about-section__image-card {
	background: var(--ios-light-card-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid var(--ios-light-card-border);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ios-section--light .about-section__pillar-icon {
	background: var(--ios-blue-light);
	color: var(--ios-blue);
}

.ios-section--light .contact-tabs__btn {
	background: var(--ios-dark);
	border-color: var(--ios-light-border);
	color: var(--ios-light-text-secondary);
}

.ios-section--light .contact-tabs__btn:hover {
	background: var(--ios-light-tab-hover);
	color: var(--ios-light-text);
}

.ios-section--light .contact-tabs__btn.is-active {
	background: linear-gradient(135deg, var(--ios-blue-dark) 0%, var(--ios-blue) 100%);
	border-color: transparent;
	color: var(--ios-white);
}

.ios-section--light .contact-section__list li {
	color: var(--ios-light-text-secondary);
}

.ios-section--light .ios-input {
	background: var(--ios-light-card-bg);
	border-color: var(--ios-light-border);
	color: var(--ios-light-text);
}

.ios-section--light .ios-input::placeholder {
	color: var(--ios-gray);
}

.ios-section--light .ios-input:focus {
	border-color: var(--ios-blue);
	box-shadow: 0 0 0 3px rgba(var(--ios-blue-rgb), 0.15);
}

.ios-section--light .ios-textarea {
	background: var(--ios-light-card-bg);
	border-color: var(--ios-light-border);
	color: var(--ios-light-text);
}

.ios-section--light .ios-textarea::placeholder {
	color: var(--ios-gray);
}

.ios-section--light .ios-textarea:focus {
	border-color: var(--ios-blue);
	box-shadow: 0 0 0 3px rgba(var(--ios-blue-rgb), 0.15);
}

.ios-section--light .process-section__num {
	color: var(--ios-blue);
	opacity: 0.5;
}

.ios-section--light .tech-carousel__badge {
	background: var(--ios-light-card-bg);
	border-color: var(--ios-light-card-border);
	color: var(--ios-light-text-secondary);
}

.ios-section--light .tech-carousel__badge:hover {
	border-color: var(--ios-blue);
	color: var(--ios-blue);
}

.ios-section--light .contact-section__file-label {
	background: var(--ios-light-card-bg);
	border-color: var(--ios-light-border);
	color: var(--ios-light-text-secondary);
}

.ios-section--light .contact-section__file-label:hover {
	border-color: var(--ios-blue);
	color: var(--ios-blue);
	background: rgba(var(--ios-blue-rgb), 0.04);
}

.ios-section--light .ios-btn--outline {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ios-section--light .ios-btn--outline:hover {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.25);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

/* ---------- About Section ---------- */

.about-section {
	background: var(--ios-bg);
}

.about-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.about-section__image-card {
	position: relative;
	border-radius: var(--ios-card-radius, 20px);
	overflow: hidden;
	background: var(--ios-card-glass-bg, rgba(var(--ios-white-rgb), 0.06));
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: var(--ios-card-border, 1px solid rgba(var(--ios-white-rgb), 0.1));
	box-shadow: var(--ios-card-shadow, 0 8px 32px rgba(0, 0, 0, 0.2));
}

.about-section__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* About pillars */
.about-section__pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.about-section__pillar {
	text-align: center;
	padding: 32px 20px;
}

.about-section__pillar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--ios-blue-light);
	border-radius: 16px;
	margin-bottom: 16px;
}

.about-section__pillar-icon svg {
	color: var(--ios-blue);
}

.about-section__pillar .ios-title-3 {
	margin-bottom: 8px;
}

/* ---------- Services Section ---------- */

.services-section {
	position: relative;
	overflow: hidden;
	background: var(--ios-bg-alt);
}

.services-section__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.services-section__card {
	text-align: center;
	padding: 40px 28px;
}

.services-section__icon {
	margin-bottom: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--ios-blue-light);
	border-radius: 18px;
}

.services-section__icon svg {
	color: var(--ios-blue);
}

.services-section__card .ios-title-3 {
	margin-bottom: 12px;
}

/* ---------- Contact Section ---------- */

.contact-section {
	position: relative;
	background: var(--ios-bg);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-bottom: 0;
}

.contact-section > * {
	position: relative;
	z-index: 1;
}

.contact-section > .ios-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-section > .ios-footer {
	margin-top: 40px;
}

.contact-section__grid {
	display: grid;
	grid-template-columns: 0.4fr 0.6fr;
	gap: 24px;
	align-items: start;
}

.contact-info { display: none; }
.contact-info.is-active { display: block; }
.contact-form { display: none; }
.contact-form.is-active { display: block; }

.contact-section__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ios-row-gap);
}

.contact-section__row--spaced {
	margin-bottom: var(--ios-row-spaced);
}

.contact-section__row .ios-input {
	flex: 1;
}

.contact-section__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 16px;
}

.contact-section__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	color: var(--ios-gray);
}

.contact-section__list svg {
	flex-shrink: 0;
	color: var(--ios-blue);
}

.contact-section__form {
	display: flex;
	flex-direction: column;
	gap: var(--ios-form-gap);
	margin-top: 16px;
}

/* ---------- Footer ---------- */

.ios-footer {
	flex-shrink: 0;
	background: var(--ios-bg-alt);
	border-top: 1px solid rgba(var(--ios-white-rgb), 0.04);
}

.ios-footer__inner {
	max-width: var(--ios-container);
	margin: 0 auto;
	padding: 48px 24px 0;
}

.ios-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
}

.ios-footer__logo-wrap {
	position: relative;
	display: inline-block;
	line-height: 1;
	height: 40px;
}

.ios-footer__logo-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ios-dark);
	-webkit-mask-image: var(--logo-mask);
	mask-image: var(--logo-mask);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
}

.ios-footer__logo {
	display: block;
	height: 40px;
	width: auto;
	opacity: 0;
}

.ios-footer__desc {
	font-size: 14px;
	color: var(--ios-gray);
	line-height: 1.6;
	margin-top: 12px;
}

.ios-footer__heading {
	font-size: 13px;
	font-weight: 600;
	color: var(--ios-dark);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

.ios-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ios-footer__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ios-gray);
}

.ios-footer__list a {
	font-size: 14px;
	color: var(--ios-gray);
	transition: color var(--ios-transition);
}

.ios-footer__list a:hover {
	color: var(--ios-dark);
}

.ios-footer__list svg {
	flex-shrink: 0;
	color: var(--ios-blue);
}

.ios-footer__social-links {
	display: flex;
	gap: 12px;
}

.ios-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(var(--ios-white-rgb), 0.04);
	color: var(--ios-gray);
	transition: all var(--ios-transition);
}

.ios-footer__social-link:hover {
	background: var(--ios-blue-light);
	color: var(--ios-blue);
	transform: translateY(-2px);
}

.ios-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding: 20px 0;
	border-top: 1px solid rgba(var(--ios-white-rgb), 0.04);
}

.ios-footer__bottom p {
	font-size: 13px;
	color: var(--ios-gray-2);
}

.ios-footer__legal {
	display: flex;
	gap: 16px;
}

.ios-footer__legal a {
	font-size: 13px;
	color: var(--ios-gray-2);
	transition: color var(--ios-transition);
}

.ios-footer__legal a:hover {
	color: var(--ios-dark);
}

.ios-footer p {
	font-size: 14px;
	color: var(--ios-gray);
	letter-spacing: -0.02px;
}

/* ---------- Animations ---------- */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slowZoom {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

@keyframes fadeInBg {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Hero entrance */
.hero-section__content { animation: fadeInUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.hero-section__content .hero-section__subtitle { animation: fadeInUp 0.8s 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.hero-section__content .ios-btn { animation: fadeInUp 0.8s 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.hero-section__bg { animation: fadeInBg 1.5s ease-out both, slowZoom 20s ease-out both; }

/* Nav entrance */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.landing-page .ios-nav { animation: slideDown 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

/* ---------- Scroll Progress Bar ---------- */

.ios-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, var(--ios-blue), var(--ios-blue-hover));
	z-index: 1001;
	transition: width 0.1s linear;
}

.admin-bar .ios-progress-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ios-progress-bar {
		top: 46px;
	}
}

/* ---------- Section Dividers ---------- */

.about-section::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 40px;
	background: var(--ios-bg-alt);
	clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
	pointer-events: none;
}

.services-section::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 40px;
	background: var(--ios-bg);
	clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}

/* ---------- Process Carousel ---------- */

.process-section__carousel {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	max-width: 100%;
	min-height: 240px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}


.process-section__step {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	transition: left 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.process-section__carousel:not(.is-ready) .process-section__step {
	transition: none;
}

.process-section__step.is-active {
	z-index: 10;
}

.process-section__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ios-blue);
	color: var(--ios-white);
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: opacity, filter;
}

.process-section__carousel:not(.is-ready) .process-section__num {
	transition: none;
}

.process-section__title {
	margin-top: 70px;
	margin-bottom: 4px;
	text-align: center;
}

.process-section__card {
	padding: 24px 20px;
	margin-top: 12px;
	text-align: center;
	min-height: 160px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: transform, opacity, filter;
}

.process-section__carousel:not(.is-ready) .process-section__card {
	transition: none;
}

.process-section__card .ios-title-3 {
	margin-bottom: 8px;
}

/* Carousel controls */
.process-section__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}


.process-section__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.process-section__dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(var(--ios-white-rgb), 0.15);
	cursor: pointer;
	transition: all var(--ios-transition);
	padding: 0;
}

.process-section__dots button.is-active {
	background: var(--ios-blue);
	width: 24px;
	border-radius: 4px;
}

/* ---------- Tech Carousel Section ---------- */

.tech-carousel {
	margin-top: 32px;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.tech-carousel__track {
	display: flex;
	gap: 16px;
	width: max-content;
	will-change: transform;
}

.tech-carousel__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background: var(--ios-card-bg);
	backdrop-filter: blur(12px) saturate(1.4);
	-webkit-backdrop-filter: blur(12px) saturate(1.4);
	border: 1px solid var(--ios-glass-border);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ios-dark);
	flex-shrink: 0;
	transition: border-color 0.3s, color 0.3s;
}

.tech-carousel__badge:hover {
	border-color: var(--ios-blue);
	color: var(--ios-blue);
}

.tech-carousel__badge svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}



/* ---------- Page Section (Blog, Single, Page, 404, Search) ---------- */

.ios-section--page {
	padding: calc(var(--ios-nav-height) + var(--ios-section-padding)) 0 var(--ios-section-padding);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.about-section__grid,
	.about-section__pillars,
	.services-section__grid,
	.contact-section__grid,
	.blog-grid { grid-template-columns: 1fr; }

	.ios-layout { flex-direction: column; }
	.ios-sidebar { width: 100%; }

	.process-section__carousel {
		min-height: 300px;
		max-width: 100%;
	}

	.ios-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ios-large-title { font-size: 28px; }
	.ios-title-1 { font-size: 24px; }

	.ios-section { padding: var(--ios-section-padding) 0; }
	.ios-section__title { margin-bottom: 32px; }

	.contact-tabs { flex-wrap: wrap; }
	.contact-tabs__btn { flex: 1; text-align: center; }
}

@media (max-width: 768px) {
	:root { --ios-nav-height: 52px; }

	.ios-nav__inner {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.ios-nav__brand {
		margin-right: 0;
	}

	.ios-nav__list {
		position: fixed;
		top: var(--ios-nav-height);
		left: 0;
		right: 0;
		flex-direction: column;
		background: rgba(var(--ios-bg-rgb), 0.92);
		backdrop-filter: blur(32px);
		padding: 12px 24px 20px;
		gap: 4px;
		border-bottom: 1px solid rgba(var(--ios-white-rgb), 0.04);
		transform: translateY(-110%);
		opacity: 0;
		transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
		pointer-events: none;
	}

	.ios-nav__list.is-open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.ios-nav__list a {
		padding: 12px 14px;
		font-size: 16px;
		width: 100%;
	}

	.ios-nav__lang { display: none; }
	.ios-nav__lang-mobile .ios-nav__lang-btn { display: flex; }

	.ios-nav__actions {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.ios-nav__toggle { display: flex; }
	.ios-card { padding: 24px 20px; }

	.ios-footer__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ios-footer__inner {
		padding: 32px 24px 0;
	}

	.ios-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.ios-footer__legal {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ---------- Contact Form Messages ---------- */

.contact-form__msg {
	padding: 14px 18px;
	border-radius: var(--ios-radius-sm);
	font-size: 14px;
	line-height: 1.5;
	display: none;
}

.contact-form__msg--success {
	display: block;
	background: rgba(var(--ios-green-rgb), 0.08);
	color: var(--ios-green);
	border: 1px solid rgba(var(--ios-green-rgb), 0.4);
	box-shadow:
		0 0 10px rgba(var(--ios-green-rgb), 0.3),
		0 0 25px rgba(var(--ios-green-rgb), 0.15),
		inset 0 0 10px rgba(var(--ios-green-rgb), 0.08);
}

.contact-form__msg--error {
	display: block;
	background: rgba(var(--ios-red-rgb), 0.08);
	color: var(--ios-red);
	border: 1px solid rgba(var(--ios-red-rgb), 0.4);
	box-shadow:
		0 0 10px rgba(var(--ios-red-rgb), 0.3),
		0 0 25px rgba(var(--ios-red-rgb), 0.15),
		inset 0 0 10px rgba(var(--ios-red-rgb), 0.08);
}

.contact-form__msg:empty {
	display: none;
}

.is-shaking {
	animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
	10%, 90% { transform: translate3d(-2px, 0, 0); }
	20%, 80% { transform: translate3d(4px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
	40%, 60% { transform: translate3d(6px, 0, 0); }
}