/*
 * Silver & Gold Palace — animations & effects.
 * Elements carry data-sgp-anim / data-sgp-hover / data-sgp-loop (see inc/motion.php).
 * Entrance effects only hide things once <html> has .sgp-anim-on, which is added
 * by a tiny script in <head>, so nothing is ever hidden without JavaScript.
 */

:root {
	--sgp-anim-ease: cubic-bezier(.22, .61, .36, 1);
	--sgp-anim-dist: 40px;
}

/* ==========================================================================
   1. Entrance — starting states
   ========================================================================== */

.sgp-anim-on [data-sgp-anim] {
	--a-dur: 800ms;
	--a-delay: 0ms;
	opacity: 0;
	transition:
		opacity var(--a-dur) var(--sgp-anim-ease) var(--a-delay),
		transform var(--a-dur) var(--sgp-anim-ease) var(--a-delay),
		filter var(--a-dur) var(--sgp-anim-ease) var(--a-delay),
		clip-path var(--a-dur) var(--sgp-anim-ease) var(--a-delay);
	will-change: opacity, transform;
}

.sgp-anim-on [data-sgp-anim="fade-up"]    { transform: translate3d(0, var(--sgp-anim-dist), 0); }
.sgp-anim-on [data-sgp-anim="fade-down"]  { transform: translate3d(0, calc(var(--sgp-anim-dist) * -1), 0); }
.sgp-anim-on [data-sgp-anim="fade-left"]  { transform: translate3d(calc(var(--sgp-anim-dist) * -1.5), 0, 0); }
.sgp-anim-on [data-sgp-anim="fade-right"] { transform: translate3d(calc(var(--sgp-anim-dist) * 1.5), 0, 0); }
.sgp-anim-on [data-sgp-anim="zoom-in"]    { transform: scale(.82); }
.sgp-anim-on [data-sgp-anim="zoom-out"]   { transform: scale(1.18); }
.sgp-anim-on [data-sgp-anim="zoom-up"]    { transform: translate3d(0, var(--sgp-anim-dist), 0) scale(.9); }
.sgp-anim-on [data-sgp-anim="flip-up"]    { transform: perspective(900px) rotateX(65deg); transform-origin: 50% 100%; }
.sgp-anim-on [data-sgp-anim="flip-left"]  { transform: perspective(900px) rotateY(-70deg); transform-origin: 0 50%; }
.sgp-anim-on [data-sgp-anim="rotate-in"]  { transform: rotate(-10deg) scale(.88); }
.sgp-anim-on [data-sgp-anim="blur-in"]    { filter: blur(14px); transform: scale(1.04); }
.sgp-anim-on [data-sgp-anim="skew-in"]    { transform: translate3d(0, var(--sgp-anim-dist), 0) skewY(6deg); }

.sgp-anim-on [data-sgp-anim="reveal-up"]     { opacity: 1; clip-path: inset(100% 0 0 0); }
.sgp-anim-on [data-sgp-anim="reveal-left"]   { opacity: 1; clip-path: inset(0 100% 0 0); }
.sgp-anim-on [data-sgp-anim="reveal-circle"] { opacity: 1; clip-path: circle(0% at 50% 50%); }

/* Keyframe-based effects — they run as an animation instead of a transition. */
.sgp-anim-on [data-sgp-anim="bounce-in"],
.sgp-anim-on [data-sgp-anim="pop"],
.sgp-anim-on [data-sgp-anim="drop"],
.sgp-anim-on [data-sgp-anim="swing-in"],
.sgp-anim-on [data-sgp-anim="light-speed"] {
	transition: none;
}

/* ==========================================================================
   2. Entrance — played (.is-in)
   ========================================================================== */

.sgp-anim-on [data-sgp-anim].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

.sgp-anim-on [data-sgp-anim^="reveal"].is-in        { clip-path: inset(0 0 0 0); }
.sgp-anim-on [data-sgp-anim="reveal-circle"].is-in  { clip-path: circle(75% at 50% 50%); }

