/* ══════════════════════════════════════════════════════
   MOBILE-ONLY STYLES — Albarasy Portfolio
   Loaded via <link media="(max-width: 768px)">
   These rules ONLY apply on mobile/tablet-portrait.
   Desktop styles in styles.css remain completely untouched.
   ══════════════════════════════════════════════════════ */

/* ── GENERAL OVERRIDES ── */

/* Restore native cursor on all elements (desktop has cursor:none) */
*, *::before, *::after {
  cursor: auto !important;
}

/* Hide desktop-only effects that are performance hogs or invisible on mobile */
.cursor-dot,
.cursor-ring,
#fluid,
.grain-overlay,
.scroll-track,
.orb-a,
.orb-b {
  display: none !important;
}

/* Allow body to use native scroll feel on mobile */
body {
  cursor: auto;
}

/* ── NAV CAPSULE ── */
.nav-capsule {
  width: 92vw;
  padding: 6px 12px;
  top: 12px;
  /* Simpler glass — skip heavy SVG filter on mobile */
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Override the Chromium-only @supports block for mobile */
@supports (backdrop-filter: url(#x)) {
  .nav-capsule {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

.nav-logo {
  height: 36px;
  margin-right: -8px;
}
.nav-logo img {
  height: 50px;
}

.nav-hamburger span {
  width: 18px;
}

/* ── HERO ── */
.hero {
  min-height: 100svh; /* Use small viewport height for mobile safe area */
}

#heroText {
  bottom: 10vh;
  width: 92%;
}

.hero-firstname {
  font-size: clamp(36px, 13vw, 60px);
  letter-spacing: -0.03em;
}

.hero-lastname {
  font-size: clamp(20px, 7vw, 34px);
  margin-top: -8px;
}

/* Hero glow — simplify on mobile */
.hero-glow {
  display: none;
}

/* ── TAGLINE SECTION ── */
.tagline-section {
  min-height: 70vh;
}

.tagline-video-bg {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.tagline-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.tagline-content {
  max-width: 100%;
  padding: 40px 6vw;
  text-align: center;
}

.tagline-text,
.tagline-text .scroll-float-text {
  font-size: clamp(18px, 5vw, 26px) !important;
  line-height: 1.4 !important;
}

.cta-btn {
  font-size: 9px;
  padding: 11px 24px;
  gap: 10px;
}

/* ── SHOWCASE (Selected Work) ── */

/* Stack text and canvas vertically */
.showcase-split {
  flex-direction: column;
}

.showcase-text-panel {
  width: 100%;
  height: auto;
  min-height: 35vh;
  padding: 70px 6vw 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 5;
  background: rgba(3, 3, 3, 0.92);
}

.showcase-project {
  left: 6vw;
  right: 6vw;
}

/* Neon beam canvas — push behind text on mobile */
#neon-bg-canvas {
  z-index: 0;
  opacity: 0.4;
}

.project-number {
  font-size: clamp(40px, 10vw, 60px);
}

.project-title {
  font-size: clamp(22px, 6vw, 34px);
  margin-bottom: 10px;
}

.project-category {
  font-size: 8px;
  padding: 4px 14px;
  margin-bottom: 14px;
}

.project-desc {
  font-size: 13px;
  line-height: 1.6;
  max-width: 100%;
}

.showcase-canvas-panel {
  width: 100%;
  height: 65vh;
  min-height: 280px;
}

/* Section header */
.showcase-header {
  top: 14px;
  left: 5vw;
  font-size: 9px;
}

/* Progress dots — move above canvas area */
.showcase-progress-dots {
  bottom: 24px;
}

.showcase-progress {
  bottom: 12px;
  width: 100px;
}

/* ── ABOUT SLIDE (inside showcase) ── */
.about-slide-title {
  font-size: clamp(26px, 7vw, 38px) !important;
}

.about-slide-bio {
  font-size: 13px !important;
  max-width: 100% !important;
  margin-bottom: 20px !important;
}

.about-slide-stats {
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.astat-number {
  font-size: clamp(36px, 9vw, 52px);
}

.astat-suffix {
  font-size: clamp(24px, 6vw, 36px);
}

.astat-label {
  font-size: 9px;
  letter-spacing: 0.2em;
}

.about-slide-quote {
  font-size: clamp(13px, 3.5vw, 16px);
  max-width: 100%;
}

/* ── ABOUT FULLSCREEN STATS ── */
.about-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-fs-stat {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 10px 0;
}

.about-fs-stat--left,
.about-fs-stat--right {
  text-align: center !important;
  padding-left: 6vw !important;
  padding-right: 6vw !important;
}

.about-fs-number {
  font-size: clamp(56px, 16vw, 100px);
  justify-content: center;
}

.about-fs-label {
  font-size: 10px;
  letter-spacing: 0.3em;
}

.about-fs-quote {
  font-size: clamp(13px, 3.5vw, 18px);
  white-space: normal;
  max-width: 80vw;
}

/* ── TRUSTED BY (Marquee) ── */
.trusted-section {
  padding: 60px 5vw;
}

.marquee-content {
  gap: 32px;
  padding-right: 32px;
}

.marquee-item.marquee-logo svg {
  height: clamp(22px, 5vw, 30px);
}

/* ── SERVICES ── */
.services-section {
  padding: 60px 5vw;
}

.services-label {
  margin-bottom: 28px;
}

.services-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 12px;
}

.service-card:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: auto;
  padding: 28px 20px 24px;
}
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5) {
  grid-column: auto;
  grid-row: auto;
}

.service-card {
  padding: 24px 18px 20px;
}

.service-card:nth-child(1) .service-number {
  font-size: 48px;
}
.service-card:nth-child(1) .service-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
}
.service-card:nth-child(1) .service-title {
  font-size: 17px;
}
.service-card:nth-child(1) .service-desc {
  font-size: 13px;
}

