/*
 * Probashi Seba — motion.
 *
 * Loaded only when motion is enabled in the Customizer, so switching it off
 * removes the bytes rather than just the effects.
 *
 * Three rules govern everything here:
 *
 * 1. TRANSFORM AND OPACITY ONLY. Both are composited on the GPU. Animating
 *    height, top, or box-shadow forces layout and paint on every frame, which
 *    on a mid-range Android phone is the difference between smooth and visibly
 *    stuttering.
 *
 * 2. NOTHING THE USER NEEDS IS EVER ANIMATED IN. The call bar, call buttons and
 *    phone numbers render at full opacity immediately. A visitor in trouble at
 *    the airport does not wait for a fade.
 *
 * 3. REVEALS DEPEND ON A CLASS THAT JAVASCRIPT ADDS. If the script fails, no
 *    element is ever hidden. Content is never held hostage to motion.
 */

:root {
	--ps-ease: cubic-bezier(.22, .61, .36, 1);
	--ps-ease-out: cubic-bezier(.16, 1, .3, 1);
	--ps-ease-spring: cubic-bezier(.34, 1.4, .64, 1);

	--ps-t1: 140ms;
	--ps-t2: 300ms;
	--ps-t3: 560ms;
	--ps-t4: 900ms;

	--ps-stagger: 70ms;
	--ps-rise: 20px;
}

/* Subtle mode: same choreography, less travel and quicker. */
body.ps-motion--subtle {
	--ps-t3: 380ms;
	--ps-t4: 500ms;
	--ps-stagger: 45ms;
	--ps-rise: 10px;
}

/* ==========================================================================
   1. Scroll reveals
   ========================================================================== */

body.ps-motion [data-reveal] {
	opacity: 0;
	transition:
		opacity var(--ps-t3) var(--ps-ease-out),
		transform var(--ps-t3) var(--ps-ease-out);
	transition-delay: calc(var(--ps-i, 0) * var(--ps-stagger));
}

body.ps-motion [data-reveal="up"]    { transform: translate3d(0, var(--ps-rise), 0); }
body.ps-motion [data-reveal="down"]  { transform: translate3d(0, calc(var(--ps-rise) * -1), 0); }
body.ps-motion [data-reveal="left"]  { transform: translate3d(calc(var(--ps-rise) * -1.4), 0, 0); }
body.ps-motion [data-reveal="right"] { transform: translate3d(calc(var(--ps-rise) * 1.4), 0, 0); }
body.ps-motion [data-reveal="scale"] { transform: scale(.94); }
body.ps-motion [data-reveal="fade"]  { transform: none; }

body.ps-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   2. Hero entrance
   ========================================================================== */

@keyframes ps-rise-in {
	from { opacity: 0; transform: translate3d(0, 24px, 0); }
	to   { opacity: 1; transform: none; }
}

body.ps-motion .ps-hero__seq > * {
	animation: ps-rise-in var(--ps-t4) var(--ps-ease-out) both;
}
body.ps-motion .ps-hero__seq > *:nth-child(1) { animation-delay: 60ms; }
body.ps-motion .ps-hero__seq > *:nth-child(2) { animation-delay: 160ms; }
body.ps-motion .ps-hero__seq > *:nth-child(3) { animation-delay: 240ms; }
body.ps-motion .ps-hero__seq > *:nth-child(4) { animation-delay: 320ms; }

