/*
Theme Name: Doua Bado
Theme URI: https://github.com/avrelyco-ai/moviepicker
Author: Doua Bado
Description: Custom WordPress theme replicating the Doua Bado luxury headwear drop site (originally built with Lovable/React). Editorial typography, scroll-driven hero, marquees, a slide-out cart and two seeded products (Washed Blue Cap, Washed Black Cap).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: doua-bado
*/

/* ---------- Design tokens (ported from src/styles.css) ---------- */
:root {
  --ink: #1c1c20;
  --bone: #f4f2ee;
  --wash: #6f8bc4;
  --stone: #c7c4bd;
  --silver: #dadade;

  --background: var(--bone);
  --foreground: var(--ink);
  --card: #ffffff;
  --secondary: #ececea;
  --muted: #ececea;
  --muted-foreground: #6f6f76;
  --border: #dedbd4;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

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

.bg-hero,
.bg-bone { background-color: var(--bone); }
.bg-ink { background-color: var(--ink); color: var(--bone); }
.bg-secondary { background-color: var(--secondary); }
.bg-background { background-color: var(--background); }
.text-ink { color: var(--ink); }
.text-bone { color: var(--bone); }
.text-wash { color: var(--wash); }
.text-muted { color: var(--muted-foreground); }

.container {
  max-width: 1600px;
  margin: 0 auto;
}

.px-section { padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px) {
  .px-section { padding-left: 40px; padding-right: 40px; }
}

/* ---------- Utilities ported from @utility rules ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.625rem;
  font-weight: 500;
}

.hairline {
  border-top: 1px solid rgba(28, 28, 32, 0.14);
}

.btn-ink,
.btn-bone,
.btn-outline-ink {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 1.15rem 2rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.35s ease;
}

.btn-ink {
  background: var(--ink);
  color: var(--bone);
}
.btn-ink:hover {
  transform: translateY(-2px);
  background: #2a3a58;
}

.btn-bone {
  background: var(--bone);
  color: var(--ink);
}
.btn-bone:hover {
  transform: translateY(-2px);
}

.btn-outline-ink {
  border: 1px solid rgba(28, 28, 32, 0.3);
  color: var(--ink);
}
.btn-outline-ink:hover {
  background: var(--ink);
  color: var(--bone);
}

.btn-ink:disabled,
.btn-outline-ink:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.w-full { width: 100%; }
.justify-center { justify-content: center; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-in {
  opacity: 1;
  transform: none;
}

.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: radial-gradient(rgba(28, 28, 32, 0.4) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

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

.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 0; background: var(--background); color: var(--foreground); }
.marquee.dark { border-color: rgba(244, 242, 238, 0.15); background: var(--ink); color: var(--bone); }
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-x 32s linear infinite;
  will-change: transform;
}
.marquee-group { display: flex; flex-shrink: 0; align-items: center; }
.marquee-item { font-family: var(--font-display); text-transform: uppercase; display: flex; align-items: center; font-size: 1.875rem; line-height: 0.82; }
@media (min-width: 768px) { .marquee-item { font-size: 3rem; } }
.marquee-item span.label { padding: 0 24px; }
.marquee-item span.dash { color: var(--wash); padding: 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* Product angle "film cut" */
@keyframes cut-in {
  from { transform: scale(1.04); filter: blur(9px); opacity: 0.55; }
  to { transform: scale(1); filter: blur(0); opacity: 1; }
}
.cut-in { animation: cut-in 230ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.cut-out {
  transform: scale(0.96);
  filter: blur(7px);
  opacity: 0.6;
  transition: transform 130ms cubic-bezier(0.4, 0, 1, 1), filter 130ms linear, opacity 130ms linear;
}

/* Hero entrance */
@keyframes type-rise { from { transform: translateY(14%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes cap-settle { from { transform: scale(1.08); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes soft-fade { from { opacity: 0; } to { opacity: 1; } }
.enter-type { animation: type-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.enter-cap { animation: cap-settle 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
.enter-nav { animation: soft-fade 700ms ease-out 620ms both; }
.enter-meta { animation: soft-fade 800ms ease-out 800ms both; }

@media (prefers-reduced-motion: reduce) {
  .cut-in, .enter-type, .enter-cap, .enter-nav, .enter-meta { animation: none; }
  .cut-out { transition: none; filter: none; transform: none; }
}

/* ---------- Layout ---------- */
@import url("assets/css/nav.css");
@import url("assets/css/home.css");
@import url("assets/css/pages.css");
@import url("assets/css/product.css");
@import url("assets/css/cart.css");