/* Palsana: shared motion + UI kit (reveal, float, marquee, carousel, tabs, drawers, placeholders).
   Markup contract is documented in assets/js/theme.js. Everything is off with
   prefers-reduced-motion or when "Animations" is unticked in the Customizer (body.pl-motion-off). */

:root {
	--pl-ease: cubic-bezier(.2, .7, .2, 1);
	--pl-reveal-distance: 22px;
	--pl-reveal-time: .7s;
	--pl-shadow-sm: 0 2px 10px rgba(14, 25, 57, .06);
	--pl-shadow-md: 0 14px 40px -12px rgba(14, 25, 57, .18);
	--pl-shadow-lg: 0 30px 70px -20px rgba(64, 32, 125, .35);
	--pl-grad-violet: linear-gradient(135deg, #8a2ae3 0%, #40207d 100%);
	--pl-grad-dawn: linear-gradient(160deg, #f4effc 0%, #fff7e0 100%);
	--pl-grad-night: linear-gradient(160deg, #0e1939 0%, #40207d 100%);
}
body.pl-motion-lively { --pl-reveal-distance: 40px; --pl-reveal-time: .9s; }

/* ---------- Eyebrow, centered heads, chips (shared) ---------- */
.pl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem/1 var(--pl-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pl-violet); margin-bottom: 14px; }
.pl-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--pl-gold); border-radius: 2px; }
.pl-section-head--center { margin-inline: auto; text-align: center; }
.pl-section-head--center .pl-eyebrow { justify-content: center; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pl-r-pill); background: var(--pl-lilac); color: var(--pl-plum); font-size: .85rem; font-weight: 600; }

/* ---------- Scroll reveal ---------- */
.pl-js [data-reveal] { opacity: 0; transform: translate3d(0, var(--pl-reveal-distance), 0); transition: opacity var(--pl-reveal-time) var(--pl-ease), transform var(--pl-reveal-time) var(--pl-ease); transition-delay: var(--pl-delay, 0s); will-change: opacity, transform; }
.pl-js [data-reveal="left"] { transform: translate3d(calc(var(--pl-reveal-distance) * -1), 0, 0); }
.pl-js [data-reveal="right"] { transform: translate3d(var(--pl-reveal-distance), 0, 0); }
.pl-js [data-reveal="zoom"] { transform: scale(.94); }
.pl-js [data-reveal="fade"] { transform: none; }
.pl-js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { --pl-delay: .08s; } [data-reveal-delay="2"] { --pl-delay: .16s; } [data-reveal-delay="3"] { --pl-delay: .24s; }
[data-reveal-delay="4"] { --pl-delay: .32s; } [data-reveal-delay="5"] { --pl-delay: .40s; } [data-reveal-delay="6"] { --pl-delay: .48s; }

