/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- Language-specific typefaces ---------- */
[lang="ar"] {
  font-family: 'Cairo', system-ui, sans-serif;
}
[lang="ar"] .font-serif {
  font-family: 'Amiri', serif;
}
[lang="he"] {
  font-family: 'Assistant', system-ui, sans-serif;
}
[lang="he"] .font-serif {
  font-family: 'Frank Ruhl Libre', serif;
}

/* Arabic/Hebrew serif italics render oddly on non-Latin glyphs; drop the italic slant, keep the color/weight */
[lang="ar"] .italic,
[lang="he"] .italic {
  font-style: normal;
}

/* ---------- Mobile viewport height fix ---------- */
#hero {
  min-height: 100svh;
}

body {
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: #d4a72f;
  color: #22080c;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #faf6ef;
}
::-webkit-scrollbar-thumb {
  background: #a83f4c;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7a1f2b;
}

/* ---------- Film-grain overlay ---------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  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.85" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-bounce-slow,
  .animate-drift {
    animation: none !important;
  }
}

/* ---------- Decorative motion ---------- */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.animate-bounce-slow {
  animation: bounce-slow 2.6s ease-in-out infinite;
}

@keyframes drift {
  0% { background-position: 0 0; }
  100% { background-position: 120px 60px; }
}

/* ---------- Nav underline hover ---------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background-color: #d4a72f;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  right: 0;
}

/* ---------- Corner ticks for product/label cards ---------- */
.label-frame {
  position: relative;
}
.label-frame::before,
.label-frame::after,
.label-frame > .tick-br,
.label-frame > .tick-bl {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: #b8892a;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
.label-frame::before {
  top: 5px;
  left: 5px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}
.label-frame::after {
  top: 5px;
  right: 5px;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
}
.label-frame .tick-bl {
  bottom: 5px;
  left: 5px;
  border-bottom: 1.5px solid;
  border-left: 1.5px solid;
}
.label-frame .tick-br {
  bottom: 5px;
  right: 5px;
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
}
.label-frame:hover::before,
.label-frame:hover::after,
.label-frame:hover .tick-bl,
.label-frame:hover .tick-br {
  opacity: 1;
}

@media (min-width: 640px) {
  .label-frame::before,
  .label-frame::after,
  .label-frame > .tick-br,
  .label-frame > .tick-bl {
    width: 14px;
    height: 14px;
  }
  .label-frame::before { top: 8px; left: 8px; }
  .label-frame::after { top: 8px; right: 8px; }
  .label-frame .tick-bl { bottom: 8px; left: 8px; }
  .label-frame .tick-br { bottom: 8px; right: 8px; }
}

/* ---------- Hamburger ---------- */
.burger-bar {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  transform-origin: center;
}
.burger-open .burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger-open .burger-bar:nth-child(2) {
  opacity: 0;
}
.burger-open .burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Native dialog reset ---------- */
dialog#lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(90vw, 32rem);
}
dialog#lightbox::backdrop {
  background: rgba(34, 8, 12, 0.82);
  backdrop-filter: blur(3px);
}
dialog#lightbox[open] {
  animation: lightbox-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Focus visibility (never remove outright) */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #d4a72f;
  border-radius: 2px;
}