/* =========================================================
   MOTION LAYER — premium interactions on existing design
   Does not alter layout, colors, or structure.
   ========================================================= */

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .custom-cursor,
  .cursor-label,
  .scroll-progress,
  #page-loader { display: none !important; }
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur,
  .slide-in-left, .slide-in-right, .slide-in-up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ----- Page loader ----- */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a050a;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.55s step-end;
}
#page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-monogram {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.35em;
  color: var(--main);
  opacity: 0;
  transform: translateY(12px);
  animation: loaderIn 0.55s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  text-shadow: 0 0 28px var(--main-glow-md);
}
.loader-name {
  font-family: "Inter", sans-serif;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 18px;
  opacity: 0;
  transform: translateY(10px);
  animation: loaderIn 0.55s 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.loader-bar {
  width: 120px;
  height: 1.5px;
  margin-top: 28px;
  background: rgba(var(--main-rgb), 0.15);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: loaderIn 0.4s 0.7s forwards;
}
.loader-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--main), var(--main-soft));
  box-shadow: 0 0 12px var(--main-glow-md);
  animation: loaderBar 0.9s 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.loader-role {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 20px;
  opacity: 0;
  animation: loaderIn 0.5s 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes loaderIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loaderBar {
  to { width: 100%; }
}

/* Site reveal after loader */
#real-site {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
body.is-loaded #real-site {
  opacity: 1;
}

/* ----- Scroll progress ----- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 1200;
  background: linear-gradient(90deg, var(--main), var(--main-soft));
  box-shadow: 0 0 10px var(--main-glow-md);
  pointer-events: none;
  transform-origin: left center;
  transition: width 0.08s linear;
}

/* ----- Custom cursor (desktop only) ----- */
.custom-cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px var(--main-glow-md);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              box-shadow 0.25s ease;
  mix-blend-mode: difference;
  will-change: transform, width, height;
}
.custom-cursor.is-hover {
  width: 36px;
  height: 36px;
  background: rgba(var(--main-rgb), 0.25);
  box-shadow: 0 0 20px var(--main-glow-md);
  mix-blend-mode: normal;
}
.custom-cursor.is-view {
  width: 56px;
  height: 56px;
  background: rgba(var(--main-rgb), 0.2);
}
.cursor-label {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-family: "Inter", sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.cursor-label.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: none), (max-width: 1024px) {
  .custom-cursor, .cursor-label { display: none !important; }
}

