@import 'tailwindcss';

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/cormorantgaramond/v16/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/cormorantgaramond/v16/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjQAllvuQ.woff2') format('woff2');
}

@layer base {
  :root {
    --ink: #050a0e;
    --steel: #111a27;
    --slate: #64748b;
    --salt: #f1f5f9;
    --foam: #e2e8f0;
    --current: #06b6d4;
    --current-bright: #67e8f9;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    background: var(--ink);
    color: var(--salt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  ::selection {
    background: var(--current);
    color: var(--ink);
  }
}

@layer components {
  .min-h-screen-ios {
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
  }

  .font-display {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
  }

  /* giant editorial heading */
  .hero-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-size: clamp(3.5rem, 12vw, 10rem);
  }

  .section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--current);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--current);
  }

  /* sharp-edged accent button */
  .btn-book {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2.25rem;
    background: var(--current);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
  }
  .btn-book:hover {
    background: var(--current-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.3);
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2.25rem;
    border: 1px solid var(--salt);
    color: var(--salt);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
  }
  .btn-ghost:hover {
    background: var(--salt);
    color: var(--ink);
  }

  /* horizontal gallery strip */
  .gallery-strip {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-strip::-webkit-scrollbar { display: none; }
  .gallery-strip-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    overflow: hidden;
    cursor: pointer;
  }
  .gallery-strip-item img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .gallery-strip-item:hover img {
    transform: scale(1.06);
  }

  /* bento grid */
  .bento {
    display: grid;
    gap: 0.375rem;
  }

  /* reveal animation */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* stagger children */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
  .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
  .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
  .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
  .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
  .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }
  .reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* wave divider */
  .wave-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
  }
  .wave-divider svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
}
