/* ==========================================================================
   Raima Portfolio – main stylesheet (front end + editor)
   ========================================================================== */

:root {
	--rm-bg: #f5f2ff;
	--rm-ink: #1b1630;
	--rm-muted: #5d5878;
	--rm-accent: #6d4aff;
	--rm-glass: rgba(255, 255, 255, 0.55);
	--rm-glass-strong: rgba(255, 255, 255, 0.75);
	--rm-glass-border: rgba(255, 255, 255, 0.8);
	--rm-shadow: 0 12px 40px rgba(90, 60, 200, 0.16);
	--rm-g1: #7c5cff;
	--rm-g2: #ff4fa3;
	--rm-g3: #ffb347;
	--rm-g4: #2dd4ff;
	--rm-gradient: linear-gradient(120deg, var(--rm-g1) 0%, var(--rm-g2) 55%, var(--rm-g3) 100%);
	--rm-blob-opacity: 0.55;
	--rm-radius: 24px;
	color-scheme: light;
}

:root[data-theme="dark"] {
	--rm-bg: #0a0918;
	--rm-ink: #f2efff;
	--rm-muted: #a9a3c9;
	--rm-accent: #a994ff;
	--rm-glass: rgba(255, 255, 255, 0.06);
	--rm-glass-strong: rgba(255, 255, 255, 0.11);
	--rm-glass-border: rgba(255, 255, 255, 0.14);
	--rm-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
	--rm-blob-opacity: 0.45;
	color-scheme: dark;
}

html { scroll-behavior: smooth; }
body { position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; }

/* ---- Animated aurora background ---- */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(90px);
	opacity: var(--rm-blob-opacity);
	pointer-events: none;
}
body::before {
	top: -20vmax; left: -15vmax;
	background: radial-gradient(circle, var(--rm-g1), transparent 65%);
	animation: rm-float-a 22s ease-in-out infinite alternate;
}
body::after {
	bottom: -25vmax; right: -15vmax;
	background: radial-gradient(circle, var(--rm-g2), transparent 65%);
	animation: rm-float-b 26s ease-in-out infinite alternate;
}
.rm-main::before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 35%; left: 45%;
	width: 36vmax; height: 36vmax;
	border-radius: 50%;
	background: radial-gradient(circle, var(--rm-g4), transparent 65%);
	filter: blur(100px);
	opacity: calc(var(--rm-blob-opacity) * .55);
	pointer-events: none;
	animation: rm-float-a 30s ease-in-out infinite alternate-reverse;
}
@keyframes rm-float-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes rm-float-b { to { transform: translate(-16vmax, -10vmax) scale(1.2); } }

/* ---- Scroll progress ---- */
.rm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100; transform-origin: 0 50%; transform: scaleX(0); background: var(--rm-gradient); }

/* ---- Glass ---- */
.rm-glass,
.is-style-glass,
.is-style-glass-strong,
.rm-card {
	position: relative;
	background: var(--rm-glass);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border: 1px solid var(--rm-glass-border);
	border-radius: var(--rm-radius);
	box-shadow: var(--rm-shadow), inset 0 1px 0 rgba(255, 255, 255, .25);
	padding: clamp(1.25rem, 2.2vw, 2rem);
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
}
.is-style-glass-strong { background: var(--rm-glass-strong); }
/* Cursor-follow spotlight (set by theme.js) */
.rm-glass::after,
.is-style-glass::after,
.is-style-glass-strong::after,
.rm-card::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.22), transparent 45%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
:root[data-theme="dark"] .rm-glass::after,
:root[data-theme="dark"] .is-style-glass::after,
:root[data-theme="dark"] .rm-card::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(160,140,255,.18), transparent 45%); }
.rm-glass:hover::after, .is-style-glass:hover::after, .is-style-glass-strong:hover::after, .rm-card:hover::after { opacity: 1; }
.rm-card:hover { transform: translateY(-6px); border-color: rgba(124, 92, 255, .55); }

