/* ============================================================
   Viet Mini — CSS
   Nostalgic Vietnamese Isometric Diorama Showcase
   ============================================================ */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ink: #2b2b2b;
  --ink-light: #4a4a4a;
  --cozy-red: #c8202b;
  --cozy-yellow: #f2d544;
  --sv-red: #da251d;
  --sv-yellow: #ebd561;
  --sv-green: #6e8c45;
  --ot-blue: #a5d4d9;
  --da-blue: #1e3b75;
  --da-gold: #e6c35c;
  --hh-pink: #d96c78;
  --hh-purple: #7b5ea7;
  --w-green: #3db571;
  --th-red: #c8202b;
  --shadow-block: #2b2b2b;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;

  /* ========== LAYERED VIETNAMESE STREET BACKGROUND ========== */
  background-color: #e8dcc8;
  background-image:
    /* Layer 1: Repeating Dong Son drum pattern overlay */
    url("bg-pattern.svg"),
    /* Layer 2: Full Vietnamese street scene */
    url("bg-street.svg"),
    /* Layer 3: Sidewalk tile grid */
    linear-gradient(90deg, transparent 0%, transparent 47px, rgba(43,43,43,0.06) 47px, rgba(43,43,43,0.06) 48px),
    linear-gradient(0deg, transparent 0%, transparent 23px, rgba(43,43,43,0.06) 23px, rgba(43,43,43,0.06) 24px);

  background-size:
    120px 120px,
    800px 1200px,
    48px 24px,
    48px 24px;

  background-repeat:
    repeat,
    no-repeat,
    repeat,
    repeat;

  background-position:
    0 0,
    center top,
    0 0,
    0 0;

  background-attachment:
    fixed,
    fixed,
    scroll,
    scroll;
}

/* ---------- Top awning stripe bar ---------- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    var(--cozy-red) 0px,
    var(--cozy-red) 20px,
    var(--cozy-yellow) 20px,
    var(--cozy-yellow) 40px,
    var(--sv-red) 40px,
    var(--sv-red) 60px,
    var(--cozy-yellow) 60px,
    var(--cozy-yellow) 80px
  );
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ---------- String lights wire ---------- */
body::after {
  content: "";
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 49;
  pointer-events: none;
  background:
    /* Wire */
    linear-gradient(180deg, transparent 12px, rgba(43,43,43,0.18) 12px, rgba(43,43,43,0.18) 14px, transparent 14px),
    /* Yellow bulbs */
    radial-gradient(circle 4px at 15% 14px, rgba(242,213,68,0.45) 0%, transparent 70%),
    radial-gradient(circle 4px at 55% 16px, rgba(242,213,68,0.45) 0%, transparent 70%),
    radial-gradient(circle 4px at 95% 14px, rgba(242,213,68,0.45) 0%, transparent 70%),
    /* Red bulbs */
    radial-gradient(circle 4px at 35% 15px, rgba(200,32,43,0.4) 0%, transparent 70%),
    radial-gradient(circle 4px at 75% 17px, rgba(200,32,43,0.4) 0%, transparent 70%);
}

/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
  text-align: center;
  padding: 3.5rem 1.5rem 2.5rem;
  background:
    linear-gradient(160deg, #d4202b 0%, var(--cozy-red) 40%, #a01822 100%);
  border-bottom: 5px solid var(--ink);
  position: relative;
  margin-top: 14px;
  box-shadow:
    -4px 8px 0 rgba(43,43,43,0.35),
    0 12px 30px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* Decorative corner stars */
.site-header::before {
  content: "★ Viet Mini ★";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "VT323", monospace;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.15);
  letter-spacing: 0.3em;
  pointer-events: none;
}

/* Awning scallop underneath header */
.site-header::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: repeating-conic-gradient(
    var(--cozy-yellow) 0% 25%,
    transparent 0% 50%
  ) 0 0 / 24px 16px;
  z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

