/**
*	Enhanced Animations — Abhijeet RG Portfolio
*	Additive layer: loaded last, overrides only. Never replaces base theme rules.
*
*	TABLE OF CONTENTS
*	 1.  Tokens
*	 2.  Reveal engine (scroll-in / scroll-out)
*	 3.  Reveal variants
*	 4.  Cards
*	 5.  Section titles
*	 6.  Content blocks
*	 7.  Skills (bars + circles)
*	 8.  Works / Blog boxes
*	 9.  Contact
*	10.  Hero (card-started)
*	11.  Header / mobile nav
*	12.  Scroll progress, back-to-top, chat
*	13.  Buttons, links, ripple
*	14.  Background (aurora + bubbles)
*	15.  Preloader
*	16.  Desktop card in/out transitions
*	17.  Mobile fit — no horizontal scroll, tighter density
*	18.  Reduced motion
**/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--rv-accent: #ff9800;
	--rv-accent-soft: rgba(255, 152, 0, 0.35);
	--rv-accent-glow: rgba(255, 152, 0, 0.55);
	--rv-surface: #31313a;
	--rv-ease: cubic-bezier(0.22, 0.75, 0.28, 1);
	--rv-ease-back: cubic-bezier(0.34, 1.42, 0.5, 1);
	--rv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--rv-dur: 0.78s;
	--rv-step: 70ms;
}

/* ==========================================================================
   2. Reveal engine — one rule drives every in AND out animation
   ========================================================================== */

/*
	`.rv` is only added by JS, and the hidden state is gated behind
	`html.rv-ready`, so if the script never runs the page stays fully visible.
*/
html.rv-ready .rv {
	opacity: 0;
	/*
		Deliberately 2D and never scaled above 1: a rotateX/perspective box
		projects wider than its layout box and drags a horizontal scrollbar
		onto the page at phone widths.
	*/
	transform:
		translate3d(var(--rv-x, 0px), calc(var(--rv-y, 46px) * var(--rv-ys, 1)), 0)
		scale(var(--rv-s, 1))
		rotate(var(--rv-rz, 0deg));
	transition:
		opacity var(--rv-dur) var(--rv-ease) var(--rv-delay, 0ms),
		transform var(--rv-dur) var(--rv-ease) var(--rv-delay, 0ms);
	transform-origin: var(--rv-origin, 50% 50%);
	backface-visibility: hidden;
}

html.rv-ready .rv.is-in {
	opacity: 1;
	transform: none;
}

/* element sits above the viewport -> it leaves upwards instead of downwards */
html.rv-ready .rv.rv-above {
	--rv-ys: -1;
}

/* stagger: JS writes --i, the delay falls out of it */
html.rv-ready .rv {
	--rv-delay: calc(var(--i, 0) * var(--rv-step));
}

/* leaving is quicker than arriving — feels responsive, never sluggish */
html.rv-ready .rv:not(.is-in) {
	transition-duration: 0.45s;
	--rv-delay: 0ms;
}

/* ==========================================================================
   3. Reveal variants
   ========================================================================== */

html.rv-ready .rv-up      { --rv-y: 46px; }
html.rv-ready .rv-down    { --rv-y: -46px; }
html.rv-ready .rv-left    { --rv-x: -34px; --rv-y: 14px; }
html.rv-ready .rv-right   { --rv-x: 34px;  --rv-y: 14px; }
html.rv-ready .rv-zoom    { --rv-y: 34px;  --rv-s: 0.9; }
html.rv-ready .rv-pop     { --rv-y: 26px;  --rv-s: 0.62; --rv-rz: -8deg; }
html.rv-ready .rv-pop.is-in { transition-timing-function: var(--rv-ease-back); }
html.rv-ready .rv-flip    { --rv-y: 30px;  --rv-s: 0.94; --rv-origin: 50% 100%; }
/*
	Cards are the full height of a section — 2000px and more. Scaling a box that
	tall drifts its lower content by tens of pixels while the transition runs,
	which reads as the page wobbling under your thumb mid-scroll. They get a
	short, uniform slide instead; the detail comes from the content inside them.
*/
html.rv-ready .rv-card    { --rv-y: 18px;  --rv-s: 1; --rv-origin: 50% 0%; }
html.rv-ready .rv-title   { --rv-x: -22px; --rv-y: 0px; }

/* ==========================================================================
   4. Cards
   ========================================================================== */

@media (max-width: 1199px) {
	/*
		The shadow is set once rather than transitioned: re-blurring a 60px
		shadow across a full-height card every frame is a real scroll cost.
	*/
	.page.new-skin .card-inner {
		box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.65);
	}
}

