/* Premium site-wide motion system. Activated progressively by animations.js. */
:root {
	--tka-motion-ease: cubic-bezier(.22, 1, .36, 1);
	--tka-motion-soft: cubic-bezier(.2, .75, .25, 1);
}

@keyframes tkaAnnouncementIn {
	from { opacity: 0; transform: translateY(-100%); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes tkaHeaderIn {
	from { opacity: 0; transform: translateY(-22px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes tkaHeroIn {
	from { opacity: 0; transform: scale(1.025) translateY(16px); filter: saturate(.82); }
	to { opacity: 1; transform: scale(1) translateY(0); filter: saturate(1); }
}

@keyframes tkaButtonSheen {
	0% { transform: translateX(-180%) skewX(-20deg); }
	55%, 100% { transform: translateX(320%) skewX(-20deg); }
}

@keyframes tkaHeroCinematic {
	from { transform: scale(1.075); filter: brightness(.86) saturate(.9); }
	to { transform: scale(1); filter: brightness(1) saturate(1.05); }
}

@keyframes tkaTrustFloat {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-5px) rotate(-3deg); }
}

@keyframes tkaBadgePulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 75, 49, 0); }
	50% { transform: scale(1.06); box-shadow: 0 0 0 7px rgba(220, 75, 49, .1); }
}

@keyframes tkaUnderlineGrow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes tkaCartBounce {
	0%, 100% { transform: translateY(0) scale(1); }
	35% { transform: translateY(-5px) scale(1.12); }
	65% { transform: translateY(1px) scale(.96); }
}

.tka-motion-ready .tka-announcement {
	animation: tkaAnnouncementIn .55s var(--tka-motion-ease) both;
}

.tka-motion-ready .tka-header {
	animation: tkaHeaderIn .72s .08s var(--tka-motion-ease) both;
}

.tka-motion-ready .tka-motion-hero {
	animation: tkaHeroIn 1s .14s var(--tka-motion-ease) both;
	transform-origin: center top;
}

/* Cinematic movement makes every hero change clearly visible. */
.tka-motion-ready .tka-hero-slide.is-active .tka-hero-art img {
	animation: tkaHeroCinematic 3s var(--tka-motion-soft) both;
	transform-origin: center;
}

.tka-motion-ready .tka-hero-slide.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .22) 48%, transparent 68%);
	transform: translateX(-115%);
	animation: tkaButtonSheen 1.15s .18s ease both;
}

.tka-motion-ready .tka-reveal {
	opacity: 0;
	transform: translateY(38px);
	filter: blur(3px);
	transition: opacity .82s var(--tka-motion-ease), transform .82s var(--tka-motion-ease), filter .72s ease;
}

.tka-motion-ready .tka-reveal.tka-reveal-left {
	transform: translateX(-38px);
}

.tka-motion-ready .tka-reveal.tka-reveal-right {
	transform: translateX(38px);
}

.tka-motion-ready .tka-reveal.is-visible {
	opacity: 1;
	transform: translate(0, 0);
	filter: blur(0);
}

.tka-motion-ready .tka-stagger > .tka-stagger-item {
	opacity: 0;
	transform: translateY(26px) scale(.975);
	transition: opacity .62s var(--tka-motion-soft), transform .68s var(--tka-motion-ease);
	transition-delay: calc(var(--tka-stagger-index, 0) * 70ms);
}

.tka-motion-ready .tka-stagger.is-visible > .tka-stagger-item {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Header navigation and service reassurance enter as visible sequences. */
.tka-motion-ready .tka-quick-track a,
.tka-motion-ready .tka-trust > span {
	opacity: 0;
	transform: translateY(16px) scale(.94);
	animation: tkaHeaderIn .62s var(--tka-motion-ease) forwards;
	animation-delay: calc(.2s + var(--tka-item-index, 0) * 75ms);
}

.tka-motion-ready .tka-trust-icon {
	display: inline-grid;
	animation: tkaTrustFloat 2.8s ease-in-out infinite;
	animation-delay: calc(var(--tka-item-index, 0) * -420ms);
}

.tka-motion-ready .tka-section-head h2,
.tka-motion-ready .tka-popular-categories-head h2,
.tka-motion-ready .tka-fresh-market-head h2,
.tka-motion-ready .tka-daily-head h2,
.tka-motion-ready .tka-fish-head h2 {
	position: relative;
	display: inline-block;
}

.tka-motion-ready .tka-heading-visible h2::after,
.tka-motion-ready h2.tka-heading-visible::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -9px;
	width: min(92px, 35%);
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, #f6ad2f, #0a6a53);
	transform-origin: left;
	animation: tkaUnderlineGrow .8s .2s var(--tka-motion-ease) both;
}