/* ---- Header ---- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 90; padding: 14px clamp(12px, 3vw, 28px) 0; }
.rm-header-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	max-width: 1280px; margin: 0 auto;
	padding: 10px 14px 10px 22px;
	background: var(--rm-glass);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	backdrop-filter: blur(22px) saturate(170%);
	border: 1px solid var(--rm-glass-border);
	border-radius: 999px;
	box-shadow: var(--rm-shadow);
}
.rm-header-inner .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.rm-header-inner .wp-block-site-title a { text-decoration: none; background: var(--rm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-header-inner .wp-block-navigation a { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--rm-muted); padding: 6px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.rm-header-inner .wp-block-navigation a:hover { color: var(--rm-ink); background: var(--rm-glass-strong); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--rm-bg) !important; color: var(--rm-ink) !important; }

.rm-toggle {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; flex: none;
	border-radius: 50%; cursor: pointer;
	border: 1px solid var(--rm-glass-border);
	background: var(--rm-glass-strong);
	color: var(--rm-ink); font-size: 1.15rem; line-height: 1;
	transition: transform .4s cubic-bezier(.3,1.6,.5,1), background .2s;
}
.rm-toggle:hover { transform: rotate(25deg) scale(1.08); }
.rm-toggle .rm-moon { display: none; }
:root[data-theme="dark"] .rm-toggle .rm-sun { display: none; }
:root[data-theme="dark"] .rm-toggle .rm-moon { display: inline; }

/* ---- Layout helpers ---- */
.rm-main { position: relative; }
.rm-section { padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2rem); }
.rm-section > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.rm-eyebrow { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem !important; font-weight: 700; margin-bottom: .6rem !important; background: var(--rm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.rm-section-title { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem); margin: 0 auto .75rem; letter-spacing: -.02em; }
.rm-section-lead { color: var(--rm-muted); max-width: 640px !important; margin-bottom: 2.5rem !important; }
.rm-gradient-text,
.is-style-gradient-text { background: var(--rm-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rm-shine 8s linear infinite; }
@keyframes rm-shine { to { background-position: 200% center; } }

.rm-grid { display: grid; gap: 1.25rem; }
.rm-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rm-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rm-grid > * { margin: 0 !important; }
@media (max-width: 960px) { .rm-grid-3, .rm-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rm-grid-2, .rm-grid-3, .rm-grid-4 { grid-template-columns: 1fr; } }

/* ---- Buttons ---- */
.wp-block-button__link {
	background: var(--rm-gradient); background-size: 160% auto;
	color: #fff !important; border: 0; padding: .9rem 1.7rem; font-weight: 700; font-size: .98rem;
	box-shadow: 0 10px 28px rgba(124, 92, 255, .38);
	transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
	text-decoration: none;
}
.wp-block-button__link:hover { transform: translateY(-3px); background-position: right center; box-shadow: 0 16px 36px rgba(255, 79, 163, .4); }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-glass-btn .wp-block-button__link {
	background: var(--rm-glass-strong); color: var(--rm-ink) !important;
	border: 1px solid var(--rm-glass-border); box-shadow: var(--rm-shadow);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.wp-block-buttons { gap: .9rem; }

/* ---- Hero ---- */
.rm-hero { padding-top: clamp(2.5rem, 6vw, 5rem); min-height: 82vh; display: flex; align-items: center; }
.rm-hero > .rm-hero-grid { max-width: 1180px; width: 100%; }
.rm-hero-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.rm-hero-grid > * { margin: 0 !important; }
@media (max-width: 900px) { .rm-hero-grid { grid-template-columns: 1fr; } .rm-hero { min-height: 0; } }
.rm-badge {
	display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
	padding: .45rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
	background: var(--rm-glass); border: 1px solid var(--rm-glass-border);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	margin-bottom: 1.4rem !important;
}
.rm-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: rm-pulse 2s infinite; }
@keyframes rm-pulse { 70% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.rm-hero-title { font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); letter-spacing: -.035em; margin: 0 0 1rem !important; }
.rm-roles { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); font-weight: 600; margin: 0 0 1.2rem; min-height: 2.2em; }
.rm-typed { background: var(--rm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-typed::after { content: "|"; margin-left: 2px; color: var(--rm-g2); -webkit-text-fill-color: var(--rm-g2); animation: rm-blink 1s steps(1) infinite; }
@keyframes rm-blink { 50% { opacity: 0; } }
.rm-hero-text { color: var(--rm-muted); font-size: clamp(1rem, .95rem + .3vw, 1.18rem); max-width: 56ch; margin-bottom: 2rem !important; }

.rm-profile { text-align: center; padding: 2.2rem 1.6rem !important; transform: rotate(2deg); animation: rm-bob 7s ease-in-out infinite; }
@keyframes rm-bob { 50% { transform: rotate(2deg) translateY(-12px); } }
.rm-avatar {
	width: 132px; height: 132px; margin: 0 auto 1.1rem !important; display: grid; place-items: center;
	border-radius: 50%; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 2.6rem; color: #fff !important;
	background: var(--rm-gradient); box-shadow: 0 0 0 6px var(--rm-glass-strong), 0 18px 40px rgba(124, 92, 255, .4);
}
.rm-profile h3 { margin: 0 0 .15rem; font-size: 1.35rem; }
.rm-profile p { margin: 0; }
.rm-profile .rm-role { color: var(--rm-muted); font-size: .92rem; margin-bottom: 1rem; }
.rm-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.1rem; }
.rm-chip, .rm-chips p {
	display: inline-block; margin: 0; padding: .38rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
	background: var(--rm-glass-strong); border: 1px solid var(--rm-glass-border);
}

/* ---- Marquee ---- */
.rm-marquee-wrap { padding: 0 !important; overflow: hidden; border-block: 1px solid var(--rm-glass-border); background: var(--rm-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rm-marquee-wrap > * { max-width: none; }
.rm-marquee { display: flex; width: max-content; gap: 3rem; padding: 1.1rem 0; animation: rm-scroll 38s linear infinite; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.rm-marquee span { display: inline-flex; align-items: center; gap: 3rem; }
.rm-marquee span::after { content: "✦"; background: var(--rm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-marquee-wrap:hover .rm-marquee { animation-play-state: paused; }
@keyframes rm-scroll { to { transform: translateX(-50%); } }

/* ---- Cards ---- */
.rm-icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 16px; margin: 0 0 1rem !important; background: var(--rm-glass-strong); border: 1px solid var(--rm-glass-border); }
.rm-card h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.rm-card p { margin: 0; color: var(--rm-muted); font-size: .95rem; }

/* ---- About ---- */
.rm-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.rm-about-grid > * { margin: 0 !important; }
@media (max-width: 860px) { .rm-about-grid { grid-template-columns: 1fr; } }
.rm-facts p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .7rem 0; border-bottom: 1px dashed var(--rm-glass-border); font-size: .95rem; }
.rm-facts p:last-child { border-bottom: 0; }
.rm-facts strong { color: var(--rm-muted); font-weight: 600; }

/* ---- Stats ---- */
.rm-stat { text-align: center; }
.rm-stat .rm-count { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem); font-weight: 800; line-height: 1; margin: 0 0 .4rem; background: var(--rm-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rm-stat .rm-stat-label { color: var(--rm-muted); font-size: .92rem; margin: 0; }

/* ---- Timeline ---- */
.rm-timeline { position: relative; display: grid; gap: 1.4rem; padding-left: 2rem; }
.rm-timeline > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.rm-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--rm-g1), var(--rm-g2), var(--rm-g3)); }
.rm-tl-item { position: relative; }
.rm-tl-item::before { content: ""; position: absolute; left: calc(-2rem - 1px); top: 1.9rem; width: 17px; height: 17px; border-radius: 50%; background: var(--rm-bg); border: 4px solid var(--rm-g2); box-shadow: 0 0 0 5px rgba(255, 79, 163, .18); z-index: 2; }
.rm-tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin-bottom: .4rem; }
.rm-tl-item h3 { margin: 0; font-size: 1.25rem; }
.rm-tl-date { margin: 0; padding: .25rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--rm-gradient); color: #fff; }
.rm-tl-company { color: var(--rm-muted); margin: 0 0 .8rem; font-weight: 600; font-size: .95rem; }
.rm-tl-item ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .5rem; color: var(--rm-muted); font-size: .96rem; }
.rm-tl-item li::marker { color: var(--rm-g2); }

/* ---- Tools & contact ---- */
.rm-tools { display: flex; flex-wrap: wrap; gap: .8rem; }
.rm-tools p { margin: 0; padding: .7rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: .95rem; background: var(--rm-glass); border: 1px solid var(--rm-glass-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .25s, background .25s; }
.rm-tools p:hover { transform: translateY(-4px) rotate(-1.5deg); background: var(--rm-glass-strong); }
.rm-cta { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) !important; background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(255,79,163,.22) 60%, rgba(255,179,71,.2)), var(--rm-glass); }
.rm-cta h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); margin: 0 0 .8rem; letter-spacing: -.02em; }
.rm-cta > p { color: var(--rm-muted); max-width: 52ch; margin: 0 auto 1.6rem; }
.rm-cta .wp-block-buttons { justify-content: center; }
.rm-contact-list { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; margin-top: 1.8rem; font-size: .92rem; color: var(--rm-muted); }
.rm-contact-list p { margin: 0; }
.rm-contact-list a { color: inherit; }