body.ps-motion .ps-hero__media {
	animation: ps-media-in 1s var(--ps-ease-out) 120ms both;
}
@keyframes ps-media-in {
	from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   3. The shapla draws itself
   ==========================================================================
   The signature moment: five petals fan open from the base, the ring draws
   around them, then the water line sweeps in. Runs once, on the hero only.
   ========================================================================== */

.ps-mark__petal,
.ps-mark__ring,
.ps-mark__water { transform-box: view-box; }

@keyframes ps-petal-open {
	from { opacity: 0; transform: scale(.2) rotate(var(--ps-petal-from, 0deg)); }
	to   { opacity: 1; transform: none; }
}

@keyframes ps-ring-draw {
	from { stroke-dashoffset: 252; }
	to   { stroke-dashoffset: 0; }
}

@keyframes ps-water-draw {
	from { stroke-dashoffset: 44; opacity: 0; }
	to   { stroke-dashoffset: 0; opacity: 1; }
}

body.ps-motion .ps-mark--animate .ps-mark__petal {
	transform-origin: 50px 78px;
	animation: ps-petal-open 760ms var(--ps-ease-spring) both;
}
body.ps-motion .ps-mark--animate .ps-mark__petal:nth-child(2) { --ps-petal-from: 26deg;  animation-delay: 340ms; }
body.ps-motion .ps-mark--animate .ps-mark__petal:nth-child(3) { --ps-petal-from: 14deg;  animation-delay: 420ms; }
body.ps-motion .ps-mark--animate .ps-mark__petal:nth-child(4) { --ps-petal-from: 0deg;   animation-delay: 500ms; }
body.ps-motion .ps-mark--animate .ps-mark__petal:nth-child(5) { --ps-petal-from: -14deg; animation-delay: 420ms; }
body.ps-motion .ps-mark--animate .ps-mark__petal:nth-child(6) { --ps-petal-from: -26deg; animation-delay: 340ms; }

body.ps-motion .ps-mark--animate .ps-mark__ring {
	stroke-dasharray: 252;
	animation: ps-ring-draw 1.1s var(--ps-ease-out) both;
}

body.ps-motion .ps-mark--animate .ps-mark__water {
	stroke-dasharray: 44;
	animation: ps-water-draw 620ms var(--ps-ease-out) 900ms both;
}

/* ==========================================================================
   4. Header on scroll
   ========================================================================== */

.ps-header {
	transition:
		box-shadow var(--ps-t2) var(--ps-ease),
		background-color var(--ps-t2) var(--ps-ease);
}
.ps-header__inner {
	transition: min-height var(--ps-t2) var(--ps-ease);
}
.ps-logo img, .ps-logo svg {
	transition: transform var(--ps-t2) var(--ps-ease);
	transform-origin: left center;
}

body.ps-motion.is-scrolled .ps-header {
	box-shadow: 0 2px 16px rgba(31, 36, 33, .10);
}
body.ps-motion.is-scrolled .ps-header__inner { min-height: 3.75rem; }
body.ps-motion.is-scrolled .ps-logo img,
body.ps-motion.is-scrolled .ps-logo svg { transform: scale(.86); }

/* The green strip slides away to give content room, but only upward, so it
   never covers anything. */
.ps-header__strip {
	transition: max-height var(--ps-t2) var(--ps-ease), opacity var(--ps-t1) linear;
	max-height: 4rem;
	overflow: hidden;
}
body.ps-motion.is-scrolled .ps-header__strip {
	max-height: 0;
	opacity: 0;
}

/* ==========================================================================
   5. Tap feedback
   ==========================================================================
   Not decoration. Many visitors are unsure whether a tap registered, and tap
   the same button repeatedly. A visible response answers that question.
   ========================================================================== */

.ps-btn, .ps-service, .ps-channel, .ps-choice, .ps-audio__btn, .ps-faq summary {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

.ps-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: currentColor;
	opacity: .22;
	transform: scale(0);
	animation: ps-ripple 620ms var(--ps-ease-out) forwards;
}
@keyframes ps-ripple {
	to { transform: scale(2.4); opacity: 0; }
}

body.ps-motion .ps-btn:active   { transform: translateY(1px) scale(.985); }
body.ps-motion .ps-service:active,
body.ps-motion .ps-channel:active { transform: scale(.98); }

body.ps-motion .ps-service {
	transition:
		border-color var(--ps-t2) var(--ps-ease),
		box-shadow var(--ps-t2) var(--ps-ease),
		transform var(--ps-t1) var(--ps-ease);
}
body.ps-motion .ps-service__icon {
	transition:
		background-color var(--ps-t2) var(--ps-ease),
		color var(--ps-t2) var(--ps-ease),
		transform var(--ps-t2) var(--ps-ease-spring);
}
body.ps-motion .ps-service:hover .ps-service__icon { transform: scale(1.08) rotate(-4deg); }

body.ps-motion .ps-channel__icon {
	transition: transform var(--ps-t2) var(--ps-ease-spring);
}
body.ps-motion .ps-channel:hover .ps-channel__icon { transform: scale(1.09); }

/* ==========================================================================
   6. Audio explainer — the one element allowed to ask for attention
   ==========================================================================
   A ring pulses out three times, then stops for good. It also stops the moment
   the button is used. This is the feature a visitor who cannot read most needs
   to notice, and three pulses is enough to draw the eye without nagging.
   ========================================================================== */

.ps-audio__btn::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--ps-green);
	opacity: 0;
	pointer-events: none;
}

body.ps-motion .ps-audio:not([data-used="true"]) .ps-audio__btn::before {
	animation: ps-attention 2.4s var(--ps-ease-out) 3;
	animation-delay: 1.2s;
}
@keyframes ps-attention {
	0%   { transform: scale(.9); opacity: 0; }
	18%  { opacity: .55; }
	60%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* Playing: a slow breath, so it is obvious sound is coming out even with the
   volume down or in a noisy room. */
body.ps-motion .ps-audio[data-playing="true"] .ps-audio__btn {
	animation: ps-breathe 1.8s ease-in-out infinite;
}
@keyframes ps-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}

body.ps-motion .ps-audio[data-playing="true"] {
	border-color: var(--ps-green);
}
.ps-audio { transition: border-color var(--ps-t2) var(--ps-ease); }

