/* TeaTok motion — scroll reveals, hero entrance, micro-interactions */

:root {
	--animate-ease: cubic-bezier(0.34, 1.2, 0.64, 1);
	--animate-duration: 0.65s;
}

/* Scroll reveal base */
[data-animate] {
	opacity: 0;
	transition:
		opacity var(--animate-duration) ease,
		transform var(--animate-duration) var(--animate-ease);
	transition-delay: var(--animate-delay, 0s);
	will-change: opacity, transform;
}

[data-animate="fade-up"] {
	transform: translateY(28px);
}

[data-animate="fade-in"] {
	transform: none;
}

[data-animate="pop-in"] {
	transform: scale(0.92) rotate(-2deg);
}

[data-animate="scale-in"] {
	transform: scale(0.96);
}

[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

[data-animate="pop-in"].speech-bubble--pink.is-visible,
[data-animate="pop-in"].speech-bubble--blue.is-visible,
[data-animate="pop-in"].speech-bubble--green.is-visible {
	transform: rotate(8deg);
}

[data-animate="fade-up"].location-polaroid--1 {
	transform: translateY(28px) rotate(-7.4deg);
}
[data-animate="fade-up"].location-polaroid--2 {
	transform: translateY(28px) rotate(6deg);
}
[data-animate="fade-up"].location-polaroid--3 {
	transform: translateY(28px) rotate(-5.98deg);
}
[data-animate="fade-up"].location-polaroid--1.is-visible {
	transform: rotate(-7.4deg);
}
[data-animate="fade-up"].location-polaroid--2.is-visible {
	transform: rotate(6deg);
}
[data-animate="fade-up"].location-polaroid--3.is-visible {
	transform: rotate(-5.98deg);
}

/* Hero entrance */
.hero-home .hero-home__image {
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.9s ease, transform 1.1s ease;
}

.hero-home.is-loaded .hero-home__image {
	opacity: 1;
	transform: scale(1);
}

.hero-home .hero-home__title {
	opacity: 0;
}

.hero-home.is-loaded .hero-home__title {
	animation: teatok-hero-title-in 0.85s var(--animate-ease) 0.15s forwards;
}

.hero-home .hero-home__actions {
	opacity: 0;
}

.hero-home.is-loaded .hero-home__actions {
	animation: teatok-hero-actions-in 0.85s var(--animate-ease) 0.35s forwards;
}

@keyframes teatok-hero-title-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes teatok-hero-actions-in {
	from {
		opacity: 0;
		transform: translateX(-48%) translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateX(-48%) translateY(0);
	}
}

/* About hero */
.about-hero__visual,
.about-hero__left,
.about-hero__right {
	opacity: 0;
}

.about-hero.is-loaded .about-hero__visual {
	animation: teatok-about-visual-in 0.8s var(--animate-ease) 0.1s forwards;
}

.about-hero.is-loaded .about-hero__left {
	animation: teatok-fade-up 0.8s var(--animate-ease) 0.25s forwards;
}

.about-hero.is-loaded .about-hero__right {
	animation: teatok-fade-up 0.8s var(--animate-ease) 0.4s forwards;
}

@media (max-width: 900px) {
	.about-hero.is-loaded .about-hero__visual {
		animation: teatok-fade-up 0.8s var(--animate-ease) 0.1s forwards;
	}
}

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

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes teatok-about-visual-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Floating decor */
.teatok-float {
	animation: teatok-float var(--float-duration, 5s) ease-in-out infinite;
	animation-delay: var(--float-delay, 0s);
}

.teatok-float--slow {
	--float-duration: 7s;
}

@keyframes teatok-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -12px;
	}
}