.service-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
}

.service-title {
  font-size: 13px;
  margin-bottom: 8px;
}

.service-desc {
  font-size: 12px;
  line-height: 1.6;
}

/* ── DOME GALLERY (Logo Showcase) ── */
.logos-section {
  padding: 40px 0 0;
}

#dome-gallery-container {
  height: 55vh;
  min-height: 320px;
}

/* ── CIRCULAR GALLERY ── */
.gallery-section {
  padding: 40px 0 60px;
}

.circular-gallery {
  height: 400px;
}

.gallery-swipe-hint {
  font-size: 14px;
  letter-spacing: 0.25em;
}

.swipe-icon {
  width: 28px;
}

/* Scale the arc to be less prominent */
.gallery-arc-line .gallery-arc-path {
  stroke-width: 6;
}

/* ── CONTACT ── */
.contact-section {
  padding: 60px 6vw 80px;
}

.contact-heading {
  font-size: clamp(32px, 10vw, 56px);
  margin-bottom: 20px;
}

.contact-email {
  font-size: clamp(14px, 4vw, 18px);
  margin-bottom: 24px;
}

.contact-cta {
  margin-bottom: 28px;
}

.social-link {
  width: 40px;
  height: 40px;
}

/* ── LOADING SCREEN ── */
.loader-logo {
  width: 220px;
  height: 220px;
}

.loader-logo-wrap {
  width: 120px;
  height: 120px;
}

/* ══════════════════════════════════════
   EXTRA SMALL (≤480px)
   ══════════════════════════════════════ */
@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card:nth-child(1) {
    grid-column: 1;
  }

  .showcase-text-panel {
    min-height: 30vh;
    padding: 64px 5vw 16px;
  }

  .showcase-canvas-panel {
    height: 55vh;
  }

  .circular-gallery {
    height: 320px;
  }

  #dome-gallery-container {
    height: 45vh;
    min-height: 280px;
  }

  .hero-firstname {
    font-size: clamp(32px, 14vw, 52px);
  }

  .hero-lastname {
    font-size: clamp(18px, 8vw, 30px);
  }

  .contact-heading {
    font-size: clamp(28px, 12vw, 48px);
  }

  .about-fs-number {
    font-size: clamp(48px, 18vw, 80px);
  }

  .marquee-item.marquee-logo svg {
    height: clamp(18px, 6vw, 24px);
  }

  .marquee-content {
    gap: 24px;
    padding-right: 24px;
  }
}