/* ==========================================================================
   5. Section titles
   ========================================================================== */

html.rv-ready .content .title.rv:before {
	transform: scale(0.2) rotate(-45deg);
	opacity: 0;
	transition: transform 0.7s var(--rv-ease-back) 0.12s, opacity 0.5s linear 0.12s;
}

html.rv-ready .content .title.rv.is-in:before {
	transform: scale(1) rotate(0deg);
	opacity: 1;
}

html.rv-ready .content .title.rv:after {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.9s var(--rv-ease-out) 0.18s;
}

html.rv-ready .content .title.rv.is-in:after {
	transform: scaleX(1);
}

/* the accent first word gets a small extra beat */
html.rv-ready .content .title.rv .first-word,
html.rv-ready .content .title.rv .first-letter {
	display: inline-block;
	transform: translateY(0.35em);
	opacity: 0;
	transition: transform 0.65s var(--rv-ease-back) 0.1s, opacity 0.45s linear 0.1s;
}

html.rv-ready .content .title.rv.is-in .first-word,
html.rv-ready .content .title.rv.is-in .first-letter {
	transform: translateY(0);
	opacity: 1;
}

/* ==========================================================================
   6. Content blocks
   ========================================================================== */

/* service cards — reveal only, no hover or press state */
.service-items .service-item .icon {
	transition: transform 0.55s var(--rv-ease-back), color 0.35s ease;
}

html.rv-ready .service-item.rv .icon {
	transform: scale(0.4) rotate(-25deg);
}

html.rv-ready .service-item.rv.is-in .icon {
	transform: scale(1) rotate(0deg);
	transition-delay: calc(var(--rv-delay, 0ms) + 140ms);
}

/* fun facts */
.fuct-items .fuct-item .icon {
	transition: transform 0.6s var(--rv-ease-back);
}

html.rv-ready .fuct-item.rv .icon {
	transform: scale(0.3) rotate(20deg);
}

html.rv-ready .fuct-item.rv.is-in .icon {
	transform: scale(1) rotate(0deg);
	transition-delay: calc(var(--rv-delay, 0ms) + 120ms);
}

.fuct-items .fuct-item .rv-num {
	display: inline-block;
	font-style: normal;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	text-align: center;
	color: var(--rv-accent);
}

@media (hover: hover) {
	.fuct-items .fuct-item:hover .icon {
		animation: rvBob 0.9s var(--rv-ease) both;
	}
}

@keyframes rvBob {
	0%   { transform: translateY(0) scale(1); }
	35%  { transform: translateY(-8px) scale(1.1); }
	100% { transform: translateY(0) scale(1); }
}

/* resume timeline */
.resume-items .resume-item .date {
	transition: transform 0.5s var(--rv-ease-back), color 0.35s ease;
}

html.rv-ready .resume-item.rv .date {
	transform: translateX(-14px);
}

html.rv-ready .resume-item.rv.is-in .date {
	transform: translateX(0);
	transition-delay: calc(var(--rv-delay, 0ms) + 120ms);
}

.resume-items .resume-item.active .date:before {
	animation: rvPulseDot 2.6s ease-in-out infinite;
}

@keyframes rvPulseDot {
	0%, 100% { box-shadow: 0 0 0 0 var(--rv-accent-soft); }
	50%      { box-shadow: 0 0 0 7px rgba(255, 152, 0, 0); }
}

/*
	Info lists — label column, a leader that stretches to fill, then the value.
	The theme let the dots run inside the label, so every row started its value
	at a different x; a fixed label track lines them all up instead.
*/
.info-list ul {
	display: flex;
	flex-wrap: wrap;
}

.info-list ul li,
/* these two carry a higher-specificity `display: block` in the theme */
.content.contacts .info-list ul li,
.blog-single .info-list ul li {
	display: flex;
	align-items: baseline;
	transition: transform 0.4s var(--rv-ease), color 0.3s ease;
}

.info-list ul li strong {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	width: 130px;
	margin-right: 0;
	white-space: nowrap;
}

/*
	The theme's literal " . . . ." becomes a rule that fills the leftover space.
	new-skin.css pins this pseudo-element with `margin-left: 0 !important`, which
	is what collapsed the gap on the left of the dots while the right kept its
	10px — so the override has to be !important too, to sit either side evenly.
*/
.info-list ul li strong:after {
	content: "";
	position: static;
	display: block;
	flex: 1 1 auto;
	margin: 0 0 0.34em 0;
	margin-left: 10px !important;
	background: none;
	border-bottom: 1px dotted currentColor;
	opacity: 0.4;
}