/* ---- Footer ---- */
.rm-footer { text-align: center; padding: 2.5rem 1rem 3rem; color: var(--rm-muted); font-size: .9rem; }
.rm-footer p { margin: .2rem 0; }
.rm-footer a { color: var(--rm-ink); font-weight: 600; text-decoration: none; }
.rm-footer a:hover { text-decoration: underline; }

/* ---- Blog / posts ---- */
.rm-page-wrap { max-width: 880px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 1rem; }
.rm-page-wrap .wp-block-post-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.02em; }
.rm-posts .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.rm-posts .wp-block-post-template > li { margin: 0; }
.rm-posts .wp-block-post-title { font-size: 1.2rem; margin: .5rem 0; }
.rm-posts .wp-block-post-title a { text-decoration: none; color: var(--rm-ink); }
.rm-posts .wp-block-post-excerpt, .rm-posts .wp-block-post-date { color: var(--rm-muted); font-size: .92rem; }
.rm-posts .wp-block-post-featured-image img { border-radius: 16px; width: 100%; height: auto; }
.wp-block-query-pagination { justify-content: center; gap: 1rem; margin-top: 2rem; }

/* ---- Scroll reveal ---- */
.rm-js .rm-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--rm-delay, 0s); }
.rm-js .rm-reveal.is-in { opacity: 1; transform: none; }