.sgp-anim-on [data-sgp-anim="bounce-in"].is-in   { animation: sgp-k-bounce var(--a-dur) var(--a-delay) both; }
.sgp-anim-on [data-sgp-anim="pop"].is-in         { animation: sgp-k-pop var(--a-dur) var(--a-delay) both; }
.sgp-anim-on [data-sgp-anim="drop"].is-in        { animation: sgp-k-drop var(--a-dur) var(--a-delay) both; }
.sgp-anim-on [data-sgp-anim="swing-in"].is-in    { animation: sgp-k-swing-in var(--a-dur) var(--a-delay) both; transform-origin: top center; }
.sgp-anim-on [data-sgp-anim="light-speed"].is-in { animation: sgp-k-light var(--a-dur) var(--a-delay) both ease-out; }

/* After playing, hand transitions back to hover effects (no waiting on the delay). */
.sgp-anim-on [data-sgp-anim].is-done {
	transition: transform .45s var(--sgp-ease, ease), box-shadow .45s var(--sgp-ease, ease), filter .45s ease;
	will-change: auto;
	animation: none;
}

/* Copies made by the auto-scrolling category strip are always visible. */
.sgp-anim-on [data-clone][data-sgp-anim] {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: none;
	animation: none;
}

@keyframes sgp-k-bounce {
	0%   { opacity: 0; transform: scale(.3); }
	50%  { opacity: 1; transform: scale(1.06); }
	70%  { transform: scale(.95); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes sgp-k-pop {
	0%   { opacity: 0; transform: scale(.6); }
	60%  { opacity: 1; transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes sgp-k-drop {
	0%   { opacity: 0; transform: translateY(-120px); }
	60%  { opacity: 1; transform: translateY(12px); }
	80%  { transform: translateY(-5px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes sgp-k-swing-in {
	0%   { opacity: 0; transform: rotateX(-100deg); }
	60%  { opacity: 1; transform: rotateX(20deg); }
	80%  { transform: rotateX(-8deg); }
	100% { opacity: 1; transform: rotateX(0); }
}

@keyframes sgp-k-light {
	0%   { opacity: 0; transform: translateX(60%) skewX(-30deg); }
	60%  { opacity: 1; transform: skewX(18deg); }
	80%  { transform: skewX(-5deg); }
	100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   3. Hover effects
   The "media" of an item is its photo / icon frame.
   ========================================================================== */

[data-sgp-hover] {
	transition: transform .45s var(--sgp-ease, ease), box-shadow .45s var(--sgp-ease, ease);
}

[data-sgp-hover] :is(.sgp-cat__media, .sgp-product__media, .sgp-banner__media, .sgp-review__avatar, .sgp-contact__icon) {
	position: relative;
	transition: transform .5s var(--sgp-ease, ease), box-shadow .5s var(--sgp-ease, ease), filter .5s ease;
}

[data-sgp-hover] img {
	transition: transform .7s var(--sgp-ease, ease), filter .6s ease;
}

/* Turn off the theme's own lift when another hover is chosen. */
[data-sgp-hover] .sgp-cat:hover .sgp-cat__media,
[data-sgp-hover] .sgp-cat:hover .sgp-cat__media img,
[data-sgp-hover="none"]:hover,
[data-sgp-hover="none"]:hover img {
	transform: none;
	box-shadow: none;
}

[data-sgp-hover="lift"]:hover,
.sgp-anim-on [data-sgp-hover="lift"].is-done:hover {
	transform: translateY(-8px);
}

[data-sgp-hover="lift"]:hover :is(.sgp-cat__media, .sgp-product__media) {
	box-shadow: var(--sgp-shadow-lg, 0 24px 60px rgba(130, 21, 44, .12));
}

[data-sgp-hover="grow"]:hover,
.sgp-anim-on [data-sgp-hover="grow"].is-done:hover   { transform: scale(1.05); }
[data-sgp-hover="shrink"]:hover,
.sgp-anim-on [data-sgp-hover="shrink"].is-done:hover { transform: scale(.95); }
[data-sgp-hover="tilt"]:hover,
.sgp-anim-on [data-sgp-hover="tilt"].is-done:hover   { transform: rotate(-2.5deg) scale(1.02); }

[data-sgp-hover="zoom"]:hover img   { transform: scale(1.12); }
[data-sgp-hover="rotate"]:hover img { transform: scale(1.14) rotate(4deg); }

[data-sgp-hover="glow"]:hover :is(.sgp-cat__media, .sgp-product__media, .sgp-banner__media, .sgp-contact__icon),
[data-sgp-hover="glow"].sgp-review:hover {
	box-shadow: 0 0 0 4px var(--sgp-pink-softer, #F2DCDE), 0 14px 40px rgba(201, 112, 127, .35);
}

[data-sgp-hover="ring"]:hover :is(.sgp-cat__media, .sgp-product__media, .sgp-banner__media, .sgp-contact__icon),
[data-sgp-hover="ring"].sgp-review:hover {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sgp-gold, #BD8D59);
}

[data-sgp-hover="color"] img { filter: grayscale(1); }
[data-sgp-hover="color"]:hover img { filter: none; }

[data-sgp-hover="shine"] :is(.sgp-cat__media, .sgp-product__media, .sgp-banner__media) {
	overflow: hidden;
}

[data-sgp-hover="shine"] :is(.sgp-cat__media, .sgp-product__media, .sgp-banner__media)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}

[data-sgp-hover="shine"]:hover :is(.sgp-cat__media, .sgp-product__media, .sgp-banner__media)::after {
	transform: translateX(120%);
	transition: transform .9s ease;
}

[data-sgp-hover="bob"]:hover :is(.sgp-cat__media, .sgp-product__media, .sgp-contact__icon, .sgp-review__avatar) {
	animation: sgp-k-float 1.4s ease-in-out infinite;
}

[data-sgp-hover="shake"]:hover :is(.sgp-cat__media, .sgp-product__media, .sgp-contact__icon, .sgp-review__avatar) {
	animation: sgp-k-wobble .7s ease-in-out;
}

/* ==========================================================================
   4. Continuous effects (on the photo / icon)
   ========================================================================== */

[data-sgp-loop="float"] :is(.sgp-cat__media, .sgp-contact__icon)     { animation: sgp-k-float 3.2s ease-in-out infinite; }
[data-sgp-loop="pulse"] :is(.sgp-cat__media, .sgp-contact__icon)     { animation: sgp-k-pulse 2.4s ease-in-out infinite; }
[data-sgp-loop="heartbeat"] :is(.sgp-cat__media, .sgp-contact__icon) { animation: sgp-k-heart 1.8s ease-in-out infinite; }
[data-sgp-loop="swing"] :is(.sgp-cat__media, .sgp-contact__icon)     { animation: sgp-k-swing 2.8s ease-in-out infinite; transform-origin: top center; }
[data-sgp-loop="wobble"] :is(.sgp-cat__media, .sgp-contact__icon)    { animation: sgp-k-wobble 3s ease-in-out infinite; }
[data-sgp-loop="spin"] :is(.sgp-cat__media, .sgp-contact__icon)      { animation: sgp-k-spin 14s linear infinite; }

[data-sgp-loop="sparkle"] :is(.sgp-cat__media, .sgp-contact__icon) {
	position: relative;
	overflow: hidden;
}

[data-sgp-loop="sparkle"] :is(.sgp-cat__media, .sgp-contact__icon)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
	animation: sgp-k-sparkle 3.6s ease-in-out infinite;
	pointer-events: none;
}

/* Different starting points so a row of tiles doesn't move in lockstep. */
.sgp-cats__item:nth-child(2n) [class*="__media"],
.sgp-contact__card:nth-child(2n) .sgp-contact__icon { animation-delay: -.8s; }
.sgp-cats__item:nth-child(3n) [class*="__media"],
.sgp-contact__card:nth-child(3n) .sgp-contact__icon { animation-delay: -1.6s; }

@keyframes sgp-k-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sgp-k-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sgp-k-heart   { 0%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.08); } 20% { transform: scale(.98); } }
@keyframes sgp-k-swing   { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes sgp-k-wobble  { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } }
@keyframes sgp-k-spin    { to { transform: rotate(360deg); } }
@keyframes sgp-k-sparkle { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ==========================================================================
   5. Respect "reduce motion"
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-sgp-loop] *,
	[data-sgp-hover] * {
		animation: none !important;
	}
}