/* A premium progress line provides constant, useful page motion. */
.tka-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 4px;
	pointer-events: none;
	transform: scaleX(var(--tka-scroll-progress, 0));
	transform-origin: left center;
	background: linear-gradient(90deg, #f6ad2f, #ef7d28 48%, #0a6a53);
	box-shadow: 0 1px 8px rgba(246, 173, 47, .45);
}

/* Product and category motion remains tactile on both touch and desktop. */
.tka-product-card .tka-product-media img,
.tka-category-card .tka-category-photo,
.tka-blog-image img {
	transition: transform .55s var(--tka-motion-ease), filter .4s ease;
}

.tka-product-card:hover .tka-product-media img {
	transform: scale(1.09) rotate(-1.5deg);
	filter: drop-shadow(0 14px 12px rgba(22, 68, 52, .14));
}

.tka-category-card:hover .tka-category-photo {
	transform: translateY(-6px) scale(1.08) rotate(2deg);
}

.tka-blog-grid article:hover .tka-blog-image img {
	transform: scale(1.08);
}

.tka-product-card:hover .tka-badge-sale {
	animation: tkaBadgePulse 1.25s ease-in-out infinite;
}

.tka-product-card .tka-wishlist,
.tka-product-card .tka-quick-view,
.tka-hero-controls > button,
.tka-slider-buttons button {
	transition: transform .25s var(--tka-motion-ease), box-shadow .25s ease, background-color .25s ease;
}

.tka-product-card .tka-wishlist:hover,
.tka-product-card .tka-quick-view:hover,
.tka-hero-controls > button:hover,
.tka-slider-buttons button:hover {
	transform: scale(1.13) rotate(4deg);
	box-shadow: 0 9px 22px rgba(13, 72, 54, .2);
}

.tka-cart-link.tka-cart-animated,
[data-quick-cart].tka-cart-animated {
	animation: tkaCartBounce .58s var(--tka-motion-ease);
}

/* Pointer-following light on the largest promotional surfaces. */
.tka-promo,
.tka-daily-banner,
.tka-fish-banner {
	position: relative;
}

.tka-promo::after,
.tka-daily-banner::after,
.tka-fish-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle 190px at var(--tka-pointer-x, 50%) var(--tka-pointer-y, 50%), rgba(255,255,255,.28), transparent 72%);
	transition: opacity .3s ease;
}

.tka-promo:hover::after,
.tka-daily-banner:hover::after,
.tka-fish-banner:hover::after {
	opacity: 1;
}

/* Refined interaction motion for cards, controls and calls to action. */
@media (hover: hover) and (pointer: fine) {
	.tka-product-card,
	.tka-category-card,
	.tka-blog-grid article,
	.tka-review-grid blockquote,
	.tka-daily-banner,
	.tka-promo {
		transition: transform .34s var(--tka-motion-ease), box-shadow .34s ease, filter .34s ease;
	}

	.tka-product-card:hover,
	.tka-category-card:hover,
	.tka-blog-grid article:hover,
	.tka-review-grid blockquote:hover {
		transform: translateY(-7px);
		box-shadow: 0 18px 42px rgba(21, 76, 59, .14);
	}

	.tka-motion-ready .tka-stagger.is-visible > .tka-product-card:hover,
	.tka-motion-ready .tka-stagger.is-visible > .tka-category-card:hover,
	.tka-motion-ready .tka-stagger.is-visible > article:hover,
	.tka-motion-ready .tka-stagger.is-visible > blockquote:hover {
		transform: translateY(-9px) scale(1.018);
	}

	.tka-daily-banner:hover,
	.tka-promo:hover {
		transform: translateY(-5px) scale(1.008);
		filter: saturate(1.05);
	}
}

.tka-add-button,
.tka-button,
.tka-promo-button,
.tka-offers-button,
.tka-fresh-button,
.tka-qc footer a,
.tka-newsletter button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tka-add-button::after,
.tka-button::after,
.tka-promo-button::after,
.tka-offers-button::after,
.tka-fresh-button::after,
.tka-qc footer a::after,
.tka-newsletter button::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -45%;
	left: -25%;
	width: 22%;
	height: 190%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: translateX(-180%) skewX(-20deg);
}

.tka-motion-ready .tka-add-button:hover::after,
.tka-motion-ready .tka-button:hover::after,
.tka-motion-ready .tka-promo-button:hover::after,
.tka-motion-ready .tka-offers-button:hover::after,
.tka-motion-ready .tka-fresh-button:hover::after,
.tka-motion-ready .tka-qc footer a:hover::after,
.tka-motion-ready .tka-newsletter button:hover::after {
	animation: tkaButtonSheen .8s ease both;
}

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

	.tka-motion-ready .tka-reveal,
	.tka-motion-ready .tka-stagger > .tka-stagger-item {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.tka-scroll-progress { display: none; }
}