/* ---- Accessibility & motion ---- */
:focus-visible { outline: 3px solid var(--rm-g2); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.rm-js .rm-reveal { opacity: 1; transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rm-glass, .is-style-glass, .rm-card, .rm-header-inner { background: var(--rm-glass-strong); }
}

/* ---- Print = a clean one-click resume ---- */
@media print {
	body::before, body::after, .rm-main::before, .rm-progress, .wp-site-blocks > header.wp-block-template-part, .rm-marquee-wrap, .rm-cta .wp-block-buttons, .rm-hero .wp-block-buttons, .rm-toggle { display: none !important; }
	:root, :root[data-theme="dark"] { --rm-bg: #fff; --rm-ink: #111; --rm-muted: #444; --rm-glass: #fff; --rm-glass-strong: #fff; --rm-glass-border: #ddd; --rm-shadow: none; }
	body { background: #fff; color: #111; }
	.rm-glass, .rm-card, .is-style-glass { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; break-inside: avoid; }
	.rm-js .rm-reveal { opacity: 1 !important; transform: none !important; }
	.rm-section { padding: 1.2rem 0; }
	.rm-profile { animation: none; transform: none; }
	.rm-gradient-text, .rm-typed, .rm-stat .rm-count, .rm-eyebrow { color: #4b2fd6; -webkit-text-fill-color: #4b2fd6; background: none; }
	.rm-hero { min-height: 0; }
}