/* ==========================================================================
   PREMIUM REVEAL ANIMATION SYSTEM
   Reusable, GPU-accelerated motion for reveal and entrance effects.
   ========================================================================== */

:root {
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration-fast: 420ms;
  --reveal-duration-base: 640ms;
  --reveal-duration-slow: 860ms;
  --reveal-offset-sm: 16px;
  --reveal-offset-md: 24px;
  --reveal-offset-lg: 36px;
}

.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur,
.reveal-rotate {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-offset-md), 0);
  transition: opacity var(--reveal-duration-base) var(--reveal-ease), transform var(--reveal-duration-base) var(--reveal-ease), filter var(--reveal-duration-base) var(--reveal-ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.reveal-up {
  opacity: 0;
  transform: translate3d(0, var(--reveal-offset-md), 0);
  animation: revealUp var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-down {
  opacity: 0;
  transform: translate3d(0, calc(-1 * var(--reveal-offset-md)), 0);
  animation: revealDown var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-left {
  opacity: 0;
  transform: translate3d(var(--reveal-offset-md), 0, 0);
  animation: revealLeft var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-right {
  opacity: 0;
  transform: translate3d(calc(-1 * var(--reveal-offset-md)), 0, 0);
  animation: revealRight var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  animation: revealScale var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 0, 0);
  animation: revealBlur var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-rotate {
  opacity: 0;
  transform: rotate(-1.5deg) translate3d(0, 12px, 0);
  animation: revealRotate var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-stagger > * {
  opacity: 0;
  animation: revealUp var(--reveal-duration-base) var(--reveal-ease) both;
}

.reveal-stagger > *:nth-child(2n) { animation-delay: 90ms; }
.reveal-stagger > *:nth-child(3n) { animation-delay: 180ms; }
.reveal-stagger > *:nth-child(4n) { animation-delay: 270ms; }
.reveal-stagger > *:nth-child(5n) { animation-delay: 360ms; }
.reveal-stagger > *:nth-child(6n) { animation-delay: 450ms; }

.reveal-delay-50 { animation-delay: 50ms !important; }
.reveal-delay-100 { animation-delay: 100ms !important; }
.reveal-delay-150 { animation-delay: 150ms !important; }
.reveal-delay-200 { animation-delay: 200ms !important; }
.reveal-delay-300 { animation-delay: 300ms !important; }
.reveal-delay-400 { animation-delay: 400ms !important; }

.reveal-duration-fast { animation-duration: var(--reveal-duration-fast) !important; transition-duration: var(--reveal-duration-fast) !important; }
.reveal-duration-base { animation-duration: var(--reveal-duration-base) !important; transition-duration: var(--reveal-duration-base) !important; }
.reveal-duration-slow { animation-duration: var(--reveal-duration-slow) !important; transition-duration: var(--reveal-duration-slow) !important; }

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--reveal-offset-md), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealDown {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--reveal-offset-md)), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translate3d(var(--reveal-offset-md), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealRight {
  from {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--reveal-offset-md)), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes revealBlur {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes revealRotate {
  from {
    opacity: 0;
    transform: rotate(-1.5deg) translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-blur,
  .reveal-rotate,
  .reveal-stagger > * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {
  :root {
    --reveal-offset-md: 12px;
    --reveal-duration-base: 560ms;
  }
}


#projects::before,
#projects::after {
  animation: portfolioDrift 8s ease-in-out infinite alternate;
}

#projects .reveal.is-visible {
  animation: portfolioRevealIn 700ms var(--transition-base) both;
}

@keyframes portfolioFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes portfolioRevealIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes portfolioFilterPulse {
  0% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes portfolioDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(1rem, -0.8rem, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  #projects .section-head,
  #projects .portfolio-filters .btn,
  #projects .project-card,
  #projects .portfolio-cta,
  #projects::before,
  #projects::after,
  #projects .reveal.is-visible {
    animation: none !important;
    transition: none !important;
  }

  #projects .project-card:hover,
  #projects .project-card:hover .project-thumb,
  #projects .project-links a:hover,
  #projects .portfolio-filters .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   EXPERIENCE SECTION ANIMATIONS
   Lightweight, premium motion for the Experience timeline section only.
   ========================================================================== */

#experience {
  overflow: hidden;
}

#experience .section-head,
#experience .timeline-item,
#experience .experience-stats .card,
#experience .experience-cta {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: experienceFadeUp 850ms var(--transition-base) forwards;
}

#experience .section-head {
  animation-delay: 80ms;
}

#experience .timeline-item:nth-child(1) { animation-delay: 180ms; }
#experience .timeline-item:nth-child(2) { animation-delay: 260ms; }
#experience .timeline-item:nth-child(3) { animation-delay: 340ms; }
#experience .timeline-item:nth-child(4) { animation-delay: 420ms; }

#experience .experience-stats .card:nth-child(1) { animation-delay: 500ms; }
#experience .experience-stats .card:nth-child(2) { animation-delay: 540ms; }
#experience .experience-stats .card:nth-child(3) { animation-delay: 580ms; }
#experience .experience-stats .card:nth-child(4) { animation-delay: 620ms; }

#experience .experience-cta {
  animation-delay: 700ms;
}

#experience .timeline-item {
  will-change: transform, opacity;
}

#experience .timeline-item:nth-child(odd) {
  animation-name: experienceSlideRight;
}