.about-hero__decor.teatok-float--bubble-1 { --float-delay: 0s; }
.about-hero__decor.teatok-float--bubble-2 { --float-delay: 0.4s; }
.about-hero__decor.teatok-float--bubble-3 { --float-delay: 0.8s; }
.about-hero__decor.teatok-float--bubble-4 { --float-delay: 1.2s; }
.about-hero__decor.teatok-float--bubble-5 { --float-delay: 0.2s; }
.about-hero__decor.teatok-float--bubble-6 { --float-delay: 0.6s; }
.about-hero__decor.teatok-float--bubble-7 { --float-delay: 1s; }
.about-hero__decor.teatok-float--bubble-8 { --float-delay: 1.4s; }

/* Header on scroll */
.site-header {
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 4px 24px rgba(12, 9, 9, 0.08);
	background: rgba(248, 243, 235, 0.98);
}

/* Testimonial progress */
.testimonial__progress-fill {
	transform-origin: left center;
}

[dir="rtl"] .testimonial__progress-fill {
	transform-origin: right center;
}

.testimonial__quote-block.is-visible .testimonial__heart {
	animation: teatok-heart-pulse 0.6s var(--animate-ease) 0.2s both;
}

@keyframes teatok-heart-pulse {
	from {
		opacity: 0;
		transform: scale(0.6);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* WhatsApp FAB pulse */
.whatsapp-fab__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--whatsapp);
	opacity: 0.45;
	animation: whatsapp-fab-pulse 2.4s ease-out infinite;
	pointer-events: none;
	z-index: 0;
}

.whatsapp-fab__ring--delay {
	animation-delay: 1.2s;
}

@keyframes whatsapp-fab-pulse {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}

	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

/* Card & pill hovers */
.signature-drink {
	transition: transform 0.25s var(--animate-ease);
}

.signature-drink:hover {
	transform: translateY(-6px);
}

.signature-drink__image {
	transition: transform 0.35s ease;
}

.signature-drink:hover .signature-drink__image {
	transform: scale(1.06);
}

.menu-card {
	transition: transform 0.25s var(--animate-ease);
}

.menu-card:hover {
	transform: translateY(-6px);
}

.menu-card__image {
	transition: transform 0.35s ease;
}

.menu-card:hover .menu-card__image {
	transform: scale(1.05);
}

.filter-pill {
	transition: transform 0.15s ease, background-color 0.15s ease;
	cursor: default;
}

.filter-pill:hover {
	transform: translateY(-2px);
}

.social-pill {
	transition: transform 0.2s var(--animate-ease);
}

.social-pill:hover {
	transform: translateY(-4px) scale(1.02);
}

.social-pill__icon {
	transition: transform 0.2s ease;
}

.social-pill:hover .social-pill__icon {
	transform: rotate(-8deg) scale(1.08);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero-home .hero-home__image,
	.hero-home .hero-home__title,
	.hero-home .hero-home__actions,
	.about-hero__visual,
	.about-hero__left,
	.about-hero__right {
		opacity: 1;
		animation: none !important;
		transform: none;
	}

	.hero-home.is-loaded .hero-home__title {
		transform: translateX(-50%);
	}

	.hero-home.is-loaded .hero-home__actions {
		transform: translateX(-48%);
	}

	@media (min-width: 901px) {
		.about-hero.is-loaded .about-hero__visual {
			transform: translateX(-50%);
		}
	}

	.teatok-float {
		animation: none;
	}

	.signature-drink:hover,
	.menu-card:hover,
	.filter-pill:hover,
	.social-pill:hover,
	.menu-filter-group--chips .menu-filter-group__item:active,
	.menu-price-filter__btn:active,
	.menu-price-filter__btn.is-applied,
	.whatsapp-fab:hover {
		transform: none;
	}

	.testimonial__quote-block.is-visible .testimonial__heart {
		animation: none;
	}

	.whatsapp-fab__ring {
		animation: none;
		display: none;
	}

	[data-animate="pop-in"].speech-bubble--pink,
	[data-animate="pop-in"].speech-bubble--blue,
	[data-animate="pop-in"].speech-bubble--green {
		transform: rotate(8deg);
	}
}