/*
Theme Name: Designify Persona
Theme URI: https://www.shabbirshowne.com/themes/designify-persona
Author: Shabbir Showne
Author URI: https://www.shabbirshowne.com
Description: A custom personal portfolio and brand WordPress theme.
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2026 Shabbir Showne.
Text Domain: designify-persona
Tags: portfolio, blog
Contact: hello@shabbirshowne.com
*/

/* --- Required WordPress Core Classes --- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone, .wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption .wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
.gallery-caption { font-size: 12px; color: #888; }
.bypostauthor, .sticky { display: block; }

/* --- Base Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Cormorant+Garamond:ital,wght@1,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-color: #ffffff;
  --text-color: #0f172a;
  --gradient-color: #8350e8;
  --sparkles-color: #8350e8;
}

.dark {
  --bg-color: #050505;
  --text-color: #ffffff;
  --gradient-color: #8350e8;
  --sparkles-color: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  transition: background-color 0.3s, color 0.3s;
  background-color: var(--bg-color);
  color: var(--text-color);
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(66, 133, 244, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 40%);
  background-attachment: fixed;
}

/* --- Custom Utilities --- */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
}

.glass-hover:hover {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.5s ease-out;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

/* --- Typography --- */
.font-carattere {
  font-family: "Carattere", cursive;
}

.font-serif {
  font-family: "Cormorant Garamond", serif;
}

/* --- Animations --- */
.floating-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(100px, -50px) scale(1.2); }
  66% { transform: translate(-80px, 100px) scale(1.1); }
}

.animate-float {
  animation: float 20s infinite linear;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}