/* ========================================
   NOMADE — Experimental styles
   ======================================== */

::selection {
  background: rgba(240, 239, 232, 0.15);
  color: #f0efe8;
}

::-webkit-scrollbar { width: 0; display: none; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
}

/* ---- Noise texture ---- */
.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ---- Checkerboard ---- */
.checker-overlay {
  background-image:
    linear-gradient(45deg, rgba(240,239,232,0.004) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(240,239,232,0.004) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(240,239,232,0.004) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(240,239,232,0.004) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

/* ---- Menu overlay ---- */
#menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#menu-btn.open .menu-l:first-child {
  transform: rotate(45deg) translate(2px, 2px);
  width: 1.25rem;
}
#menu-btn.open .menu-l:last-child {
  transform: rotate(-45deg) translate(2px, -2px);
  width: 1.25rem;
}

.menu-link {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Page content initial state ---- */
.page-title {
  opacity: 0;
  transform: translateY(40px) skewY(2deg);
}

.page-label {
  opacity: 0;
  transform: translateX(-15px);
}

/* ---- Reveal helpers ---- */
.reveal-el {
  opacity: 0;
  transform: translateY(25px);
}

/* ---- Service rows ---- */
.service-row {
  opacity: 0;
  transform: translateY(15px);
  -webkit-tap-highlight-color: transparent;
}

/* ---- Work cards ---- */
.work-card {
  opacity: 0;
  transform: translateY(30px);
  -webkit-tap-highlight-color: transparent;
}

.work-card video { pointer-events: none; }

/* ---- Process elements ---- */
.process-el {
  opacity: 0;
  transform: translateY(20px);
  -webkit-tap-highlight-color: transparent;
}

/* ---- Next page link ---- */
.next-page {
  opacity: 0;
  transform: translateY(20px);
  -webkit-tap-highlight-color: transparent;
}

/* ---- Form ---- */
input:focus, textarea:focus {
  border-image: linear-gradient(90deg, rgba(240,239,232,0.25), transparent) 1;
}

input, textarea {
  border-radius: 0;
  -webkit-appearance: none;
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* ---- Touch-friendly sizing ---- */
.touch-manipulation {
  touch-action: manipulation;
}

/* ---- Mobile (small phones) ---- */
@media (max-width: 380px) {
  .page-title {
    transform: translateY(25px) skewY(1deg);
  }

  .nav-row .nav-text {
    font-size: 1rem;
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .page-title {
    transform: translateY(30px) skewY(1deg);
  }

  /* On mobile, show service descriptions always */
  .service-row p {
    opacity: 0.4 !important;
  }
}

/* ---- Safe area insets for notched phones ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nav-row:last-child {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}