#experience .timeline-item:nth-child(even) {
  animation-name: experienceSlideLeft;
}

#experience .timeline-card {
  transition: transform var(--transition-base) var(--ease-out), box-shadow var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out);
}

#experience .timeline-card:hover {
  transform: translate3d(0, -4px, 0);
}

#experience .timeline-marker {
  animation: experiencePulse 3.4s ease-in-out infinite;
}

#experience .experience-cta .btn {
  transition: transform var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out);
}

#experience .experience-cta .btn:hover {
  transform: translate3d(0, -2px, 0) scale(1.01);
}

#experience::before,
#experience::after {
  animation: experienceDrift 8.5s ease-in-out infinite alternate;
}

#experience .reveal.is-visible {
  animation: experienceRevealIn 700ms var(--transition-base) both;
}

@keyframes experienceFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes experienceSlideLeft {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes experienceSlideRight {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes experienceRevealIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes experiencePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes experienceDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(1rem, -0.8rem, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  #experience .section-head,
  #experience .timeline-item,
  #experience .experience-stats .card,
  #experience .experience-cta,
  #experience .timeline-marker,
  #experience::before,
  #experience::after,
  #experience .reveal.is-visible {
    animation: none !important;
    transition: none !important;
  }

  #experience .timeline-card:hover,
  #experience .experience-cta .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   CERTIFICATIONS SECTION ANIMATIONS
   Lightweight, premium motion for the Certifications section only.
   ========================================================================== */

#certifications {
  overflow: hidden;
}

#certifications .section-head,
#certifications .card,
#certifications .cert-achievements .card,
#certifications .cert-cta {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: certFadeUp 850ms var(--transition-base) forwards;
}

#certifications .section-head {
  animation-delay: 80ms;
}

#certifications .card:nth-child(1) { animation-delay: 180ms; }
#certifications .card:nth-child(2) { animation-delay: 240ms; }
#certifications .card:nth-child(3) { animation-delay: 300ms; }
#certifications .card:nth-child(4) { animation-delay: 360ms; }
#certifications .card:nth-child(5) { animation-delay: 420ms; }
#certifications .card:nth-child(6) { animation-delay: 480ms; }

#certifications .cert-achievements .card:nth-child(1) { animation-delay: 560ms; }
#certifications .cert-achievements .card:nth-child(2) { animation-delay: 600ms; }
#certifications .cert-achievements .card:nth-child(3) { animation-delay: 640ms; }
#certifications .cert-achievements .card:nth-child(4) { animation-delay: 680ms; }
#certifications .cert-achievements .card:nth-child(5) { animation-delay: 720ms; }

#certifications .cert-cta {
  animation-delay: 780ms;
}

#certifications .card {
  will-change: transform, box-shadow;
}

#certifications .card:hover {
  transform: translate3d(0, -6px, 0) scale(1.01);
}

#certifications .card-icon {
  animation: certFloat 4.2s ease-in-out infinite;
}

#certifications .cert-achievements .card {
  animation-name: certScaleIn;
}

#certifications .cert-cta .btn {
  transition: transform var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out);
}

#certifications .cert-cta .btn:hover {
  transform: translate3d(0, -2px, 0) scale(1.01);
}

#certifications::before,
#certifications::after {
  animation: certDrift 8s ease-in-out infinite alternate;
}

#certifications .reveal.is-visible {
  animation: certRevealIn 700ms var(--transition-base) both;
}

