@import "tailwindcss";

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

/* ------------------------------------------------ */
/* Base Typography & Rendering Improvements        */
/* ------------------------------------------------ */

html {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* ------------------------------------------------ */
/* Liquid Glass System                             */
/* ------------------------------------------------ */

.glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.08),
    0 2px 12px rgba(0, 0, 0, 0.04);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.10),
    0 3px 16px rgba(0, 0, 0, 0.05);
}


/* ------------------------------------------------ */
/* Specular Highlight Overlay (Apple-like sheen)   */
/* ------------------------------------------------ */

.specular {
  position: relative;
  overflow: hidden;
}

.specular::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255, 255, 255, 0.65),
    rgba(255, 255, 255, 0.00) 55%
  );
  transform: rotate(-8deg);
  pointer-events: none;
}

.specular::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.00) 30%,
    rgba(0, 0, 0, 0.02)
  );
  pointer-events: none;
}

/* Hide scrollbars for gallery */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}


/* ------------------------------------------------ */
/* Optional Subtle Noise Layer (if used)           */
/* ------------------------------------------------ */

.noise-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image: url("/noise.png");
}