.info-list ul li .val {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 10px;
	overflow-wrap: break-word;
}

@media (hover: hover) {
	.info-list ul li:hover {
		transform: translateX(4px);
	}
}

/* quote */
html.rv-ready .revs-item.rv .user .img {
	transform: scale(0.5);
	opacity: 0;
	transition: transform 0.7s var(--rv-ease-back) 0.25s, opacity 0.5s linear 0.25s;
}

html.rv-ready .revs-item.rv.is-in .user .img {
	transform: scale(1);
	opacity: 1;
}

/* ==========================================================================
   7. Skills
   ========================================================================== */

.skills-list ul li .progress .percentage {
	transition: width 1.15s var(--rv-ease-out) 0.15s;
	box-shadow: 0 0 12px -2px var(--rv-accent-glow);
}

.skills-list ul li .progress .percentage:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--rv-accent);
	box-shadow: 0 0 10px var(--rv-accent-glow);
	opacity: 0;
	transition: opacity 0.4s ease 0.9s;
}

html.rv-ready .skills-list ul li.rv.is-in .progress .percentage:after {
	opacity: 1;
}

.skills-list.circles .progress .bar,
.skills-list.circles .progress .fill {
	will-change: transform;
}

.skills-list.circles .progress span {
	font-variant-numeric: tabular-nums;
}

html.rv-ready .skills-list.circles ul li.rv .progress {
	box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
	transition: box-shadow 0.8s var(--rv-ease) 0.5s;
}

html.rv-ready .skills-list.circles ul li.rv.is-in .progress {
	box-shadow: 0 0 26px -6px var(--rv-accent-soft);
}

/* knowledge list check marks draw in */
.skills-list.list ul li .name:before {
	transition: transform 0.5s var(--rv-ease-back), opacity 0.4s ease;
}

html.rv-ready .skills-list.list ul li.rv .name:before {
	transform: scale(0) rotate(-90deg);
	opacity: 0;
}

html.rv-ready .skills-list.list ul li.rv.is-in .name:before {
	transform: scale(1) rotate(0deg);
	opacity: 1;
	transition-delay: calc(var(--rv-delay, 0ms) + 120ms);
}

/* ==========================================================================
   8. Works / Blog boxes
   ========================================================================== */

.box-item .image a img {
	transition: transform 0.75s var(--rv-ease), filter 0.5s ease;
}

html.rv-ready .box-item.rv .image a img {
	transform: scale(1.16);
	filter: saturate(0.6);
}

html.rv-ready .box-item.rv.is-in .image a img {
	transform: scale(1);
	filter: saturate(1);
}

.box-item .desc {
	transition: transform 0.5s var(--rv-ease);
}

html.rv-ready .box-item.rv .desc {
	transform: translateY(16px);
}

html.rv-ready .box-item.rv.is-in .desc {
	transform: translateY(0);
	transition-delay: calc(var(--rv-delay, 0ms) + 160ms);
}

.box-item .image .info .ion {
	transition: transform 0.45s var(--rv-ease-back);
	transform: scale(0.4);
	display: inline-block;
}

.box-item:hover .image .info .ion,
.box-item .image a:focus .info .ion {
	transform: scale(1);
}

/* touch feedback — mobile has no hover to lean on */
.box-item .image a:active img {
	transform: scale(1.05);
}

.box-item .desc .name {
	background-image: linear-gradient(var(--rv-accent), var(--rv-accent));
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 100%;
	transition: background-size 0.45s var(--rv-ease-out);
}

.box-item:hover .desc .name,
.box-item .desc .name:focus {
	background-size: 100% 1px;
}

/* ==========================================================================
   9. Contact
   ========================================================================== */

.contact_form .group-val {
	position: relative;
}

.contact_form input,
.contact_form textarea {
	transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--rv-ease);
}

.contact_form input:focus,
.contact_form textarea:focus {
	box-shadow: 0 6px 18px -14px var(--rv-accent-glow);
}

.content.contacts .map {
	transition: filter 0.8s ease;
}

html.rv-ready .content.contacts .map.rv {
	filter: grayscale(1) brightness(0.7);
}

html.rv-ready .content.contacts .map.rv.is-in {
	filter: grayscale(0) brightness(1);
}

.alert-success p:not(:empty) {
	animation: rvPopIn 0.55s var(--rv-ease-back) both;
}

