/* Tryovi — Vibrant Fashion Kiosk
   ============================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --ink: #0A0A0A;
  --ink-2: #1a1a1a;
  --cream: #F7F2EA;
  --cream-2: #EDE6D8;
  --paper: #FFFFFF;

  /* Vibrant accents */
  --coral: #FF3D6E;
  --coral-deep: #E11D48;
  --acid: #E8FF4A;
  --cobalt: #2540FF;
  --plum: #7A1F8C;
  --terracotta: #D4502A;

  /* Type */
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Bricolage Grotesque', 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #1a1a1a;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kiosk frame -- vertical 9:16, 1080x1920 base */
.kiosk {
  --kw: 1080px;
  --kh: 1920px;
  width: var(--kw);
  height: var(--kh);
  position: relative;
  overflow: hidden;
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  flex-shrink: 0;
}

/* Type primitives */
.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
.display-italic {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 18px;
}
.mono {
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 48px;
  border-radius: 999px;
  border: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 120ms ease, background 200ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover { background: var(--coral); }
.btn-coral { background: var(--coral); color: white; }
.btn-acid { background: var(--acid); color: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn:active { transform: scale(0.97); }

/* Status bar */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  z-index: 10;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.55;
  pointer-events: none;
}
.status-bar.dark { color: var(--cream); }

/* Logo */
.logo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.logo-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  margin-left: 4px;
  vertical-align: middle;
  margin-bottom: 6px;
}

/* Animations */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse-ring {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawIn {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

.fade-up { animation: fadeUp 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.float { animation: float 3s ease-in-out infinite; }

/* Scrollbars off in kiosk regions */
.kiosk *::-webkit-scrollbar { display: none; }
.kiosk * { scrollbar-width: none; }

/* Marquee strip */
.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee > * { padding-right: 64px; }

/* Idle attract pose silhouette */
.silhouette {
  fill: var(--ink);
  opacity: 0.08;
}

/* Garment card hover */
.garment-card {
  cursor: pointer;
  transition: transform 200ms ease;
}
.garment-card:hover { transform: translateY(-6px); }

/* QR code grid pattern */
.qr {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(21, 1fr);
  gap: 0;
  width: 280px;
  height: 280px;
  background: white;
  padding: 16px;
  border-radius: 12px;
}
.qr div { background: var(--ink); }
.qr div.off { background: white; }

/* Camera viewfinder corner brackets */
.bracket {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 4px solid var(--acid);
}
.bracket.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket.br { bottom: 0; right: 0; border-left: none; border-top: none; }