/*
 * prathibha.net — theme layer, loaded after the page's own styles.
 * Carries the hero globe's look (dotted grid, cyan data packets, soft indigo glow) through
 * every section. Remove this file and its <link> to return to the previous look.
 */

/* ---- Globe canvases (inserted by site-fx.js) -------------------------------------------- */

.hero > .site-fx,
.contact > .site-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.6s ease;
}

.hero > .site-fx {
	z-index: 0;
	/* Fade toward the headline so the copy always reads cleanly. */
	-webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 56%);
	mask-image: linear-gradient(90deg, transparent 28%, #000 56%);
}

.contact > .site-fx {
	z-index: -1;
	-webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 85%);
	mask-image: linear-gradient(180deg, transparent 30%, #000 85%);
}

.hero > .site-fx.is-on,
.contact > .site-fx.is-on {
	opacity: 1;
}

/* The globe replaces the floating outline circles, but only once it has drawn. */
.hero.site-fx-on .geo-shape {
	display: none;
}

@media (max-width: 1024px) {
	.hero > .site-fx {
		-webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
		mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
	}
	.hero > .site-fx.is-on {
		opacity: 0.85;
	}
}

@media (max-width: 767px) {
	.hero > .site-fx {
		-webkit-mask-image: linear-gradient(180deg, #000 0, #000 32%, transparent 58%);
		mask-image: linear-gradient(180deg, #000 0, #000 32%, transparent 58%);
	}
}

/* ---- Sections: dotted grid, a glowing top edge, and a data packet running along it ------- */

.about,
.expertise,
.skills,
.contact {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.about::before,
.expertise::before,
.skills::before,
.contact::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.45) 25%, rgba(6, 182, 212, 0.45) 50%, rgba(139, 92, 246, 0.45) 75%, transparent) top / 100% 1px no-repeat,
		radial-gradient(circle, rgba(99, 102, 241, 0.34) 1px, transparent 1.7px) 0 0 / 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
	mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
}

.about::after,
.expertise::after,
.skills::after,
.contact::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 160px;
	height: 3px;
	border-radius: 3px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.95), transparent);
	box-shadow: 0 0 14px rgba(6, 182, 212, 0.6);
	animation: site-fx-packet 9s linear infinite;
}

.expertise::after { animation-delay: -3s; animation-direction: reverse; }
.skills::after { animation-delay: -6s; }
.contact::after { animation-delay: -1.5s; animation-direction: reverse; }

@keyframes site-fx-packet {
	from { transform: translateX(-200px); }
	to   { transform: translateX(calc(100vw + 40px)); }
}

/* Section labels get the same pulsing status dot as the hero tag. */
.section-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.section-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-tertiary);
	box-shadow: 0 0 10px var(--accent-tertiary);
	animation: pulse 2s infinite;
}

/* ---- About: rotating gradient frame, dotted card, scan line ---------------------------- */

@property --site-fx-a {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.about-image-frame {
	background: conic-gradient(from var(--site-fx-a), #6366f1, #8b5cf6, #06b6d4, #6366f1);
	box-shadow: 0 0 70px -24px rgba(99, 102, 241, 0.55);
	animation: site-fx-turn 12s linear infinite;
}

@keyframes site-fx-turn {
	to { --site-fx-a: 360deg; }
}

.about-image-inner {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(circle, rgba(99, 102, 241, 0.22) 1px, transparent 1.6px),
		radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.2), transparent 55%),
		linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
	background-size: 22px 22px, 100% 100%, 100% 100%;
}

.about-image-inner::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 35%;
	pointer-events: none;
	background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.06) 60%, rgba(6, 182, 212, 0.2));
	border-bottom: 1px solid rgba(103, 232, 249, 0.45);
	transform: translateY(-100%);
	animation: site-fx-scan 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes site-fx-scan {
	0%       { transform: translateY(-100%); }
	70%, 100% { transform: translateY(290%); }
}

/* ---- Cards, skill tiles and contact links: pointer spotlight + cyan glow --------------- */

.expertise-card,
.skill-item,
.contact-link {
	isolation: isolate;
}

.skill-item,
.contact-link {
	position: relative;
	overflow: hidden;
}

.expertise-card::after,
.skill-item::after,
.contact-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 0%), rgba(6, 182, 212, 0.14), transparent 60%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.skill-item::after,
.contact-link::after {
	background: radial-gradient(160px circle at var(--sx, 50%) var(--sy, 50%), rgba(6, 182, 212, 0.18), transparent 65%);
}

.expertise-card:hover::after,
.skill-item:hover::after,
.contact-link:hover::after {
	opacity: 1;
}

.expertise-card:hover {
	border-color: rgba(6, 182, 212, 0.35);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 44px -14px rgba(6, 182, 212, 0.4);
}

.skill-item:hover,
.contact-link:hover {
	border-color: rgba(6, 182, 212, 0.55);
	box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.12), 0 12px 30px -12px rgba(6, 182, 212, 0.45);
}

/* A small status light on each technology. */
.skill-item span::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 0.55rem;
	border-radius: 50%;
	vertical-align: middle;
	background: var(--accent-tertiary);
	box-shadow: 0 0 8px var(--accent-tertiary);
	opacity: 0.75;
}

/* Technologies grid: tablets get 4 across like desktop (phones stay 2 across). Whatever the
   count, a short last row is centred instead of hanging off the left edge. */
@media (min-width: 769px) and (max-width: 1024px) {
	.skills-container {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 769px) {
	/* One tile left over: span the middle two columns. */
	.skill-item:last-child:nth-child(4n + 1) {
		grid-column: 2 / span 2;
	}
	/* Two left over: start them in the second column. */
	.skill-item:nth-last-child(2):nth-child(4n + 1) {
		grid-column-start: 2;
	}
}

@media (max-width: 768px) {
	/* Odd count on phones: the last tile takes the full row. */
	.skill-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ---- Footer ----------------------------------------------------------------------------- */

footer {
	border-top-color: transparent;
	background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4) 30%, rgba(6, 182, 212, 0.4) 70%, transparent) top / 100% 1px no-repeat;
}

/* ---- Reduced motion --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hero > .site-fx,
	.contact > .site-fx { transition: none; }
	.about::after,
	.expertise::after,
	.skills::after,
	.contact::after,
	.about-image-inner::after { animation: none; display: none; }
	.about-image-frame,
	.section-tag::before { animation: none; }
}