@keyframes rvPopIn {
	from { opacity: 0; transform: translateY(10px) scale(0.94); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   10. Hero — card-started
   ========================================================================== */

/*
	The hero is above the fold, so it plays on load rather than on scroll.
	Entrance uses `transform`/`opacity`; the scroll parallax below uses the
	independent `translate` property + `filter: opacity()` so the two layers
	compose instead of fighting each other.
*/
html.rv-ready .card-started .profile > * {
	opacity: 0;
}

html.rv-ready.is-loaded .card-started .profile .slide {
	animation: rvHeroSlide 1.1s var(--rv-ease-out) both;
}

html.rv-ready.is-loaded .card-started .profile .image {
	animation: rvHeroAvatar 0.95s var(--rv-ease-back) 0.18s both;
}

html.rv-ready.is-loaded .card-started .profile .title {
	animation: rvHeroUp 0.8s var(--rv-ease-out) 0.36s both;
}

html.rv-ready.is-loaded .card-started .profile .subtitle,
html.rv-ready.is-loaded .card-started .profile > .typed-cursor {
	animation: rvHeroUp 0.8s var(--rv-ease-out) 0.46s both;
}

html.rv-ready.is-loaded .card-started .profile .social {
	animation: rvFadeOnly 0.4s linear 0.56s both;
}

html.rv-ready.is-loaded .card-started .profile .lnks {
	animation: rvHeroUp 0.8s var(--rv-ease-out) 0.78s both;
}

html.rv-ready.is-loaded .card-started .profile .social a {
	animation: rvHeroPop 0.65s var(--rv-ease-back) both;
	animation-delay: calc(0.58s + var(--i, 0) * 80ms);
}

@keyframes rvHeroSlide {
	from { opacity: 0; transform: scale(1.12); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes rvHeroAvatar {
	from { opacity: 0; transform: scale(0.55) translateY(24px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rvHeroUp {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes rvHeroPop {
	from { opacity: 0; transform: scale(0.3) translateY(14px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rvFadeOnly {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* avatar: glow ring + slow float, both independent of the entrance */
.card-started .profile .image img {
	animation: rvFloat 6s ease-in-out 1.6s infinite;
	box-shadow: 0 0 0 0 rgba(255, 152, 0, 0), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
	transition: box-shadow 0.5s ease;
}

html.is-loaded .card-started .profile .image img {
	box-shadow: 0 0 34px -6px var(--rv-accent-soft), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}

@keyframes rvFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

/* scroll parallax layer (JS writes --hp / --hf) */
.card-started .profile .image  { translate: 0 calc(var(--hp, 0px) * 0.55); }
.card-started .profile .title  { translate: 0 calc(var(--hp, 0px) * 0.4); }
.card-started .profile .subtitle { translate: 0 calc(var(--hp, 0px) * 0.34); }
.card-started .profile .social { translate: 0 calc(var(--hp, 0px) * 0.26); }
.card-started .profile .lnks   { translate: 0 calc(var(--hp, 0px) * 0.18); }

html.is-loaded .card-started .profile .image,
html.is-loaded .card-started .profile .title,
html.is-loaded .card-started .profile .subtitle,
html.is-loaded .card-started .profile .social,
html.is-loaded .card-started .profile .lnks {
	filter: opacity(var(--hf, 1));
}

/* social icons */
.card-started .profile .social a {
	transition: transform 0.4s var(--rv-ease-back), color 0.3s ease;
}

@media (hover: hover) {
	.card-started .profile .social a:hover {
		transform: translateY(-5px) scale(1.18);
	}
}

.card-started .profile .social a:active {
	transform: scale(0.86);
}

/*
	The typed line shrink-wraps its text, so every character typed resized the
	box and re-centred it — ~30 layout invalidations a second, running forever
	and competing with the scroll. A full-width box keeps the geometry fixed
	and lets the text move inside it instead.
*/
.card-started .profile .subtitle.subtitle-typed {
	width: 100%;
	min-width: 0;
	text-align: center;
}

/* typed cursor: softer blink than the library default */
.typed-cursor {
	animation: rvBlink 1.1s steps(1) infinite !important;
}

@keyframes rvBlink {
	0%, 45%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ==========================================================================
   11. Header / mobile nav
   ========================================================================== */

.header .top-menu {
	position: relative;
}

.header .top-menu ul li a {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
}

.header .top-menu ul li a .icon {
	transition: transform 0.45s var(--rv-ease-back);
}

.header .top-menu ul li.active a .icon {
	transform: translateY(-2px) scale(1.16);
}

.header .top-menu ul li a .link {
	transition: transform 0.35s var(--rv-ease), opacity 0.3s ease, color 0.3s ease;
}

.header .top-menu ul li.active a .link {
	transform: translateY(1px);
}

/* sliding indicator */
.header .top-menu .rv-pill {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 3px;
	pointer-events: none;
	opacity: 0;
	border-radius: 4px;
	background: var(--rv-accent);
	box-shadow: 0 0 14px -1px var(--rv-accent-glow);
	transition:
		transform 0.5s var(--rv-ease-back),
		width 0.4s var(--rv-ease),
		height 0.4s var(--rv-ease),
		opacity 0.3s ease;
	z-index: 3;
}

/* glassy condensed bar once the page starts scrolling */
@media (max-width: 560px) {
	.page.new-skin .header {
		transition: box-shadow 0.4s ease;
	}

	.page.new-skin .header .top-menu ul {
		background: rgba(30, 30, 36, 0.92);
		transition: background 0.4s ease;
		/* own layer: the bar is re-composited on every scroll frame */
		transform: translateZ(0);
	}

	/*
		The blur is the most expensive thing on screen while scrolling, so it
		is kept small and only used where the compositor can afford it.
	*/
	@media (min-width: 400px) {
		.page.new-skin .header .top-menu ul {
			background: rgba(30, 30, 36, 0.78);
			-webkit-backdrop-filter: saturate(140%) blur(10px);
			backdrop-filter: saturate(140%) blur(10px);
		}
	}

	.page.new-skin .header .top-menu ul li a {
		background: transparent;
	}

	.page.new-skin .header.rv-stuck {
		box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
	}

	.page.new-skin .header.rv-stuck .top-menu ul {
		background: rgba(23, 23, 27, 0.9);
	}

	.page.new-skin .header.rv-stuck .top-menu ul li:not(.active) a .link {
		transform: translateY(3px);
		opacity: 0.6;
	}
}

/* tablet rail: indicator runs vertically, JS switches the geometry */
@media (min-width: 561px) and (max-width: 1199px) {
	.page.new-skin .header {
		transition: transform 0.5s var(--rv-ease), box-shadow 0.4s ease;
	}

	.page.new-skin .header.rv-stuck {
		box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
	}
}

/* ==========================================================================
   12. Scroll progress + back to top
   ========================================================================== */

.rv-scroll-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.06);
	z-index: 101;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

html.is-loaded .rv-scroll-progress {
	opacity: 1;
}

.rv-scroll-progress i {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--rv-accent-soft), var(--rv-accent));
	box-shadow: 0 0 12px var(--rv-accent-glow);
}

@media (min-width: 1200px) {
	.rv-scroll-progress { display: none; }
}

.rv-top {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rv-surface);
	color: var(--rv-accent);
	font-size: 20px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
	z-index: 102;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(0.7);
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.85);
	-webkit-tap-highlight-color: transparent;
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		transform 0.5s var(--rv-ease-back);
}

.rv-top.is-on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.rv-top:active {
	transform: scale(0.88);
}

.rv-top:before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--rv-accent-soft);
	opacity: 0;
	animation: rvRing 2.8s ease-out infinite;
}

.rv-top.is-on:before {
	opacity: 1;
}

@keyframes rvRing {
	0%   { transform: scale(0.9); opacity: 0.7; }
	70%  { transform: scale(1.28); opacity: 0; }
	100% { transform: scale(1.28); opacity: 0; }
}

@media (min-width: 1200px) {
	.rv-top { display: none; }
}

/* --- chat launcher ------------------------------------------------------ */

/*
	The chat button is the anchor of the bottom-right stack; back-to-top rides
	above it, so the two never overlap on phones.
*/
.rv-chat {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	width: 52px;
	height: 52px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rv-accent);
	color: #1b1b20;
	font-size: 24px;
	line-height: 52px;
	text-align: center;
	cursor: pointer;
	z-index: 103;
	opacity: 0;
	transform: scale(0.6);
	box-shadow: 0 16px 34px -12px rgba(255, 152, 0, 0.55), 0 8px 18px -10px rgba(0, 0, 0, 0.9);
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.5s var(--rv-ease-back), opacity 0.4s ease, box-shadow 0.35s ease;
}

html.is-loaded .rv-chat {
	opacity: 1;
	transform: scale(1);
}

.rv-chat:active {
	transform: scale(0.9);
}

@media (hover: hover) {
	.rv-chat:hover {
		box-shadow: 0 20px 40px -10px rgba(255, 152, 0, 0.7), 0 8px 18px -10px rgba(0, 0, 0, 0.9);
	}
}

/* attention ring, quiet enough not to nag */
.rv-chat:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--rv-accent);
	animation: rvRing 3.2s ease-out infinite;
	pointer-events: none;
}

.rv-chat .ion {
	position: relative;
	z-index: 1;
}

/* back-to-top sits above the floating chat button instead of under it */
.rv-top {
	bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}

/* --- chat launcher, phone: docked in the header bar -------------------- */

.rv-chat-head {
	display: none;
	position: absolute;
	right: 14px;
	top: 12px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rv-accent);
	color: #1b1b20;
	font-size: 19px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	z-index: 6;
	opacity: 0;
	transform: scale(0.6);
	box-shadow: 0 8px 18px -8px var(--rv-accent-glow);
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.45s var(--rv-ease-back), opacity 0.4s ease;
}

html.is-loaded .rv-chat-head {
	opacity: 1;
	transform: scale(1);
}

.rv-chat-head:active {
	transform: scale(0.88);
}

@media (max-width: 560px) {
	/* one launcher at a time: the header one replaces the floating one */
	.rv-chat-head {
		display: block;
	}

	.rv-chat {
		display: none;
	}

	/* with no chat button in the corner, back-to-top takes the spot back */
	.rv-top {
		bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	}
}

/* --- coming-soon modal -------------------------------------------------- */

.rv-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.rv-modal[hidden] {
	display: none;
}

.rv-modal .rv-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 13, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.32s ease;
}

.rv-modal .rv-modal-panel {
	position: relative;
	width: 100%;
	max-width: 380px;
	padding: 36px 28px 30px 28px;
	border-radius: 14px;
	background: var(--rv-surface);
	text-align: center;
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
	opacity: 0;
	transform: translateY(18px) scale(0.94);
	transition: opacity 0.35s var(--rv-ease), transform 0.45s var(--rv-ease-back);
}

.rv-modal.is-open .rv-modal-backdrop {
	opacity: 1;
}

.rv-modal.is-open .rv-modal-panel {
	opacity: 1;
	transform: none;
}

.rv-modal .rv-modal-icon {
	margin: 0 auto 18px auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 62px;
	color: var(--rv-accent);
	background: rgba(255, 152, 0, 0.12);
}

.rv-modal h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.rv-modal p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65em;
	color: rgba(255, 255, 255, 0.55);
}

