/* Wild Valencia — base styles. Mirrors the <style> block from the bold-adventure mockup.
   Tailwind handles utility classes; this file holds custom base + component styles. */

html { scroll-behavior: smooth; }
body { background: #0E1013; color: #F4EBD8; font-family: Inter, system-ui, sans-serif; }

.display { font-family: Archivo; font-weight: 800; letter-spacing: -0.02em; line-height: 0.92; text-transform: uppercase; }
.display-italic { font-style: italic; font-weight: 900; }
.narrow { font-family: "Archivo Narrow", Archivo, sans-serif; }
.mono { font-family: "JetBrains Mono", monospace; letter-spacing: 0; }

.label { font-family: "Archivo Narrow"; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #D06224; }

.btn { display: inline-flex; align-items: center; gap: 10px; background: #D06224; color: #0E1013; padding: 18px 28px; font-weight: 800; font-family: Archivo; letter-spacing: 0.02em; text-transform: uppercase; font-size: 14px; border: 0; position: relative; overflow: hidden; transition: background .3s; }
.btn:hover { background: #AF441E; }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #F4EBD8; padding: 18px 28px; font-weight: 800; font-family: Archivo; letter-spacing: 0.02em; text-transform: uppercase; font-size: 14px; border: 1px solid #2B323B; transition: all .3s; }
.btn-ghost:hover { border-color: #8B8635; color: #8B8635; }

/* --- Ghost button on cream/paper sections ---
   .btn-ghost default text is cream (#F4EBD8), which is invisible on
   .bg-paper / .text-ink sections. Override to dark text + dark border,
   terracota on hover. Catches all current and future cream-section CTAs. */
.text-ink .btn-ghost,
.bg-paper .btn-ghost { color: #0E1013; border-color: rgba(14,16,19,.35); }
.text-ink .btn-ghost:hover,
.bg-paper .btn-ghost:hover { color: #D06224; border-color: #D06224; }


.bracket { position: relative; }
.bracket::before, .bracket::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid #D06224; pointer-events: none; }
.bracket::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

.card { transition: transform .4s ease; }
.card:hover img { transform: scale(1.04); }
.card img { transition: transform .8s ease; }

.hairline { border-top: 1px solid #2B323B; }

.marquee { display: flex; gap: 80px; animation: wv-marquee 40s linear infinite; white-space: nowrap; }
@keyframes wv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.topo { position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: screen; }

/* --- Form fields (Teams brief, Shop order) --- */
.field { background: #16191E; border: 1px solid #2B323B; padding: 14px 18px; width: 100%; font-family: "JetBrains Mono", monospace; color: #F4EBD8; outline: none; transition: border-color .2s; }
.field:focus { border-color: #D06224; }

/* --- Filter chips (Shop, Field Notes) --- */
.chip { display: inline-flex; align-items: center; border: 1px solid #2B323B; padding: 9px 14px; font-family: "Archivo Narrow", Archivo, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: #A9B0B8; cursor: pointer; transition: all .2s; }
.chip:hover { border-color: #D06224; color: #D06224; }
.chip.on { background: #D06224; color: #0E1013; border-color: #D06224; }

/* --- Product gallery thumbnails --- */
.thumb { border: 1px solid #2B323B; cursor: pointer; transition: border-color .2s; }
.thumb:hover, .thumb.on { border-color: #D06224; }

/* --- Booking confirmation: ticket stamp + perforation + ticker --- */
.stamp { border: 2px dashed #D06224; position: relative; }
.perforated { background: repeating-linear-gradient(90deg,#2B323B 0,#2B323B 6px,transparent 6px,transparent 12px); height: 1px; }
.ticker { display: flex; gap: 48px; animation: wv-ticker 80s linear infinite; white-space: nowrap; }
@keyframes wv-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pulse { animation: wv-pulse 2s ease-in-out infinite; }
@keyframes wv-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Four-corner bracket variant */
.bracket-4 { position: relative; }
.bracket-4::before, .bracket-4::after,
.bracket-4 > span.b1, .bracket-4 > span.b2 { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid #D06224; pointer-events: none; z-index: 2; }
.bracket-4::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.bracket-4::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.bracket-4 > span.b1 { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.bracket-4 > span.b2 { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }