@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  body {
    @apply bg-hameem-cream font-body text-hameem-black antialiased;
  }
  /* Arabic UI: IBM Plex Sans Arabic for copy and display.
   * .font-display must beat Tailwind's utility: avoid :where() so specificity wins over .font-display alone. */
  [dir='rtl'] body {
    @apply font-arabic;
  }
  [dir='rtl'] h1 {
    @apply font-arabic;
  }
  [dir='rtl'] .font-display {
    @apply font-arabic;
  }
  :where(a, button, input, textarea, select, summary):focus-visible {
    @apply outline-2 outline-offset-2 outline-hameem-beige;
  }
}

/* Notched phones: keep FAB inside safe area */
.fab-safe {
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
}
.fab-safe-start {
  left: max(1.5rem, env(safe-area-inset-left, 0px));
}
.fab-safe-end {
  right: max(1.5rem, env(safe-area-inset-right, 0px));
}

.skip-link {
  @apply sr-only fixed start-4 top-4 z-[100] rounded-lg bg-hameem-black px-4 py-2 text-sm font-semibold text-white shadow-lg;
  @apply focus:not-sr-only focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-hameem-beige;
}

@layer components {
  .glass-panel {
    @apply border border-white/20 bg-white/10 shadow-glass backdrop-blur-xl;
  }
  .glass-nav {
    @apply border-b border-white/15 bg-hameem-black/60 backdrop-blur-xl;
  }
  .glass-card {
    @apply rounded-2xl border border-hameem-black/[0.08] bg-white/90 shadow-card backdrop-blur-md;
  }
  .glass-card-dark {
    @apply rounded-2xl border border-white/15 bg-hameem-black/35 shadow-glass backdrop-blur-xl;
  }
  /** Premium listing / detail panels */
  .surface-panel {
    @apply rounded-3xl border border-hameem-black/[0.07] bg-white shadow-soft;
  }
  .surface-panel-elevated {
    @apply rounded-3xl border border-hameem-black/[0.06] bg-white shadow-card;
  }

  /** Full-width feel + room for diagonal 3D ribbon */
  .partner-marquees-stage {
    @apply -mx-4 px-2 md:-mx-6 md:px-3;
  }

  .partner-marquee {
    @apply overflow-hidden py-1;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 6%,
      #000 94%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 6%,
      #000 94%,
      transparent
    );
  }

  .partner-marquee__scene {
    perspective: 1100px;
    perspective-origin: 50% 45%;
  }

  .partner-marquee__tilt {
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    will-change: transform;
    filter: drop-shadow(0 14px 28px rgb(0 0 0 / 0.05));
  }

  /** Same diagonal + paper tilt on both rows (parallel ribbons) */
  .partner-marquee--forward .partner-marquee__tilt,
  .partner-marquee--reverse .partner-marquee__tilt {
    animation: partner-marquee-roll-tilt-fwd 20s ease-in-out infinite alternate;
  }

  .partner-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
  }

  .partner-marquee--forward .partner-marquee__track {
    animation: partner-marquee-scroll 55s linear infinite;
  }

  .partner-marquee--reverse .partner-marquee__track {
    animation: partner-marquee-scroll 55s linear infinite reverse;
  }

  @media (prefers-reduced-motion: reduce) {
    .partner-marquee--forward .partner-marquee__tilt,
    .partner-marquee--reverse .partner-marquee__tilt {
      animation: none;
      filter: none;
    }

    .partner-marquee--forward .partner-marquee__tilt,
    .partner-marquee--reverse .partner-marquee__tilt {
      transform: rotateZ(-1deg);
    }

    .partner-marquee--forward .partner-marquee__track,
    .partner-marquee--reverse .partner-marquee__track {
      animation: none;
      transform: none;
    }
  }
}

@keyframes partner-marquee-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/** Diagonal strip + subtle rotateX sway (paper unrolling off a roll) */
@keyframes partner-marquee-roll-tilt-fwd {
  from {
    transform: rotateZ(-2.5deg) rotateX(6deg);
  }
  to {
    transform: rotateZ(-2.5deg) rotateX(10deg);
  }
}