.rv-modal .rv-modal-tag {
	display: inline-block;
	margin: 0 0 16px 0;
	padding: 4px 12px;
	border-radius: 20px;
	border: 1px solid var(--rv-accent-soft);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rv-accent);
}

.rv-modal .rv-modal-close {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.5);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.25s ease, background 0.25s ease, transform 0.3s var(--rv-ease);
}

/* filled accent + a quarter turn, rather than a grey blob behind the glyph */
@media (hover: hover) {
	.rv-modal .rv-modal-close:hover {
		color: #1b1b20;
		background: var(--rv-accent);
		transform: rotate(90deg);
	}

	.rv-modal .rv-modal-close:hover:active {
		transform: rotate(90deg) scale(0.9);
	}
}

.rv-modal .rv-modal-close:active {
	transform: scale(0.9);
}

/* keyboard focus reads as a ring, not as a hover state */
.rv-modal .rv-modal-close:focus-visible {
	outline: 2px solid var(--rv-accent);
	outline-offset: 2px;
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 380px) {
	.rv-modal .rv-modal-panel {
		padding: 32px 20px 26px 20px;
	}
}

/* ==========================================================================
   13. Buttons, links, ripple
   ========================================================================== */

.lnk,
.button {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.35s var(--rv-ease), color 0.3s ease;
}