@keyframes certFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes certScaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes certRevealIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes certFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes certDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(1rem, -0.8rem, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  #certifications .section-head,
  #certifications .card,
  #certifications .cert-achievements .card,
  #certifications .cert-cta,
  #certifications .card-icon,
  #certifications::before,
  #certifications::after,
  #certifications .reveal.is-visible {
    animation: none !important;
    transition: none !important;
  }

  #certifications .card:hover,
  #certifications .cert-cta .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   BLOG & INSIGHTS ANIMATIONS
   Hardware-accelerated motion for the Blog section only.
   ========================================================================== */

#blog {
  overflow: hidden;
}

#blog .blog-header,
#blog .blog-card,
#blog .blog-view-all {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: blogFadeUp 800ms var(--transition-base) forwards;
}

#blog .blog-header {
  animation-delay: 80ms;
}

#blog .blog-card:nth-child(1) { animation-delay: 180ms; }
#blog .blog-card:nth-child(2) { animation-delay: 240ms; }
#blog .blog-card:nth-child(3) { animation-delay: 300ms; }
#blog .blog-card:nth-child(4) { animation-delay: 360ms; }
#blog .blog-card:nth-child(5) { animation-delay: 420ms; }
#blog .blog-card:nth-child(6) { animation-delay: 480ms; }

#blog .blog-view-all {
  animation-delay: 560ms;
}

#blog .blog-card {
  will-change: transform, box-shadow, opacity;
}

#blog .blog-card:hover {
  transform: translate3d(0, -8px, 0) scale(1.01);
}

#blog .blog-image img {
  will-change: transform;
  transform: translateZ(0);
}

#blog .blog-card:hover .blog-image img {
  transform: translate3d(0, 0, 0) scale(1.06);
}

#blog .blog-button:hover {
  transform: translate3d(4px, 0, 0);
}

#blog .blog-view-all:hover {
  transform: translate3d(0, -2px, 0) scale(1.01);
}

#blog .blog-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(125,211,252,0.12), rgba(96,165,250,0.2), rgba(125,211,252,0.12));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

#blog .blog-card:hover::before {
  opacity: 1;
  animation: blogGradientBorder 2.2s linear infinite;
}

#blog .blog-card .blog-button::after {
  transition: transform 220ms var(--transition-base);
}

#blog .blog-card:hover .blog-button::after {
  transform: translate3d(3px, 0, 0);
}

#blog .blog-card .blog-content {
  position: relative;
  z-index: 1;
}

#blog .blog-header {
  animation-name: blogFadeUp;
}

#blog .blog-card:nth-child(odd) {
  animation-name: blogFadeLeft;
}

#blog .blog-card:nth-child(even) {
  animation-name: blogFadeRight;
}

#blog .blog-card:nth-child(1),
#blog .blog-card:nth-child(4) {
  animation-name: blogScaleIn;
}

/* ---- FAQ section animations ---- */
#faq .section-head,
#faq .accordion,
#faq .section-actions {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  animation: faqFadeUp 760ms var(--transition-base) forwards;
}

#faq .section-head {
  animation-delay: 80ms;
}

#faq .accordion {
  animation-delay: 140ms;
}

#faq .section-actions {
  animation-delay: 220ms;
}

#faq .accordion-item {
  will-change: transform, box-shadow, opacity;
}

#faq .accordion-item:hover {
  transform: translate3d(0, -2px, 0);
}

#faq .accordion-trigger svg {
  transform-origin: center;
  will-change: transform;
}

#faq .accordion-item.is-open .accordion-trigger svg {
  animation: faqIconRotate 260ms var(--transition-base) forwards;
}

#faq .accordion-item:not(.is-open) .accordion-trigger svg {
  animation: faqIconReset 220ms var(--transition-base) forwards;
}

#faq .accordion-panel {
  will-change: max-height, opacity;
}

#faq .section-actions .btn {
  animation: faqCtaIn 620ms var(--transition-base) both;
}

#faq .section-actions .btn:nth-child(2) {
  animation-delay: 90ms;
}

#faq .accordion-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.14), rgba(37, 99, 235, 0.08));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

#faq .accordion-item:hover::after,
#faq .accordion-item.is-open::after {
  opacity: 1;
}

@keyframes faqFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes faqIconRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(45deg);
  }
}