/* Unique viewport entrance for the Mega Offers section. */
@keyframes tkaMegaPortalOpen{
	0%{opacity:1;clip-path:inset(0 0 round 22px);transform:scale(.985);filter:none;box-shadow:0 10px 24px rgba(14,90,72,.1)}
	52%{opacity:1;clip-path:inset(0 0 round 22px);transform:scale(1.008);filter:none;box-shadow:0 20px 46px rgba(14,90,72,.2),0 0 32px rgba(62,207,161,.17)}
	100%{opacity:1;clip-path:inset(0 0 round 22px);transform:none;filter:none}
}
@keyframes tkaMegaTimeDrop{
	0%{opacity:1;transform:translateY(-5px) scale(.96);filter:none}
	62%{opacity:1;transform:translateY(3px) scale(1.045);filter:brightness(1.12)}
	100%{opacity:1;transform:none;filter:none}
}
@keyframes tkaMegaTimerLabelIn{
	0%{opacity:1;transform:translateX(-6px) scale(.96)}
	60%{opacity:1;transform:translateX(2px) scale(1.03)}
	100%{opacity:1;transform:none}
}
@keyframes tkaMegaTagPop{
	0%{opacity:0;transform:translateX(-34px) scale(.72);filter:blur(5px)}
	70%{opacity:1;transform:translateX(4px) scale(1.05);filter:blur(0)}
	100%{opacity:1;transform:none;filter:none}
}
@keyframes tkaMegaTitleWipe{
	0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(24px);filter:blur(7px)}
	100%{opacity:1;clip-path:inset(0 -5% 0 0);transform:none;filter:none}
}
@keyframes tkaMegaButtonSpring{
	0%{opacity:0;transform:translateX(42px) scale(.7) rotate(5deg)}
	68%{opacity:1;transform:translateX(-5px) scale(1.07) rotate(-1deg)}
	100%{opacity:1;transform:none}
}
@keyframes tkaMegaCardFan{
	0%{opacity:0;transform:translateY(70px) rotate(var(--tka-mega-angle,0deg)) scale(.86);filter:blur(7px)}
	72%{opacity:1;transform:translateY(-7px) rotate(calc(var(--tka-mega-angle,0deg) * -.15)) scale(1.025);filter:blur(0)}
	100%{opacity:1;transform:none;filter:none}
}
.tka-motion-ready #mega-offers.tka-reveal{opacity:1;transform:none;filter:none}
.tka-motion-ready #mega-offers:not(.is-visible) .tka-offer-countdown-home{opacity:1;clip-path:none;transform:none;filter:none}.tka-motion-ready #mega-offers:not(.is-visible) .tka-offers-tag,.tka-motion-ready #mega-offers:not(.is-visible) .tka-offers-head h2,.tka-motion-ready #mega-offers:not(.is-visible) .tka-offers-button,.tka-motion-ready #mega-offers:not(.is-visible) .tka-product-card{opacity:0}
.tka-motion-ready #mega-offers.is-visible .tka-offer-countdown-home{animation:tkaMegaPortalOpen .9s var(--tka-motion-ease) both}
.tka-motion-ready #mega-offers.is-visible .tka-countdown-label{animation:tkaMegaTimerLabelIn .45s var(--tka-motion-ease) both}
.tka-motion-ready #mega-offers.is-visible .tka-time-block{animation:tkaMegaTimeDrop .68s var(--tka-motion-ease) both}
.tka-motion-ready #mega-offers.is-visible .tka-time-block:nth-of-type(1){animation-delay:.3s}
.tka-motion-ready #mega-offers.is-visible .tka-time-block:nth-of-type(2){animation-delay:.42s}
.tka-motion-ready #mega-offers.is-visible .tka-time-block:nth-of-type(3){animation-delay:.54s}
.tka-motion-ready #mega-offers.is-visible .tka-offers-tag{animation:tkaMegaTagPop .58s .58s var(--tka-motion-ease) both}
.tka-motion-ready #mega-offers.is-visible .tka-offers-head h2{animation:tkaMegaTitleWipe .78s .66s var(--tka-motion-ease) both}
.tka-motion-ready #mega-offers.is-visible .tka-offers-button{animation:tkaMegaButtonSpring .68s .78s var(--tka-motion-ease) both}
.tka-motion-ready #mega-offers .tka-product-card:nth-child(odd){--tka-mega-angle:-5deg}
.tka-motion-ready #mega-offers .tka-product-card:nth-child(even){--tka-mega-angle:5deg}
.tka-motion-ready #mega-offers.is-visible .tka-product-card{animation:tkaMegaCardFan .76s var(--tka-motion-ease) both;animation-delay:calc(.82s + var(--tka-stagger-index,0) * 90ms)}

/* Mobile: no sideways slide-in, it widens the page. */
@media(max-width:700px){
	.tka-motion-ready .tka-reveal.tka-reveal-left,
	.tka-motion-ready .tka-reveal.tka-reveal-right{transform:translateY(24px)}
	.tka-motion-ready .tka-reveal.is-visible{transform:translate(0,0)}
}