/*
	The sweep moves with a transform, not `left`. Animating `left` re-lays out
	the button on every frame of a loop that never ends, which is pure main
	thread cost while you are trying to scroll.
*/
.lnk:after,
.button:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translate3d(-150%, 0, 0) skewX(-18deg);
	pointer-events: none;
	will-change: transform;
}

html.is-loaded .lnk:after,
html.is-loaded .button:after {
	animation: rvShine 5.5s ease-in-out infinite;
}

.lnk:nth-child(2):after {
	animation-delay: 1.6s;
}

@keyframes rvShine {
	0%, 62%   { transform: translate3d(-150%, 0, 0) skewX(-18deg); }
	88%, 100% { transform: translate3d(330%, 0, 0) skewX(-18deg); }
}

.lnk:active,
.button:active {
	transform: scale(0.96);
}

@media (hover: hover) {
	.lnk:hover,
	.button:hover {
		transform: translateY(-2px);
	}
}

.rv-ripple {
	position: absolute;
	border-radius: 50%;
	background: var(--rv-accent-soft);
	transform: scale(0);
	opacity: 0.85;
	pointer-events: none;
	animation: rvRipple 0.65s var(--rv-ease-out) forwards;
	z-index: 0;
}

@keyframes rvRipple {
	to { transform: scale(2.6); opacity: 0; }
}