@keyframes faqIconReset {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes faqCtaIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #faq .section-head,
  #faq .accordion,
  #faq .section-actions,
  #faq .accordion-item,
  #faq .accordion-trigger svg,
  #faq .accordion-panel,
  #faq .section-actions .btn,
  #faq .accordion-item::after {
    animation: none !important;
    transition: none !important;
  }

  #faq .accordion-item:hover {
    transform: none;
  }
}

@keyframes blogFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes blogFadeLeft {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes blogFadeRight {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes blogScaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blogGradientBorder {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #blog .blog-header,
  #blog .blog-card,
  #blog .blog-view-all,
  #blog .blog-image img,
  #blog .blog-button,
  #blog .blog-view-all,
  #blog .blog-card::before {
    animation: none !important;
    transition: none !important;
  }

  #blog .blog-card:hover,
  #blog .blog-card:hover .blog-image img,
  #blog .blog-button:hover,
  #blog .blog-view-all:hover {
    transform: none;
  }
}

/* ---- Premium micro-interactions ---- */
html {
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  transition: opacity 420ms ease;
}

html:not(.is-ready) body {
  opacity: 0;
}

html.is-ready body {
  opacity: 1;
}

section[id],
[id] {
  scroll-margin-top: 90px;
}

.reveal,
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.is-visible,
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.btn,
button,
a,
.card,
.service-card,
.portfolio-card,
.skill-card,
.contact-detail-card,
.testimonial-highlight,
.testimonial-orbit-card,
.blog-card,
.project-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), filter var(--transition-base);
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --magnet-x: 0px;
  --magnet-y: 0px;
}

.btn:hover,
.btn.is-magnetic {
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0) translateY(-2px);
}

.btn:active {
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.24);
  transform: translate(-50%, -50%) scale(0);
  animation: btnRipple 620ms ease-out;
  z-index: 0;
}

.btn > * {
  position: relative;
  z-index: 1;
}

.nav-links a,
.footer-links a,
.footer-contact-list a,
.contact-detail-card a,
.project-links a,
.blog-button {
  position: relative;
}

.nav-links a::after,
.footer-links a::after,
.footer-contact-list a::after,
.contact-detail-card a::after,
.project-links a::after,
.blog-button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.16rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
  opacity: 0.7;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after,
.footer-contact-list a:hover::after,
.footer-contact-list a:focus-visible::after,
.contact-detail-card a:hover::after,
.contact-detail-card a:focus-visible::after,
.project-links a:hover::after,
.project-links a:focus-visible::after,
.blog-button:hover::after,
.blog-button:focus-visible::after {
  transform: scaleX(1);
}

.card:hover,
.service-card:hover,
.portfolio-card:hover,
.skill-card:hover,
.contact-detail-card:hover,
.testimonial-highlight:hover,
.testimonial-orbit-card:hover,
.blog-card:hover,
.project-card:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: var(--shadow-md);
}

.blog-image img,
.project-thumb img,
.portfolio-card img,
.blog-card img,
.testimonial-highlight__avatar img {
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-image img,
.project-card:hover .project-thumb img,
.portfolio-card:hover img {
  transform: scale(1.04);
}

.ambient-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(70px);
  opacity: 0.38;
  animation: ambientOrbFloat 12s ease-in-out infinite alternate;
}

.ambient-orb--one {
  top: 8%;
  left: 2%;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.26), transparent 70%);
}

.ambient-orb--two {
  right: 4%;
  top: 28%;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 70%);
  animation-duration: 14s;
}

.ambient-orb--three {
  left: 40%;
  bottom: 10%;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.2), transparent 70%);
  animation-duration: 16s;
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.03) 38%, transparent 70%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: -1;
}

body:hover .cursor-glow {
  opacity: 1;
}

@keyframes ambientOrbFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(2rem, -1.2rem, 0) scale(1.05);
  }
}

@keyframes btnRipple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  [data-reveal],
  .btn,
  .card,
  .service-card,
  .portfolio-card,
  .skill-card,
  .contact-detail-card,
  .testimonial-highlight,
  .testimonial-orbit-card,
  .blog-card,
  .project-card,
  .blog-image img,
  .project-thumb img,
  .portfolio-card img,
  .blog-card img,
  .testimonial-highlight__avatar img,
  .ambient-orb,
  .cursor-glow {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 50%, #818cf8 100%);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.32);
}

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(2, 6, 23, 0.94), rgba(15, 23, 42, 0.92));
  opacity: 0;
  transition: opacity 420ms ease;
}

