@import "tailwindcss";

@theme {
  /* --- Palette: warm editorial, brand-aligned ------------------------ */
  --color-bg:          #faf6ec;   /* cream page */
  --color-bg-soft:     #f1ebdb;   /* surface */
  --color-bg-deep:     #e6dfc9;   /* deeper surface / dividers */
  --color-ink:         #1c241c;   /* nearly black, warm */
  --color-ink-soft:    #3b4a3e;
  --color-muted:       #6b7968;

  --color-brand:       #0e4a2f;   /* deep forest (logo green, refined) */
  --color-brand-soft:  #2f6a47;
  --color-brand-deep:  #082818;

  --color-accent:      #c4502f;   /* refined coral (logo red, earthy) */
  --color-accent-soft: #e68a6c;
  --color-accent-deep: #8b3518;

  --color-line:        #d6cfb9;
  --color-focus:       #c4502f;

  /* --- Typography ---------------------------------------------------- */
  --font-display: "Fraunces", "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script-ja: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-script-cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --font-script-ko: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-script-ar: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", serif;
  --font-script-he: "Arial Hebrew", "Noto Sans Hebrew", sans-serif;

  /* --- Radii / shadows ---------------------------------------------- */
  --radius-card: 1rem;
  --shadow-soft: 0 1px 2px rgba(28,36,28,.04), 0 8px 24px -12px rgba(28,36,28,.15);
  --shadow-lift: 0 2px 4px rgba(28,36,28,.06), 0 20px 40px -20px rgba(28,36,28,.25);
}

/* --- Base ---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Script-specific typefaces based on <span lang="..."> */
[lang^="ja"] { font-family: var(--font-script-ja); }
[lang^="zh"] { font-family: var(--font-script-cjk); }
[lang^="ko"] { font-family: var(--font-script-ko); }
[lang^="ar"] { font-family: var(--font-script-ar); }
[lang^="he"] { font-family: var(--font-script-he); }

/* RTL */
html[dir="rtl"] .ltr-only { display: none; }

/* --- Selection & focus -------------------------------------------- */
::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Utility ------------------------------------------------------- */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .01em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-brand);
  color: var(--color-bg);
  border: 1px solid var(--color-brand);
}
.btn-primary:hover {
  background: var(--color-brand-deep);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-ink) 25%, transparent);
}
.btn-ghost:hover {
  border-color: var(--color-ink);
  transform: translateY(-1px);
}
.btn-accent {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
}
.btn-accent:hover {
  background: var(--color-accent-deep);
}

/* --- Reveal on scroll (progressive enhancement) ------------------- */
/* Elements stay visible by default so crawlers and no-JS users see them.
   JS adds .js to <html> and then the reveal animation kicks in. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Multilingual tagline block ----------------------------------- */
.tagline-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
}
.tagline-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--color-ink) 40%, transparent);
  transition: color .6s ease, transform .6s ease, font-weight .6s ease;
  line-height: 1.3;
  padding: 0 1rem;
}
.tagline-line[lang^="ja"],
.tagline-line[lang^="ko"],
.tagline-line[lang^="zh"],
.tagline-line[lang^="ar"],
.tagline-line[lang^="he"] {
  font-style: normal;
}
.tagline-line.is-active {
  color: var(--color-brand);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.tagline-line.is-active::before,
.tagline-line.is-active::after {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--color-accent);
  vertical-align: middle;
  margin: 0 1rem;
}

/* --- Hero carousel ------------------------------------------------- */
.hero-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-bg-deep);
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,22,15,.15) 0%, rgba(8,22,15,.3) 40%, rgba(8,22,15,.8) 100%);
}
.hero-carousel h2,
.hero-carousel p {
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
}

/* --- Language switcher -------------------------------------------- */
.lang-switcher {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-bg) 85%, white);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.lang-btn:hover { border-color: var(--color-ink); }
.lang-btn .flag { font-size: 1rem; line-height: 1; }
.lang-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 210px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  padding: .4rem;
  box-shadow: var(--shadow-lift);
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
  /* Hidden from layout when closed — keeps the dropdown from inflating
     document scroll height (the 15 lang items would add ~500px otherwise). */
  display: none;
  opacity: 0;
}
html[dir="rtl"] .lang-menu { right: auto; left: 0; transform-origin: top left; }
.lang-switcher[data-open="true"] .lang-menu {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lang-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: .6rem;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
  text-align: start;
}
.lang-item:hover { background: var(--color-bg-soft); }
.lang-item[aria-current="true"] {
  background: var(--color-bg-soft);
  color: var(--color-brand);
  font-weight: 500;
}
.lang-item .flag { font-size: 1.1rem; line-height: 1; }
.lang-item .native { flex: 1; }
.lang-item .english {
  font-size: .75rem;
  color: var(--color-muted);
}

/* --- Section banner ----------------------------------------------- */
.section-banner {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.section-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,22,15,.45) 0%, rgba(8,22,15,.75) 100%),
    linear-gradient(90deg, rgba(8,22,15,.35) 0%, rgba(8,22,15,0) 60%);
}
.section-banner > * { position: relative; z-index: 1; }

/* Extra legibility for hero text on banner backgrounds */
.section-banner h1,
.section-banner h2,
.section-banner p {
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
}

/* --- Gallery masonry ---------------------------------------------- */
.masonry {
  column-gap: 1rem;
}
@media (min-width: 640px) { .masonry { columns: 2 1rem; } }
@media (min-width: 1024px) { .masonry { columns: 3 1rem; } }
.masonry > figure {
  break-inside: avoid;
  margin: 0 0 1rem;
  border-radius: .75rem;
  overflow: hidden;
  background: var(--color-bg-deep);
}
.masonry img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .8s ease;
}
.masonry figure:hover img { transform: scale(1.04); }

/* --- Misc ---------------------------------------------------------- */
.underline-accent {
  background-image: linear-gradient(transparent 65%, color-mix(in srgb, var(--color-accent) 35%, transparent) 65%);
}

hr.rule {
  border: 0;
  height: 1px;
  background: var(--color-line);
  margin: 3rem 0;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}