.header-inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Decorative horizontal rule inside header */
.header-inner::before {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  margin: 0.8rem auto 1.2rem;
  background: repeating-linear-gradient(
    90deg,
    var(--cozy-yellow) 0px,
    var(--cozy-yellow) 8px,
    transparent 8px,
    transparent 14px
  );
  border-radius: 2px;
}

.site-title {
  font-family: "VT323", monospace;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: #fff;
  text-shadow:
    3px 3px 0 var(--ink),
    -1px -1px 0 rgba(0,0,0,0.1),
    0 0 20px rgba(242,213,68,0.2);
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.title-icon {
  font-style: normal;
  display: inline-block;
  animation: title-bounce 3s ease-in-out infinite;
}

@keyframes title-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.site-subtitle {
  font-family: "Caveat", cursive;
  font-size: 1.6rem;
  color: var(--cozy-yellow);
  margin-top: 0.4rem;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 var(--ink), 0 0 10px rgba(242,213,68,0.15);
}

.site-desc {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================
   SHOWCASE / GRID
   ========================================================== */
.showcase {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  position: relative;
}

/* Decorative sidewalk curb before grid */
.showcase::before {
  content: "";
  display: block;
  height: 8px;
  margin-bottom: 2.5rem;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(43,43,43,0.12) 0px,
      rgba(43,43,43,0.12) 20px,
      transparent 20px,
      transparent 26px
    ),
    linear-gradient(180deg, #c8bca8 0%, #b8ac98 100%);
  border: 2px solid rgba(43,43,43,0.15);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  justify-items: center;
}

/* ==========================================================
   DIORAMA CARDS
   ========================================================== */
.diorama-card {
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  outline: none;
  padding: 1.2rem;
  background:
    linear-gradient(
      145deg,
      rgba(255,250,240,0.75) 0%,
      rgba(245,239,227,0.55) 50%,
      rgba(237,228,211,0.45) 100%
    );
  border: 3px dashed rgba(43,43,43,0.1);
  border-radius: 16px;
  position: relative;
}

/* Small "sidewalk tile" decorative dots */
.diorama-card::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(43,43,43,0.08) 0px,
    rgba(43,43,43,0.08) 8px,
    transparent 8px,
    transparent 14px
  );
  border-radius: 2px;
  pointer-events: none;
}

.diorama-card:hover,
.diorama-card:focus-visible {
  transform: translateY(-10px) scale(1.025);
  border-color: rgba(43,43,43,0.2);
  background:
    linear-gradient(
      145deg,
      rgba(255,250,240,0.9) 0%,
      rgba(245,239,227,0.7) 50%,
      rgba(237,228,211,0.6) 100%
    );
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.diorama-card:focus-visible {
  box-shadow:
    0 0 0 4px var(--cozy-yellow),
    0 12px 30px rgba(0,0,0,0.12);
}

.card-scene {
  perspective: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
}

/* Diorama image */
.diorama-img {
  max-width: 100%;
  height: auto;
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow:
    -6px 6px 0 var(--shadow-block),
    0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* Isometric tilt on hover */
.diorama-card:hover .diorama-img {
  transform: rotateX(6deg) rotateY(-10deg) scale(1.05);
  box-shadow:
    -12px 12px 0 var(--shadow-block),
    0 8px 20px rgba(0,0,0,0.15);
}

/* ==========================================================
   CARD INFO
   ========================================================== */
.card-info {
  text-align: center;
  margin-top: 1rem;
}

.card-name {
  font-family: "VT323", monospace;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0.03em;
}

.card-desc {
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: var(--ink-light);
  margin-top: 0.15rem;
}

.card-tag {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: "VT323", monospace;
  background: var(--cozy-yellow);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: -2px 2px 0 var(--shadow-block);
  letter-spacing: 0.03em;
}

/* ==========================================================
   MODAL
   ========================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background:
    linear-gradient(
      160deg,
      #f5efe3 0%,
      #ede4d3 100%
    );
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow:
    -12px 12px 0 var(--shadow-block),
    0 16px 40px rgba(0,0,0,0.2);
  max-width: 560px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  transform: scale(0.88) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

/* Modal awning decoration */
.modal::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -4px;
  right: -4px;
  height: 12px;
  background: repeating-conic-gradient(
    var(--cozy-yellow) 0% 25%,
    var(--cozy-red) 0% 50%
  ) 0 0 / 20px 12px;
  border-radius: 4px 4px 0 0;
  border: 3px solid var(--ink);
  border-bottom: none;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.6rem;
  background: var(--cozy-red);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: sans-serif;
  box-shadow: -2px 3px 0 var(--shadow-block);
  z-index: 2;
}

.modal-close:hover {
  transform: scale(1.15) rotate(10deg);
  box-shadow: -3px 4px 0 var(--shadow-block);
}

.modal-header {
  margin-bottom: 1.2rem;
  padding-right: 2rem;
}

.modal-title {
  font-family: "VT323", monospace;
  font-size: 1.7rem;
  line-height: 1.3;
}

/* Decorative divider under modal title */
.modal-header::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin-top: 0.5rem;
  background: repeating-linear-gradient(
    90deg,
    var(--cozy-yellow) 0px,
    var(--cozy-yellow) 6px,
    transparent 6px,
    transparent 12px
  );
  border-radius: 2px;
}

