/* Project theme utilities and media helpers */
:root {
	--primary: #10a37f;
	--accent: #6366f1; /* indigo */
	--accent-2: #06b6d4; /* cyan */
}

/* Color helpers used in templates */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.ring-primary\/30 { --tw-ring-color: rgba(16,163,127,0.30) !important; }
.bg-primary-600 { background-color:#059669 !important; }
.hover\:bg-primary-700:hover { background-color:#047857 !important; }
.text-primary-600 { color:#059669 !important; }
.focus\:ring-primary-500:focus { --tw-ring-color:#10b981 !important; }

/* Dark mode helpers referenced in markup */
html.dark .dark\:bg-gray-900 { background-color:#111827 !important; }
html.dark .dark\:text-gray-100 { color:#f3f4f6 !important; }
html.dark .dark\:border-gray-700 { border-color:#374151 !important; }

/* Animated gradient background helpers */
.bg-animated-gradient {
	background: radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,0.15), transparent 60%),
							radial-gradient(1000px 500px at 90% 10%, rgba(6,182,212,0.18), transparent 60%),
							radial-gradient(900px 500px at 50% 100%, rgba(16,163,127,0.18), transparent 60%);
	animation: bgShift 20s linear infinite alternate;
}
@keyframes bgShift {
	0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
	100% { background-position: 10% 20%, 90% 15%, 55% 90%; }
}

/* Floating blobs */
.blob { position:absolute; filter: blur(18px); opacity:0.6; pointer-events:none; }
.blob-a { width:360px; height:360px; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); animation: floatA 11s ease-in-out infinite; }
.blob-b { width:280px; height:280px; background: radial-gradient(circle at 70% 40%, var(--accent-2), transparent 60%); animation: floatB 13s ease-in-out infinite; }
.blob-c { width:320px; height:320px; background: radial-gradient(circle at 50% 70%, var(--primary), transparent 60%); animation: floatC 17s ease-in-out infinite; }
@keyframes floatA { 0%{ transform:translate(0,0) } 50%{ transform:translate(14px, -18px) } 100%{ transform:translate(0,0) } }
@keyframes floatB { 0%{ transform:translate(0,0) } 50%{ transform:translate(-16px, 10px) } 100%{ transform:translate(0,0) } }
@keyframes floatC { 0%{ transform:translate(0,0) } 50%{ transform:translate(10px, 12px) } 100%{ transform:translate(0,0) } }

/* Soft glow card */
.card-glow { position:relative; }
.card-glow::before { content:""; position:absolute; inset:-2px; z-index:-1; border-radius:20px; background:
	radial-gradient(120px 60px at 20% 0%, rgba(99,102,241,0.25), transparent 60%),
	radial-gradient(120px 60px at 80% 0%, rgba(6,182,212,0.25), transparent 60%);
	filter: blur(8px);
}

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform: translateY(0); }

/* Media frame utilities: consistent image/video sizing */
.media-frame { position: relative; width: 100%; overflow: hidden; background: #0b0b0b; }
/* Only size direct media children; do not affect nested UI images like avatars */
.media-frame > img, .media-frame > video { display:block; width:100%; height:100%; object-fit:cover; }
.media-contain > img, .media-contain > video { object-fit:contain; background:#0b0b0b; }
/* Natural size media (keep original aspect, no cropping) */
.media-natural { position: relative; width: 100%; overflow: hidden; background: #0b0b0b; }
.media-natural > img, .media-natural > video { display:block; width:100%; height:auto; object-fit: initial; background: transparent; }

/* Image shape guard: ensure only the actual media (direct children) are not circular.
	Do NOT affect nested UI images like avatars inside overlays. */
.card .media-natural > img,
.card .media-frame > img,
.card .media-frame > video,
#feed .media-natural > img,
#feed .media-frame > img,
#feed .media-frame > video {
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* Aspect helpers (fallbacks for non-Tailwind aspect plugin) */
.aspect-16\/9 { aspect-ratio: 16 / 9; }
.aspect-16\/10 { aspect-ratio: 16 / 10; }
.aspect-4\/3 { aspect-ratio: 4 / 3; }
/* Fallback for Tailwind's aspect-video utility */
.aspect-video { aspect-ratio: 16 / 9; }

/* Hero sizing safety: prevent oversized media when grid misbehaves */
#hero-wrap .aspect-video { width:100%; max-width: 760px; margin-left:auto; margin-right:auto; min-height: 220px; }
#hero-wrap #hero-slider img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px){ #hero-wrap .aspect-video { min-height: 280px; } }
@media (min-width: 768px){ #hero-wrap .aspect-video { min-height: 320px; } }
@media (min-width: 1024px){ #hero-wrap .aspect-video { min-height: 380px; } }

/* Misc UX helpers */
[x-cloak] { display:none !important; }

/* Skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background-color: rgba(107,114,128,0.15); }
.skeleton::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
	animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
input[type="file"]::file-selector-button { background-color: var(--primary); color:#fff; border:none; padding:0.5rem 0.75rem; border-radius:0.5rem; }