/* ---------- Floating ---------- */
@keyframes pl-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
@keyframes pl-float-rotate { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); } 50% { transform: translate3d(0, -12px, 0) rotate(6deg); } }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
.pl-float { animation: pl-float 6s ease-in-out infinite; }
.pl-float--slow { animation-duration: 9s; }
.pl-float--delay { animation-delay: -3s; }
.pl-float--rotate { animation: pl-float-rotate 8s ease-in-out infinite; }
.pl-spin-slow { animation: pl-spin 40s linear infinite; }
.pl-pulse { animation: pl-pulse 3.5s ease-in-out infinite; }
/* Decorative blobs and capsules (absolutely positioned by the section). */
.pl-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; pointer-events: none; z-index: 0; }
.pl-capsule { position: absolute; width: 46px; height: 20px; border-radius: 20px; background: linear-gradient(90deg, #f6c338 50%, #ffdd75 50%); box-shadow: 0 8px 20px -6px rgba(224, 168, 0, .6); pointer-events: none; }
.pl-capsule--violet { background: linear-gradient(90deg, #8a2ae3 50%, #b77bf0 50%); box-shadow: 0 8px 20px -6px rgba(138, 42, 227, .5); }

/* ---------- Parallax (JS sets --pl-parallax) ---------- */
[data-parallax] { transform: translate3d(0, var(--pl-parallax, 0px), 0); will-change: transform; }

/* ---------- Marquee ---------- */
.pl-marquee { overflow: hidden; display: flex; user-select: none; --pl-marquee-time: 30s; }
.pl-marquee__track { display: flex; flex-shrink: 0; gap: var(--pl-marquee-gap, 48px); padding-right: var(--pl-marquee-gap, 48px); align-items: center; animation: pl-marquee var(--pl-marquee-time) linear infinite; }
.pl-marquee--reverse .pl-marquee__track { animation-direction: reverse; }
.pl-marquee:hover .pl-marquee__track { animation-play-state: paused; }
@keyframes pl-marquee { to { transform: translate3d(-100%, 0, 0); } }

/* ---------- Hover lift / tilt ---------- */
.pl-lift { transition: transform .35s var(--pl-ease), box-shadow .35s var(--pl-ease); }
.pl-lift:hover { transform: translateY(-6px); box-shadow: var(--pl-shadow-md); }
.pl-zoom-img { overflow: hidden; }
.pl-zoom-img img { transition: transform .8s var(--pl-ease); }
.pl-zoom-img:hover img { transform: scale(1.05); }

/* ---------- Carousel (scroll-snap) ---------- */
.pl-carousel { position: relative; }
.pl-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--pl-slide, 80%); gap: var(--pl-carousel-gap, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; }
.pl-carousel__track::-webkit-scrollbar { display: none; }
.pl-carousel__track > * { scroll-snap-align: start; }
@media (min-width: 700px) { .pl-carousel__track { grid-auto-columns: var(--pl-slide-md, calc((100% - 2 * var(--pl-carousel-gap, 20px)) / 3)); } }
@media (min-width: 1100px) { .pl-carousel__track { grid-auto-columns: var(--pl-slide-lg, var(--pl-slide-md, calc((100% - 3 * var(--pl-carousel-gap, 20px)) / 4))); } }
.pl-carousel__nav { display: flex; gap: 10px; }
.pl-carousel__btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--pl-line); background: var(--pl-white); color: var(--pl-navy); display: inline-grid; place-items: center; padding: 0; transition: background .2s, color .2s, border-color .2s; }
.pl-carousel__btn:hover, .pl-carousel__btn:focus { background: var(--pl-navy); color: var(--pl-white); border-color: var(--pl-navy); }
.pl-carousel__btn[disabled] { opacity: .35; pointer-events: none; }
.pl-carousel__btn svg { width: 20px; height: 20px; }
.pl-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.pl-carousel__dots button { width: 8px; height: 8px; border-radius: 8px; padding: 0; border: 0; background: var(--pl-line); transition: width .3s, background .3s; }
.pl-carousel__dots button.is-active { width: 26px; background: var(--pl-violet); }

/* ---------- Tabs ---------- */
.pl-tabs__list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pl-tabs__list [role="tab"] { border: 1.5px solid var(--pl-line); background: var(--pl-white); color: var(--pl-ink); border-radius: var(--pl-r-pill); padding: 10px 18px; font-weight: 600; }
.pl-tabs__list [role="tab"][aria-selected="true"] { background: var(--pl-navy); border-color: var(--pl-navy); color: var(--pl-white); }
.pl-js [role="tabpanel"][hidden] { display: none; }
.pl-js [role="tabpanel"].is-active { animation: pl-fade-in .45s var(--pl-ease); }
@keyframes pl-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Drawers and modals ---------- */
.pl-overlay { position: fixed; inset: 0; background: rgba(14, 25, 57, .5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 998; }
.pl-overlay.is-open { opacity: 1; pointer-events: auto; }
.pl-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--pl-white); z-index: 999; transform: translateX(100%); transition: transform .4s var(--pl-ease); display: flex; flex-direction: column; box-shadow: var(--pl-shadow-lg); visibility: hidden; }
.pl-drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.pl-drawer.is-open { transform: none; visibility: visible; }
.pl-modal { position: fixed; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--pl-white); border-radius: var(--pl-r-lg); z-index: 999; transform: translate(-50%, -46%) scale(.97); opacity: 0; visibility: hidden; transition: transform .35s var(--pl-ease), opacity .35s, visibility .35s; box-shadow: var(--pl-shadow-lg); }
.pl-modal.is-open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
.pl-close-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--pl-lilac); color: var(--pl-navy); display: grid; place-items: center; padding: 0; }
.pl-close-x svg { width: 20px; height: 20px; }

/* ---------- Header on scroll (class set by JS) ---------- */
.pl-header { transition: box-shadow .3s, background .3s; }
.pl-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(14, 25, 57, .25); }

/* ---------- Placeholder image ---------- */
.pl-ph { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; border-radius: var(--pl-r-md); background: var(--pl-lilac) radial-gradient(circle at 30% 20%, rgba(138, 42, 227, .12), transparent 55%); color: var(--pl-violet); text-align: center; padding: 16px; box-sizing: border-box; }
.pl-ph--gold { background: #fff5d6 radial-gradient(circle at 70% 20%, rgba(246, 195, 56, .35), transparent 55%); color: var(--pl-gold-deep); }
.pl-ph--navy { background: var(--pl-grad-night); color: rgba(255, 255, 255, .7); }
.pl-ph svg { width: 34px; height: 34px; opacity: .7; }
.pl-ph span { font-size: .85rem; font-weight: 600; opacity: .8; }

/* ---------- Counters ---------- */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion / switched off ---------- */
@media (prefers-reduced-motion: reduce) {
	.pl-js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.pl-float, .pl-float--rotate, .pl-spin-slow, .pl-pulse, .pl-marquee__track { animation: none; }
	[data-parallax] { transform: none; }
	.pl-carousel__track { scroll-behavior: auto; }
}
body.pl-motion-off [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
body.pl-motion-off .pl-float, body.pl-motion-off .pl-float--rotate, body.pl-motion-off .pl-spin-slow, body.pl-motion-off .pl-pulse { animation: none; }
body.pl-motion-off [data-parallax] { transform: none; }