.modal-body {
  font-size: 0.95rem;
  line-height: 1.8;
}

.modal-body .theme-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.modal-body .color-swatch {
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: -2px 2px 0 var(--shadow-block);
  transition: transform 0.2s ease;
}

.modal-body .color-swatch:hover {
  transform: scale(1.15);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  margin-top: 3rem;
  position: relative;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(43,43,43,0.06) 0px,
      rgba(43,43,43,0.06) 20px,
      transparent 20px,
      transparent 26px
    ),
    linear-gradient(180deg, #d4c8b4 0%, #c0b4a0 100%);
  border-top: 5px solid var(--ink);
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  line-height: 1.7;
}

/* Drainage grate */
.site-footer::before {
  content: "";
  display: block;
  width: 70px;
  height: 10px;
  margin: 0 auto 1.2rem;
  background: repeating-linear-gradient(
    90deg,
    rgba(43,43,43,0.35) 0px,
    rgba(43,43,43,0.35) 4px,
    transparent 4px,
    transparent 9px
  );
  border: 2px solid rgba(43,43,43,0.25);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Sidewalk curb at bottom */
.site-footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #b0a898 0px,
    #b0a898 30px,
    #a09888 30px,
    #a09888 60px
  );
  border-top: 2px solid rgba(43,43,43,0.15);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
  .site-header {
    padding: 2.5rem 1rem 2rem;
  }

  .site-title {
    font-size: 1.8rem;
  }

  .site-subtitle {
    font-size: 1.3rem;
  }

  .showcase {
    padding: 2.5rem 1rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .diorama-card {
    max-width: 100%;
  }

  .modal {
    padding: 1.8rem;
  }
}

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.diorama-card:hover .diorama-img {
  animation: float 2.5s ease-in-out infinite;
}

/* Entrance animation for cards */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.diorama-card {
  animation: card-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Stagger each card */
.diorama-card:nth-child(1) { animation-delay: 0.05s; }
.diorama-card:nth-child(2) { animation-delay: 0.12s; }
.diorama-card:nth-child(3) { animation-delay: 0.19s; }
.diorama-card:nth-child(4) { animation-delay: 0.26s; }
.diorama-card:nth-child(5) { animation-delay: 0.33s; }
.diorama-card:nth-child(6) { animation-delay: 0.40s; }
.diorama-card:nth-child(7) { animation-delay: 0.47s; }

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .diorama-card:hover .diorama-img {
    animation: none;
  }

  .diorama-card {
    animation: none;
  }

  .modal-overlay .modal,
  .modal-overlay {
    transition: none;
  }

  .title-icon {
    animation: none;
  }
}