/* ==========================================================================
   14. Background — aurora + bubbles
   ========================================================================== */

.rv-aurora {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.rv-aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	opacity: 0.55;
	will-change: transform;
}

.rv-aurora span:nth-child(1) {
	left: -18vmax;
	top: -14vmax;
	width: 62vmax;
	height: 62vmax;
	background: radial-gradient(circle, rgba(255, 152, 0, 0.2) 0%, rgba(255, 152, 0, 0) 62%);
	animation: rvDrift1 26s ease-in-out infinite;
}

.rv-aurora span:nth-child(2) {
	right: -22vmax;
	top: 18%;
	width: 70vmax;
	height: 70vmax;
	background: radial-gradient(circle, rgba(80, 163, 162, 0.22) 0%, rgba(80, 163, 162, 0) 62%);
	animation: rvDrift2 34s ease-in-out infinite;
}

.rv-aurora span:nth-child(3) {
	left: 12%;
	bottom: -26vmax;
	width: 66vmax;
	height: 66vmax;
	background: radial-gradient(circle, rgba(120, 204, 109, 0.18) 0%, rgba(120, 204, 109, 0) 62%);
	animation: rvDrift3 30s ease-in-out infinite;
}

@keyframes rvDrift1 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(8vmax, 10vmax, 0) scale(1.18); }
}

@keyframes rvDrift2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
	50%      { transform: translate3d(-10vmax, 8vmax, 0) scale(0.92); }
}

@keyframes rvDrift3 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
	50%      { transform: translate3d(9vmax, -9vmax, 0) scale(1.15); }
}

