/* ------------------------------------------------------------------
   Ember & Oak — small bit of hand-written CSS.
   Everything layout/colour related lives in Tailwind utility classes.
------------------------------------------------------------------ */

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

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

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

/* Fine paper grain across the whole site */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: #F6DCCC;
  color: #1A1613;
}

/* Custom scrollbar (desktop) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #F4EDE2; }
  ::-webkit-scrollbar-thumb { background: #DCCBB2; border-radius: 999px; border: 2px solid #F4EDE2; }
  ::-webkit-scrollbar-thumb:hover { background: #C2542B; }
}

/* Header: transparent at the top, frosted once scrolled */
[data-header] {
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
[data-header].is-scrolled {
  background-color: rgba(251, 247, 240, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: rgba(26, 22, 19, 0.08);
}
[data-header] .header-inner {
  transition: height 0.35s ease;
}
[data-header].is-scrolled .header-inner {
  height: 4.25rem;
}

/* Animated underline on nav links */
[data-nav] {
  position: relative;
}
[data-nav]::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.45rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-nav]:hover::after,
[data-nav].is-active::after {
  transform: scaleX(1);
}
[data-nav].is-active {
  color: #A9451F;
}

/* Mobile drawer */
#mobile-menu:not(.hidden) {
  animation: menu-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Marquee strip */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.float-badge { animation: float-slow 7s ease-in-out infinite; }
.spin-slow  { animation: spin-slow 22s linear infinite; }

/* Menu filter chips — keep the border in sync with the pressed state */
[data-filter][aria-pressed="true"]  { border-color: #1A1613; }
[data-filter][aria-pressed="false"] { border-color: rgba(26, 22, 19, 0.15); }

/* Hide scrollbar on horizontal chip rows */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Utility: clamp text to n lines */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Address / serif numeral styling */
.font-display {
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .float-badge, .spin-slow { animation: none !important; }
}