/* ─────────────────────────────────────────────────────────
   the BURGER by Havakand — brand tokens
   Source: PDF brand strategy (FCB ARTGROUP, 2025)
   ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --rojo: #DA0505;
  --rojo-deep: #B40404;
  --seasalt: #FAFAFA;
  --black: #0A0505;
  --black-soft: #1A1313;
  --grain: #ECE7E0;

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

.tb-display {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}

.tb-body {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.tb-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* striped placeholder for not-yet-shot photography */
.tb-placeholder {
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.05) 0 1px,
      transparent 1px 14px),
    var(--grain);
  position: relative;
  overflow: hidden;
}
.tb-placeholder[data-dark="true"] {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.06) 0 1px,
      transparent 1px 14px),
    #1a1414;
  color: rgba(255,255,255,0.55);
}
.tb-placeholder::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  text-align: center;
  padding: 6px;
}
.tb-placeholder[data-dark="true"]::after { color: rgba(255,255,255,0.45); }

/* burger mark — abstract logo glyph (top dome bun + filling slot) */
.tb-mark {
  display: inline-flex;
  flex-shrink: 0;
}

/* ─── animation utilities ─── */
@keyframes tb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-1.5deg); }
}
@keyframes tb-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}
@keyframes tb-spin-y {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes tb-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes tb-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes tb-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes tb-haqiqiy-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-bun-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes tb-bun-sway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-4px); }
}
@keyframes tb-orbit {
  from { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}