.bg-bubbles li {
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* fewer, cheaper bubbles on phones */
@media (max-width: 680px) {
	.bg-bubbles li:nth-child(2),
	.bg-bubbles li:nth-child(7),
	.bg-bubbles li:nth-child(10) {
		display: none;
	}

	.rv-aurora span {
		opacity: 0.7;
	}
}

/* ==========================================================================
   15. Preloader
   ========================================================================== */

.preloader {
	background: #17171b;
}

.preloader .spinner:before {
	content: "";
	position: absolute;
	left: -14px;
	top: -14px;
	right: -14px;
	bottom: -14px;
	border-radius: 50%;
	border: 2px solid rgba(255, 152, 0, 0.15);
	border-top-color: var(--rv-accent);
	animation: rvSpin 1.1s linear infinite;
}

@keyframes rvSpin {
	to { transform: rotate(360deg); }
}

.preloader .spinner .double-bounce1,
.preloader .spinner .double-bounce2 {
	box-shadow: 0 0 26px -4px var(--rv-accent-glow);
}

/* ==========================================================================
   16. Desktop card in / out transitions
       Re-points the theme's animate.css classes at richer keyframes.
       The markup and scripts.js logic stay exactly as they were.
   ========================================================================== */

@media (min-width: 1200px) {
	.page.new-skin .card-inner.animated.fadeInLeft {
		animation-name: rvCardIn;
		animation-duration: 0.85s;
		animation-timing-function: var(--rv-ease-out);
	}

	.page.new-skin .card-inner.animated.fadeOutLeft {
		animation-name: rvCardOut;
		animation-duration: 0.55s;
		animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
	}

	@keyframes rvCardIn {
		from {
			opacity: 0;
			transform: perspective(1400px) translate3d(-70px, 26px, 0) rotateY(9deg) scale(0.94);
			filter: blur(6px);
		}
		to {
			opacity: 1;
			transform: none;
			filter: blur(0);
		}
	}

	@keyframes rvCardOut {
		from {
			opacity: 1;
			transform: none;
			filter: blur(0);
		}
		to {
			opacity: 0;
			transform: perspective(1400px) translate3d(-60px, -22px, 0) rotateY(-7deg) scale(0.95);
			filter: blur(6px);
		}
	}

	/* content inside the freshly opened card cascades in behind it */
	.page.new-skin .card-inner.rv-cascade .content {
		animation: rvCascade 0.7s var(--rv-ease-out) both;
	}

	.page.new-skin .card-inner.rv-cascade .content:nth-child(1) { animation-delay: 0.22s; }
	.page.new-skin .card-inner.rv-cascade .content:nth-child(2) { animation-delay: 0.32s; }
	.page.new-skin .card-inner.rv-cascade .content:nth-child(3) { animation-delay: 0.42s; }
	.page.new-skin .card-inner.rv-cascade .content:nth-child(4) { animation-delay: 0.52s; }
	.page.new-skin .card-inner.rv-cascade .content:nth-child(n + 5) { animation-delay: 0.62s; }

	@keyframes rvCascade {
		from { opacity: 0; transform: translateY(26px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ==========================================================================
   17. Mobile fit — no horizontal scroll, tighter density
   ========================================================================== */

/*
	Hard guarantee: below the desktop breakpoint the page may never scroll
	sideways. `clip` is preferred because — unlike `hidden` — it does not turn
	the root into a scroll container; `hidden` stays as the fallback for
	browsers that don't know it.
*/
@media (max-width: 1199px) {
	html,
	body {
		overflow-x: hidden;
		overflow-x: clip;
		max-width: 100%;
	}

	.card-started,
	.card-started .profile {
		overflow: hidden;
	}
}

/*
	Phones: the theme's 30px gutters eat a tenth of the screen on each side.
	Pulling them to 20px (and the type down a notch) makes everything read
	smaller and fit comfortably instead of straining against the edges.
*/
@media (max-width: 560px) {
	.page.new-skin .card-inner .card-wrap {
		padding: 24px 20px 0 20px;
	}

	.page.new-skin .row {
		margin: 0 -20px;
	}

	.page.new-skin .row .col {
		padding: 20px;
	}

	.page.new-skin .row .col .col {
		padding-top: 0;
		padding-bottom: 14px;
	}

	.page.new-skin .content {
		margin-bottom: 26px;
	}

	.page.new-skin .content .title {
		padding-bottom: 22px;
		min-height: 44px;
		font-size: 18px;
	}

	.page.new-skin .content .title:after {
		left: -20px;
	}

	.page.new-skin p,
	.page.new-skin .text-box p,
	.page.new-skin .info-list ul li,
	.page.new-skin .resume-items .resume-item p {
		font-size: 15px;
		line-height: 1.7em;
	}

	.page.new-skin .card-started .profile {
		padding: 40px 22px;
	}

	.page.new-skin .card-started .profile .title {
		font-size: 29px;
	}

	.page.new-skin .service-items .service-item .desc p,
	.page.new-skin .content.blog .box-item .desc .text p {
		font-size: 14.5px;
	}

	/* keep every media box inside its column */
	.page.new-skin img,
	.page.new-skin iframe,
	.page.new-skin .map {
		max-width: 100%;
	}

	/*
		The two contact fields sit side by side on desktop, so the theme gives
		them opposing 30px gutters. Once they stack those gutters push the email
		field 10px to the right of the others — reset them to match.
	*/
	.page.new-skin .card-wrap .content.contacts .row .row .col.col-d-6:nth-child(1),
	.page.new-skin .card-wrap .content.contacts .row .row .col.col-d-6:nth-child(2) {
		padding-left: 20px;
		padding-right: 20px;
	}

	.page.new-skin .info-list ul li strong {
		width: 112px;
	}

	/*
		Contact labels are short and the address is long, so the leader here is
		trimmed rather than the type — that keeps the email on one line at the
		same size as every other value.
	*/
	.page.new-skin .content.contacts .info-list ul li strong {
		width: 78px;
	}

	.page.new-skin .content.contacts .info-list ul li strong:after {
		margin-left: 8px !important;
	}

	.page.new-skin .content.contacts .info-list ul li .val {
		padding-left: 8px;
	}
}

@media (max-width: 380px) {
	.page.new-skin .card-inner .card-wrap {
		padding: 22px 16px 0 16px;
	}

	.page.new-skin .row {
		margin: 0 -16px;
	}

	.page.new-skin .row .col {
		padding: 16px;
	}

	.page.new-skin .content .title:after {
		left: -16px;
	}

	.page.new-skin .header .top-menu ul li a .link {
		font-size: 10px;
	}

	.page.new-skin .card-wrap .content.contacts .row .row .col.col-d-6:nth-child(1),
	.page.new-skin .card-wrap .content.contacts .row .row .col.col-d-6:nth-child(2) {
		padding-left: 16px;
		padding-right: 16px;
	}

	.page.new-skin .info-list ul li strong {
		width: 104px;
	}

	/* too narrow to keep the email on the label's line — give it its own */
	.page.new-skin .content.contacts .info-list ul li:last-child {
		flex-wrap: wrap;
	}

	.page.new-skin .content.contacts .info-list ul li:last-child .val {
		flex: 1 0 100%;
		padding-left: 0;
		padding-top: 2px;
	}
}

/* ==========================================================================
   18. Reduced motion — everything above collapses to a plain, static page
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html.rv-ready .rv,
	html.rv-ready .rv.is-in,
	html.rv-ready .card-started .profile > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	*,
	*:before,
	*:after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.rv-aurora,
	.rv-ripple {
		display: none;
	}
}