/* ==========================================================================
   7. Steps, trust cards, FAQ
   ========================================================================== */

body.ps-motion .ps-step__num {
	transition: transform var(--ps-t2) var(--ps-ease-spring);
}
body.ps-motion .ps-step:hover .ps-step__num { transform: scale(1.1); }

body.ps-motion .ps-trust__card {
	transition:
		transform var(--ps-t2) var(--ps-ease),
		box-shadow var(--ps-t2) var(--ps-ease),
		border-color var(--ps-t2) var(--ps-ease);
}
body.ps-motion .ps-trust__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ps-shadow-lift);
	border-color: var(--ps-ring);
}

/* details cannot transition height natively on the browsers this audience
   uses, so the panel is animated by script setting --ps-h. */
body.ps-motion .ps-faq details[open] > .ps-prose {
	animation: ps-panel-open var(--ps-t2) var(--ps-ease-out) both;
}
@keyframes ps-panel-open {
	from { opacity: 0; transform: translate3d(0, -6px, 0); }
	to   { opacity: 1; transform: none; }
}

body.ps-motion .ps-faq summary::after {
	transition: transform var(--ps-t2) var(--ps-ease-spring);
}

/* ==========================================================================
   8. Form
   ========================================================================== */

body.ps-motion .ps-group--conditional.is-revealing {
	animation: ps-group-in 420ms var(--ps-ease-out) both;
}
@keyframes ps-group-in {
	from { opacity: 0; transform: translate3d(0, -10px, 0); }
	to   { opacity: 1; transform: none; }
}

.ps-field input, .ps-field textarea, .ps-field select {
	transition:
		border-color var(--ps-t1) var(--ps-ease),
		box-shadow var(--ps-t1) var(--ps-ease);
}
body.ps-motion .ps-field input:focus,
body.ps-motion .ps-field textarea:focus,
body.ps-motion .ps-field select:focus {
	box-shadow: 0 0 0 4px rgba(0, 106, 78, .12);
}

.ps-choice { transition: border-color var(--ps-t1) var(--ps-ease), background-color var(--ps-t1) var(--ps-ease), transform var(--ps-t1) var(--ps-ease); }
body.ps-motion .ps-choice:active { transform: scale(.985); }

/* Submit in progress. Stops double submissions and answers "did it work". */
.ps-btn.is-busy { pointer-events: none; opacity: .75; }
.ps-btn.is-busy .ps-spinner {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2.5px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ps-spin 700ms linear infinite;
}
.ps-spinner { display: none; }
@keyframes ps-spin { to { transform: rotate(360deg); } }

/* Result notices arrive rather than appear. */
body.ps-motion .ps-notice {
	animation: ps-notice-in 480ms var(--ps-ease-spring) both;
}
@keyframes ps-notice-in {
	from { opacity: 0; transform: translate3d(0, -12px, 0) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. Mobile action bar
   ==========================================================================
   Slides up once on first paint so it is noticed, then never moves again. It is
   never faded in — it renders opaque from the first frame.
   ========================================================================== */

body.ps-motion .ps-actionbar {
	animation: ps-bar-up 520ms var(--ps-ease-out) 260ms both;
}
@keyframes ps-bar-up {
	from { transform: translate3d(0, 100%, 0); }
	to   { transform: none; }
}

body.ps-motion .ps-actionbar a { transition: background-color var(--ps-t1) var(--ps-ease); }
body.ps-motion .ps-actionbar a:active { background-color: var(--ps-light); }
body.ps-motion .ps-actionbar__call:active { background-color: var(--ps-red-dark); }

/* Full mode only: the call segment brightens every eight seconds until the
   visitor interacts with the page. Deliberately slow and low contrast — a
   flashing button reads as an advert, which is the opposite of trustworthy. */
body.ps-motion--full:not(.is-engaged) .ps-actionbar__call {
	animation: ps-callglow 8s ease-in-out 3s infinite;
}
@keyframes ps-callglow {
	0%, 88%, 100% { background-color: var(--ps-red); }
	94%           { background-color: #FF4054; }
}

/* ==========================================================================
   10. Counting numbers in the trust line
   ========================================================================== */

.ps-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   11. Reduced motion — a real kill switch, not a softening
   ==========================================================================
   Vestibular disorders make parallax and scaling genuinely nauseating. When the
   operating system asks for less motion, everything stops. Reveals resolve to
   fully visible so no content is lost.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body.ps-motion [data-reveal],
	body.ps-motion [data-reveal].is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	body.ps-motion *,
	body.ps-motion *::before,
	body.ps-motion *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	body.ps-motion.is-scrolled .ps-header__strip { max-height: 4rem; opacity: 1; }
	body.ps-motion.is-scrolled .ps-logo img,
	body.ps-motion.is-scrolled .ps-logo svg { transform: none; }
	.ps-ripple { display: none; }
}