/* ----- Reveal system ----- */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Text mask reveal for major headings */
.mask-reveal {
  overflow: hidden;
  display: inline-block;
}
.mask-reveal > span,
.mask-reveal > * {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mask-reveal.is-visible > span,
.mask-reveal.is-visible > * {
  transform: translateY(0);
}

/* Stagger helpers */
.stagger-1 { transition-delay: 0.06s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.18s; }
.stagger-4 { transition-delay: 0.24s; }
.stagger-5 { transition-delay: 0.3s; }
.stagger-6 { transition-delay: 0.36s; }

/* ----- Hero text line reveal ----- */
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-line > span {
  display: inline-block;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
body.is-loaded .hero-line > span,
.hero-line > span.is-shown {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
body.is-loaded .hero-line:nth-of-type(1) > span { transition-delay: 0.15s; }
body.is-loaded .hero-line:nth-of-type(2) > span { transition-delay: 0.28s; }

/* Override gradient clip on h1 so nested span stays visible white */
.info-home h1.hero-prepared,
.info-home h1.hero-prepared .hero-line > span {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  filter: none;
}
.info-home h3.hero-prepared,
.info-home h3.hero-prepared .hero-line > span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.hero-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body.is-loaded .hero-fade {
  opacity: 1;
  transform: none;
}
body.is-loaded .hero-fade.d1 { transition-delay: 0.4s; }
body.is-loaded .hero-fade.d2 { transition-delay: 0.5s; }
body.is-loaded .hero-fade.d3 { transition-delay: 0.6s; }
body.is-loaded .hero-fade.d4 { transition-delay: 0.72s; }

/* ----- Navigation scroll state ----- */
header {
  transition: padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s ease;
}
header.is-scrolled .ul-list {
  padding: 8px 20px;
  gap: 2rem;
  background: rgba(var(--main-dark-rgb), 0.65);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              gap 0.35s ease,
              background 0.35s ease,
              box-shadow 0.35s ease;
}
header.is-scrolled .ul-list li {
  padding: 6px 12px;
}

/* On mobile the nav already wraps onto multiple lines with a tight,
   compact layout (see style.css @media 768px). The desktop "scrolled"
   state above enlarges gap/padding again, which was overriding that
   compact mobile layout (same selector specificity, but this file loads
   after style.css) and making the wrapped list jump around messily.
   Keep the scrolled state visually consistent but don't fight the
   mobile sizing. */
@media (max-width: 768px) {
  header.is-scrolled .ul-list {
    padding: 10px 14px;
    gap: 0.4rem;
  }
  header.is-scrolled .ul-list li {
    padding: 6px 10px;
  }
}

.ul-list li {
  position: relative;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
/* nav-indicator removed — active state uses existing pill background only */
.ul-list li .nav-indicator {
  display: none !important;
}

/* ----- Stats count + hover ----- */
.stat-item {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}
.stat-item:hover {
  transform: translateY(-6px);
  border-color: var(--main);
  box-shadow: 0 0 30px var(--main-glow-md);
  background: rgba(255, 255, 255, 0.06);
}
.stat-number {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-item:hover .stat-number {
  transform: scale(1.04);
}

/* ----- Tech icons ----- */
.tech-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.3s ease,
              filter 0.3s ease;
  cursor: default;
}
.tech-icon:hover {
  transform: translateY(-6px) scale(1.1);
  color: #fff;
  filter: drop-shadow(0 0 12px var(--main-glow-md));
}
.tech-icon i {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tech-icon:hover i {
  transform: scale(1.08);
}

/* ----- Timeline progressive ----- */
.timeline::before {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline.is-lit::before {
  transform: scaleY(1);
}
.timeline-item {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-item:nth-child(even) {
  transform: translateX(16px);
}
.timeline-item.is-visible {
  opacity: 1;
  transform: none;
}
.timeline-item::before {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.timeline-item.is-visible::before {
  transform: translateX(-50%) scale(1.25);
  box-shadow: 0 0 16px 4px var(--main-glow-lg);
}

/* ----- Project cards ----- */
.project-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
  overflow: hidden;
}
.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(var(--main-rgb), 0.35);
  border-color: rgba(var(--main-rgb), 0.5);
}
.project-card .img-wrap {
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 15px;
}
.project-card img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.project-card:hover img {
  transform: scale(1.05);
}
.project-card .btns .btn {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}
.project-card .btns .btn i {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}
.project-card .btns .btn:hover i.fa-external-link-alt,
.project-card .btns .btn:hover i.fas.fa-external-link-alt {
  transform: translateX(3px);
}

/* ----- Service cards ----- */
.services-grid:hover .service-card:not(:hover) {
  opacity: 0.72;
  transition: opacity 0.35s ease;
}
.service-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              opacity 0.35s ease,
              border-color 0.35s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 40px rgba(var(--main-rgb), 0.45);
  border-color: rgba(var(--main-rgb), 0.45);
  opacity: 1;
}
.service-icon {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .service-icon {
  transform: scale(1.08);
}
.service-features span {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.service-card:hover .service-features span {
  background: rgba(var(--main-rgb), 0.22);
  border-color: rgba(var(--main-rgb), 0.5);
  color: #fff;
}
/* Odoo card sequential tags */
.service-card[data-service="odoo"] .service-features span {
  opacity: 0.85;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.3s ease;
}
.service-card[data-service="odoo"]:hover .service-features span {
  opacity: 1;
  transform: none;
}
.service-card[data-service="odoo"]:hover .service-features span:nth-child(1) { transition-delay: 0.02s; }
.service-card[data-service="odoo"]:hover .service-features span:nth-child(2) { transition-delay: 0.06s; }
.service-card[data-service="odoo"]:hover .service-features span:nth-child(3) { transition-delay: 0.1s; }
.service-card[data-service="odoo"]:hover .service-features span:nth-child(4) { transition-delay: 0.14s; }
.service-card[data-service="odoo"]:hover .service-features span:nth-child(5) { transition-delay: 0.18s; }

/* ----- Why hire me ----- */
.why-hire-grid:hover .why-hire-card:not(:hover) {
  opacity: 0.65;
  filter: brightness(0.9);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.why-hire-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              opacity 0.35s ease,
              filter 0.35s ease,
              border-color 0.35s ease;
}
.why-hire-card:hover {
  transform: translateY(-6px);
  border-color: var(--main);
  box-shadow: 0 0 30px var(--main-glow-md);
  opacity: 1;
  filter: none;
}
.why-hire-card i {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.why-hire-card:hover i {
  transform: scale(1.12);
}

/* ----- Magnetic buttons ----- */
.magnetic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.magnetic .magnetic-inner {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-home1, .btn-home2, #contact-submit-btn, .project-card .btn {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              background 0.3s ease,
              color 0.3s ease;
}
.btn-home1:active,
.btn-home2:active,
#contact-submit-btn:active,
.project-card .btn:active {
  transform: scale(0.97);
}

/* ----- Contact form ----- */
.form-group input,
.form-group textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--main);
  box-shadow: 0 0 16px rgba(var(--main-rgb), 0.45);
  background: rgba(0, 0, 0, 0.45);
}
.form-status {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-status.success,
.form-status.error {
  animation: statusIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes statusIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ----- About orbit hover ----- */
.orbit-box {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.orbit-box:hover {
  transform: scale(1.04);
}
.orbit-box:hover .orbit {
  animation-duration: 10s;
}
.orbit-box:hover .core {
  box-shadow: 0 0 50px rgba(var(--main-alt-rgb), 0.35);
}

/* ----- Subtle background alive ----- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 30% 20%, rgba(var(--main-rgb), 0.08), transparent 60%),
    radial-gradient(ellipse 40% 35% at 75% 70%, rgba(var(--main-core-rgb), 0.07), transparent 55%);
  animation: bgDrift 22s ease-in-out infinite alternate;
  opacity: 0.9;
}
@keyframes bgDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2%, 1.5%) scale(1.03); }
}

/* ----- Availability pulse (existing online + home badge) ----- */
.home-p {
  position: relative;
}
.home-p::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--main);
  box-shadow: 0 0 8px 2px var(--main-glow-lg);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulseDot 1.8s ease-in-out infinite;
}

/* ----- Scroll skill card polish ----- */
.scroll-skill-card {
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.scroll-skill-card.is-transitioning {
  box-shadow: 0 0 28px var(--main-glow-md);
  border-color: rgba(var(--main-rgb), 0.45);
}

/* ----- Photo subtle parallax container ----- */
.photo-container {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.photo-container img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile: keep reveals, drop heavy effects */
@media (max-width: 768px) {
  body::before { animation: none; opacity: 0.5; }
  .services-grid:hover .service-card:not(:hover),
  .why-hire-grid:hover .why-hire-card:not(:hover) {
    opacity: 1;
    filter: none;
  }
}