body.is-page-loading .page-transition-overlay {
  opacity: 1;
}

body.is-page-ready .page-transition-overlay {
  opacity: 0;
}

.card::before,
.service-card::before,
.project-card::before,
.blog-card::before,
.testimonial-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.card:hover::before,
.service-card:hover::before,
.project-card:hover::before,
.blog-card:hover::before,
.testimonial-highlight:hover::before {
  opacity: 1;
}

@media (max-width: 700px) {
  .scroll-progress {
    height: 2px;
  }
}

/* ==========================================================================
   PREMIUM BUTTON INTERACTION SYSTEM
   Reusable, GPU-accelerated motion for primary, secondary and icon buttons.
   ========================================================================== */

:root {
  --btn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --btn-duration-fast: 180ms;
  --btn-duration-base: 240ms;
  --btn-shadow-hover: 0 16px 32px rgba(15, 23, 42, 0.12);
  --btn-shadow-pressed: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.btn,
.btn--primary,
.btn--secondary,
.btn--icon,
.btn--ghost,
.btn--sm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, box-shadow, filter, opacity;
  transition:
    transform var(--btn-duration-base) var(--btn-ease),
    box-shadow var(--btn-duration-base) var(--btn-ease),
    filter var(--btn-duration-base) var(--btn-ease),
    background-color var(--btn-duration-base) var(--btn-ease),
    color var(--btn-duration-base) var(--btn-ease),
    opacity var(--btn-duration-base) var(--btn-ease);
}

.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%, rgba(37, 99, 235, 0.12));
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.97);
  transition: opacity var(--btn-duration-fast) var(--btn-ease), transform var(--btn-duration-fast) var(--btn-ease);
  pointer-events: none;
  z-index: 0;
}

.btn:hover::before,
.btn.is-magnetic::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.btn:hover,
.btn.is-magnetic {
  transform: translate3d(0, -2px, 0) scale(1.01);
  box-shadow: var(--btn-shadow-hover);
  filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.08));
}

.btn:active,
.btn.is-pressed {
  transform: translate3d(0, 1px, 0) scale(0.985);
  box-shadow: var(--btn-shadow-pressed);
  transition-duration: var(--btn-duration-fast);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28), var(--btn-shadow-hover);
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn svg,
.btn img,
.btn .icon,
.btn .btn__icon {
  transition: transform var(--btn-duration-fast) var(--btn-ease), opacity var(--btn-duration-fast) var(--btn-ease);
  transform-origin: center;
  will-change: transform;
}

.btn:hover svg,
.btn:hover img,
.btn:hover .icon,
.btn:hover .btn__icon {
  transform: translate3d(0, -1px, 0) scale(1.04);
}

.btn:active svg,
.btn:active img,
.btn:active .icon,
.btn:active .btn__icon {
  transform: translate3d(0, 1px, 0) scale(0.97);
}

.btn-ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(0);
  animation: btnRipple 620ms var(--btn-ease) forwards;
  z-index: 0;
  will-change: transform, opacity;
}

.btn.is-loading,
.btn--loading {
  pointer-events: none;
  cursor: wait;
}

.btn.is-loading::after,
.btn--loading::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: -0.47rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
  animation: btnSpinner 720ms linear infinite;
  z-index: 1;
}

.btn.is-loading .btn__label,
.btn--loading .btn__label {
  opacity: 0.8;
  transform: translate3d(-0.18rem, 0, 0);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled,
.btn--disabled {
  cursor: not-allowed;
  opacity: 0.62;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

@keyframes btnRipple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

@keyframes btnSpinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 700px) {
  .btn:hover,
  .btn.is-magnetic,
  .btn:active,
  .btn.is-pressed {
    transform: none;
    box-shadow: none;
    filter: none;
  }

  .btn:hover svg,
  .btn:hover img,
  .btn:hover .icon,
  .btn:hover .btn__icon {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn svg,
  .btn img,
  .btn .icon,
  .btn .btn__icon,
  .btn-ripple {
    animation: none !important;
    transition: none !important;
  }

  .btn:hover,
  .btn.is-magnetic,
  .btn:active,
  .btn.is-pressed,
  .btn:focus-visible {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .btn.is-loading::after,
  .btn--loading::after {
    animation: none !important;
  }
}