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

@layer base {
  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/manrope-1.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/manrope-3.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("/fonts/playfair-9.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  @font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("/fonts/playfair-10.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    /* Ivory White luxury — warm editorial neutrals, earthy bronze accent */
    --background: 40 42% 94%;          /* #F6F1E8 ivory white */
    --surface-1: 40 42% 94%;           /* #F6F1E8 ivory */
    --surface-2: 36 34% 90%;           /* #EFE7DA warm cream */
    --surface-3: 36 38% 97%;           /* #FBF8F2 lightest breath */
    --surface-sand: 33 30% 86%;        /* #E7DDCF soft sand */
    --surface-contrast: 28 12% 21%;    /* #3D362F warm editorial taupe (kept for non-home contrast bands) */
    --foreground: 28 10% 17%;          /* #2E2A26 deep warm charcoal */
    --heading: 28 12% 14%;             /* slightly deeper for headings */
    --card: 40 42% 94%;
    --card-foreground: 28 10% 17%;
    --popover: 40 42% 94%;
    --popover-foreground: 28 10% 17%;
    --primary: 28 10% 17%;             /* warm charcoal as primary */
    --primary-foreground: 40 42% 96%;
    --secondary: 36 34% 90%;           /* warm cream */
    --secondary-foreground: 28 10% 17%;
    --muted: 36 30% 92%;
    --muted-foreground: 28 9% 33%;     /* #5B534C muted brown-gray */
    --accent: 28 32% 51%;              /* #A8835A earthy bronze */
    --accent-foreground: 40 42% 96%;
    --destructive: 8 45% 42%;
    --destructive-foreground: 40 42% 96%;
    --border: 33 20% 84%;
    --input: 33 20% 84%;
    --ring: 28 32% 51%;
    --radius: 0.125rem;
    --sidebar-background: 43 37% 96%;
    --sidebar-foreground: 182 39% 12%;
    --sidebar-primary: 170 70% 23%;
    --sidebar-primary-foreground: 43 38% 98%;
    --sidebar-accent: 37 56% 89%;
    --sidebar-accent-foreground: 182 39% 12%;
    --sidebar-border: 40 24% 82%;
    --sidebar-ring: 170 70% 23%;
    --hero-veil: linear-gradient(180deg, hsl(40 42% 94% / 0.18) 0%, hsl(28 12% 14% / 0.18) 50%, hsl(28 12% 14% / 0.45) 100%);
    --sunlight-overlay: none;
    --gradient-tropical: none;
    --gradient-resort: linear-gradient(180deg, hsl(40 42% 94%), hsl(36 34% 90%));
    --shadow-soft: 0 1px 2px hsl(28 10% 17% / 0.04);
    --shadow-glow: 0 8px 32px -16px hsl(28 10% 17% / 0.08);
  }

  .dark {
    --background: 182 44% 8%;
    --foreground: 43 38% 96%;
    --card: 183 36% 12%;
    --card-foreground: 43 38% 96%;
    --popover: 183 36% 12%;
    --popover-foreground: 43 38% 96%;
    --primary: 162 55% 55%;
    --primary-foreground: 182 44% 8%;
    --secondary: 181 28% 18%;
    --secondary-foreground: 43 38% 96%;
    --muted: 181 28% 18%;
    --muted-foreground: 42 18% 73%;
    --accent: 17 78% 60%;
    --accent-foreground: 182 44% 8%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 43 38% 96%;
    --border: 181 23% 22%;
    --input: 181 23% 22%;
    --ring: 162 55% 55%;
    --sidebar-background: 182 44% 8%;
    --sidebar-foreground: 43 38% 96%;
    --sidebar-primary: 162 55% 55%;
    --sidebar-primary-foreground: 182 44% 8%;
    --sidebar-accent: 181 28% 18%;
    --sidebar-accent-foreground: 43 38% 96%;
    --sidebar-border: 181 23% 22%;
    --sidebar-ring: 162 55% 55%;
  }

  * { @apply border-border; }
  html { scroll-behavior: smooth; }
  body {
    @apply bg-background text-foreground font-sans font-normal antialiased;
    font-size: 1rem;
    line-height: 1.85;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @media (min-width: 768px) {
    body { font-size: 1.0625rem; line-height: 1.9; }
  }
  h1, h2, h3 {
    @apply font-display font-light;
    letter-spacing: -0.012em;
    color: hsl(var(--heading));
    text-wrap: balance;
    hyphens: manual;
  }
  h1 {
    font-size: clamp(2.125rem, 5vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.012em;
    font-weight: 300;
  }
  h2 {
    font-size: clamp(1.625rem, 3vw, 2.625rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 300;
  }
  h3 {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    line-height: 1.35;
    font-weight: 400;
  }
  p { @apply max-w-xl; line-height: 1.75; font-weight: 300; }
  p { text-wrap: pretty; }
}

/* Enforce typography scale even when utility size classes are applied to headings */
@layer base {
  h1.text-3xl, h1.text-4xl, h1.text-5xl, h1.text-6xl, h1.text-7xl, h1.text-8xl,
  h1.md\:text-5xl, h1.md\:text-6xl, h1.md\:text-7xl, h1.md\:text-8xl,
  h1.sm\:text-5xl, h1.sm\:text-6xl, h1.sm\:text-7xl, h1.sm\:text-8xl,
  h1.lg\:text-5xl, h1.lg\:text-6xl, h1.lg\:text-7xl, h1.lg\:text-8xl {
    font-size: clamp(2.125rem, 5vw, 4.25rem) !important;
    line-height: 1.15 !important;
  }
  h2.text-2xl, h2.text-3xl, h2.text-4xl, h2.text-5xl, h2.text-6xl, h2.text-7xl,
  h2.md\:text-3xl, h2.md\:text-4xl, h2.md\:text-5xl, h2.md\:text-6xl, h2.md\:text-7xl,
  h2.sm\:text-3xl, h2.sm\:text-4xl, h2.sm\:text-5xl, h2.sm\:text-6xl,
  h2.lg\:text-3xl, h2.lg\:text-4xl, h2.lg\:text-5xl, h2.lg\:text-6xl {
    font-size: clamp(1.625rem, 3vw, 2.5rem) !important;
    line-height: 1.22 !important;
  }
  h3.text-xl, h3.text-2xl, h3.text-3xl, h3.text-4xl, h3.text-5xl,
  h3.md\:text-2xl, h3.md\:text-3xl, h3.md\:text-4xl, h3.md\:text-5xl {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem) !important;
    line-height: 1.35 !important;
  }

  /* Body paragraph line-height — softer, more editorial */
  p.leading-8 { line-height: 1.7 !important; }
  p.leading-9 { line-height: 1.75 !important; }
  p.leading-10 { line-height: 1.8 !important; }

  /* Cap body paragraph size — quieter editorial scale */
  p.text-xl { font-size: 1.0625rem !important; }
  p.text-lg { font-size: 1.0625rem !important; }
  p.text-base { font-size: 0.9375rem !important; }
}

/* Layout grid system — consistent container width and gutters */
@layer utilities {
  .container-grid {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  @media (min-width: 640px) {
    .container-grid { padding-left: 2rem; padding-right: 2rem; }
  }
  @media (min-width: 1024px) {
    .container-grid { padding-left: 2.5rem; padding-right: 2.5rem; }
  }
}

@layer utilities {
  .hero-veil { background: var(--hero-veil); }
  .hero-title {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .experience-copy-readable {
    color: hsl(var(--primary-foreground));
    font-weight: 500;
  }
  .experience-copy-readable h2 {
    color: hsl(var(--primary-foreground));
    font-weight: 500;
  }
  .experience-copy-readable p {
    color: hsl(var(--primary-foreground));
    font-weight: 500;
  }
  .sunlight-overlay { background: var(--sunlight-overlay); }
  .gradient-tropical { background: var(--gradient-tropical); }
  .gradient-resort { background: var(--gradient-resort); }
  .editorial-reveal { animation: editorial-reveal 820ms cubic-bezier(.2,.8,.2,1) both; }
  .hero-image-fade { animation: hero-image-fade 260ms ease-out both; }
  .resort-fade { animation: resort-fade 260ms ease-out both; }
  .cinematic-drift { animation: none; transform: translate3d(0, 0, 0); transform-origin: center; }
  @keyframes hero-image-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes resort-fade { from { opacity: 0; } to { opacity: 1; } }
  @media (max-width: 767px) { .hero-image-fade, .resort-fade, .editorial-reveal { animation: none; } }
  @media (prefers-reduced-motion: reduce) { .editorial-reveal, .hero-image-fade, .resort-fade, .cinematic-drift { animation: none; } }
}

@layer utilities {
  .hero-wave { will-change: transform; }
  .hero-wave-back { animation: hero-wave-drift 14s ease-in-out infinite; }
  .hero-wave-front { animation: hero-wave-drift 9s ease-in-out infinite reverse; opacity: 0.9; }
  @keyframes hero-wave-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-25%, 2px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-wave-back, .hero-wave-front { animation: none; }
  }
}

/* ============================================================
   Cinematic Motion & Texture System
   - Quiet reveal-on-scroll for headings, paragraphs, images
   - Subtle film grain overlay
   - Warm natural-light gradient
   ============================================================ */
@layer utilities {
  .cine-fade {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity 1300ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }
  .cine-fade.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .cine-fade-d1 { transition-delay: 90ms; }
  .cine-fade-d2 { transition-delay: 180ms; }

  /* Slow image reveal — soft scale-in for a quiet cinematic breath */
  img.cine-fade,
  picture.cine-fade {
    transform: translate3d(0, 18px, 0) scale(1.018);
    transition:
      opacity 1500ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  img.cine-fade.is-visible,
  picture.cine-fade.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .cine-fade,
    img.cine-fade,
    picture.cine-fade {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
}

/* Film-grain — extremely subtle, fixed, non-interactive */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Warm natural-light wash — almost invisible, anchors the page in soft sunlight */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  background:
    radial-gradient(120% 70% at 50% 0%, hsl(40 45% 96% / 0.18), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, hsl(33 30% 18% / 0.06), transparent 60%);
}

@media (max-width: 767px) {
  body::before { opacity: 0.035; background-size: 140px 140px; }
  body::after { opacity: 0.7; }

  /* Quieter, faster reveal on mobile — preserve emotion, lower cost */
  .cine-fade {
    transform: translate3d(0, 8px, 0);
    transition:
      opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  img.cine-fade,
  picture.cine-fade {
    transform: translate3d(0, 10px, 0); /* drop the scale-in — Safari repaint cost */
    transition:
      opacity 1000ms cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  img.cine-fade.is-visible,
  picture.cine-fade.is-visible {
    transform: translate3d(0, 0, 0);
  }
  .cine-fade-d1 { transition-delay: 60ms; }
  .cine-fade-d2 { transition-delay: 120ms; }

  /* Russian typography rhythm on small screens */
  h1, h2, h3 {
    letter-spacing: -0.005em;
    word-spacing: 0.01em;
    hyphens: manual;
  }
  p { hyphens: auto; -webkit-hyphens: auto; }

  /* Soften the olive contrast band — better readability on phone screens */
  .bg-surface-contrast {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  /* Trim oversized editorial vertical rhythm so the page does not feel exhausting */
  section[class*="py-52"],
  section[class*="py-64"],
  section[class*="py-72"],
  section[class*="py-80"] {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  /* Mobile editorial calm — softer section rhythm overall */
  section[class*="py-32"],
  section[class*="py-40"],
  section[class*="py-44"],
  section[class*="py-48"] {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  /* Quieter metadata / overlines on phones */
  .tracking-\[0\.4em\], .tracking-\[0\.5em\] {
    letter-spacing: 0.32em !important;
  }

  /* Narrow paragraph widths feel more editorial on small screens */
  p { max-width: 36ch; }
  p.max-w-2xl, p.max-w-xl, p.max-w-lg { max-width: 38ch !important; }

  /* Drop heavy backdrop-blur on iOS — keep solid translucent fill */
  .backdrop-blur-md { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Editorial horizontal strip — quiet scrollbar, calm momentum */
.region-strip {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.region-strip::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}

/* Tighten oversized editorial section padding across the whole site (desktop) */
@media (min-width: 768px) {
  section[class*="py-32"],
  section[class*="py-36"],
  section[class*="py-40"],
  section[class*="py-44"],
  section[class*="py-48"] {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  section[class*="py-52"],
  section[class*="py-56"],
  section[class*="py-64"],
  section[class*="py-72"],
  section[class*="py-80"] {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  footer[class*="pt-32"],
  footer[class*="pt-40"],
  footer[class*="pt-52"],
  footer[class*="pt-64"] {
    padding-top: 5rem !important;
  }
}