/* ==========================================================================
   Mobile-first polish — smooth, beautiful, performant
   ========================================================================== */

html.is-mobile {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.is-mobile body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* --- Kill expensive effects on mobile --- */
html.is-mobile .cine__grain,
html.is-mobile .cine__beam,
html.is-mobile .hero__film-bar,
html.is-mobile .hero__aurora,
html.is-mobile .hero__orb,
html.is-mobile .hero__canvas,
html.is-mobile #particles-canvas,
html.is-mobile .ambient-glow,
html.is-mobile .audio-toggle,
html.is-mobile .hero__float {
  display: none !important;
}

html.is-mobile .cine__mesh {
  animation: none;
  opacity: 0.7;
}

html.is-mobile .cine__vignette {
  opacity: 0.85;
}

/* Lighter glass — no heavy blur */
html.is-mobile .nav__glass,
html.is-mobile .glass-panel,
html.is-mobile .hero__stats,
html.is-mobile .stat-card,
html.is-mobile .skill-node,
html.is-mobile .project-card,
html.is-mobile .contact__form,
html.is-mobile .contact__card,
html.is-mobile .principle-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(12, 14, 22, 0.92);
}

html.is-mobile .nav.is-scrolled .nav__glass {
  background: rgba(5, 5, 8, 0.95);
}

/* --- Hero mobile cinematic (CSS only, GPU-friendly) --- */
html.is-mobile .hero {
  justify-content: center;
  min-height: 100svh;
  min-height: 100dvh;
}

html.is-mobile .hero__gradient {
  opacity: 1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 240, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    linear-gradient(180deg, #030306 0%, #050508 100%);
}

html.is-mobile .hero__title-line {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

html.is-mobile .hero.is-ready .hero__title-line,
html.is-mobile .hero.is-inview .hero__title-line {
  animation: mobileFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.is-mobile .hero [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-mobile .hero [data-reveal].is-inview,
html.is-mobile .hero [data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

html.is-mobile .hero.is-ready .hero__title-line:nth-child(1),
html.is-mobile .hero.is-inview .hero__title-line:nth-child(1) { animation-delay: 0.05s; }
html.is-mobile .hero.is-ready .hero__title-line:nth-child(2),
html.is-mobile .hero.is-inview .hero__title-line:nth-child(2) { animation-delay: 0.15s; }
html.is-mobile .hero.is-ready .hero__title-line:nth-child(3),
html.is-mobile .hero.is-inview .hero__title-line:nth-child(3) { animation-delay: 0.25s; }

html.is-mobile [data-split-line] .char {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes mobileFadeUp {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Scroll reveal — CSS transition when in view */
html.is-mobile [data-reveal],
html.is-mobile [data-project-card],
html.is-mobile .timeline-item,
html.is-mobile .stat-card,
html.is-mobile .principle-card,
html.is-mobile .process-step,
html.is-mobile .section__header,
html.is-mobile [data-split-title],
html.is-mobile .skills__panel,
html.is-mobile .contact__form .form-group,
html.is-mobile .footer__brand,
html.is-mobile .footer__social,
html.is-mobile .footer__bottom,
html.is-mobile .about__portrait {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.is-mobile .is-inview,
html.is-mobile .is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}

html.is-mobile .section__title {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-mobile .section__header.is-inview .section__title {
  opacity: 1;
  transform: none;
}

/* --- Touch targets --- */
html.is-mobile a,
html.is-mobile button,
html.is-mobile .skill-node {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.is-mobile .btn {
  min-height: 48px;
  padding: 0.9rem 1.5rem;
}

html.is-mobile .nav__toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

html.is-mobile .nav__mobile-link {
  padding: 0.75rem 1.5rem;
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Skills — panel first, then grid */
html.is-mobile .skills__stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

html.is-mobile .skills__panel {
  order: -1;
  margin-top: 0 !important;
}

/* Skills tap feedback */
html.is-mobile .skill-node {
  transition: transform 0.2s ease, border-color 0.2s, background 0.2s, opacity 0.65s;
}

html.is-mobile .skill-node:active,
html.is-mobile .skill-node.is-active {
  transform: scale(0.98) !important;
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(0, 240, 255, 0.08);
}

/* Project cards — subtle press */
html.is-mobile .project-card {
  transform: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.65s;
}

html.is-mobile .project-card:active {
  transform: scale(0.985) !important;
}

html.is-mobile .project-card.is-inview {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Marquee — smooth, lighter */
html.is-mobile .marquee {
  padding: 1rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

html.is-mobile .marquee__track {
  animation-duration: 35s;
  gap: 2rem;
}

/* Form — prevent iOS zoom */
html.is-mobile .form-group input,
html.is-mobile .form-group textarea {
  font-size: 16px;
}

/* Process steps visible list */
html.is-mobile .process__steps {
  gap: 1.5rem;
}

html.is-mobile .process-step {
  opacity: 0.55;
  transform: translate3d(0, 16px, 0);
}

html.is-mobile .process-step.is-inview,
html.is-mobile .process-step.is-active {
  opacity: 1;
  transform: none;
}

html.is-mobile .process-step__node {
  width: 48px;
  height: 48px;
}

/* Timeline */
html.is-mobile .timeline-item {
  opacity: 0.5;
  transform: translate3d(-12px, 0, 0);
}

html.is-mobile .timeline-item.is-inview,
html.is-mobile .timeline-item.is-active {
  opacity: 1;
  transform: none;
}

/* Section glow static */
html.is-mobile .section__glow {
  opacity: 0.2 !important;
  filter: blur(60px);
  transition: none;
}

html.is-mobile .section--cinematic::before {
  animation: none;
  opacity: 0.5;
  width: 60%;
}

/* Loader faster feel */
html.is-mobile .loader__ring--outer {
  width: 100px;
  height: 100px;
}

html.is-mobile .loader__ring--inner {
  width: 72px;
  height: 72px;
}

/* Progress bar */
html.is-mobile .cine__progress {
  height: 3px;
}

/* Hide btn hover effects that don't work on touch */
html.is-mobile .btn::before,
html.is-mobile .btn--primary::after {
  display: none;
}

/* Counter readable */
html.is-mobile .hero__stat-value {
  font-size: 1.75rem;
}

/* Role text */
html.is-mobile .hero__roles-text {
  min-height: 1.5em;
  transition: opacity 0.3s ease;
}

/* Nav open body lock */
html.is-mobile body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Reduce motion still respected */
@media (prefers-reduced-motion: reduce) {
  html.is-mobile [data-reveal],
  html.is-mobile .hero__title-line,
  html.is-mobile [data-project-card] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}