@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700&display=swap');

.home {
  background-image: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExa3JpcTk2cXZkOXVjczc2a285eHgwemN5aDdsZzFlcWI1djR0Z3BueSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/OkgbLUvCEdU8ulvWXo/giphy.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

:root {
  --app-max-width: 800px;
  --red-primary: #b22222;
  --red-deep: #8b0000;
  --gold: #cfa24a;
  --gold-light: #e6c36b;
  --ink: #2b2b2b;
  --paper: #fbf7ef;
  --accent: #9b1c1c;
  --border-gold: #d4b46a;
}

html,
body {
  height: 100%;
}

body {
  background:
    radial-gradient(1200px 400px at 10% 0%, #fff2d9 0%, #fbf7ef 45%, #f8f0df 85%, #f6ebd3 100%),
    url('https://images.unsplash.com/photo-1526318472351-c75fd2b56b48?auto=format&fit=crop&w=1800&q=60') center/cover no-repeat fixed;
  background-blend-mode: multiply;
  color: var(--ink);
  font-family: 'Noto Serif SC', system-ui, -apple-system, 'PingFang SC', 'Heiti SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Serif SC', serif;
}


.home::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 248, 235, 0.88);
  pointer-events: none;
  z-index: -1;
}

/* Navbar */
.navbar {
  backdrop-filter: saturate(1.2);
}

.navbar-light.bg-body-tertiary {
  background-color: var(--red-primary) !important;
}

.navbar,
.navbar * {
  color: #faead0;
}

.navbar .navbar-brand {
  color: var(--gold-light);
  letter-spacing: 0.5px;
  font-weight: 700;
}

.navbar .navbar-brand:hover {
  color: #fff;
}

.navbar .nav-link {
  color: #faead0;
}

.navbar .nav-link:hover {
  color: #ffffff;
  text-decoration: none;
}

.navbar .border-bottom {
  border-bottom: 2px solid var(--gold) !important;
}

.navbar .btn.btn-outline-success {
  border-color: var(--gold);
  color: var(--gold);
}

.navbar .btn.btn-outline-success:hover {
  background-color: var(--gold);
  color: var(--red-deep);
}

.navbar .form-control {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.navbar .form-control::placeholder {
  color: #f8e9c9;
}


.navbar-light .navbar-toggler {
  border: 1px solid var(--gold);
}

.navbar-light .navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg);
  filter: invert(1) brightness(1.2);
}

/* main container width */
main.container {
  max-width: var(--app-max-width);
}

/* card */
.card {
  background: linear-gradient(180deg, #fffdf6 0%, #fff9ee 100%);
  border: 2px solid var(--border-gold);
  box-shadow:
    0 10px 24px rgba(139, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  position: relative;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  background:
    radial-gradient(10px 10px at 12px 12px, var(--gold) 40%, transparent 41%),
    radial-gradient(10px 10px at 24px 24px, var(--gold) 40%, transparent 41%);
  opacity: 0.75;
}

.card::before {
  top: -8px;
  left: -8px;
}

.card::after {
  bottom: -8px;
  right: -8px;
}

.card .card-body {
  padding: 1.75rem;
  background-image:
    radial-gradient(120px 60px at 100% 0%, rgba(207, 162, 74, 0.08), transparent 60%),
    radial-gradient(120px 60px at 0% 100%, rgba(207, 162, 74, 0.08), transparent 60%);
}

/* H & D */
.h4,
h1,
h2,
h3 {
  color: var(--red-deep);
}

.section-divider {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 0.75rem 0 1rem;
}

/* form style */
.form-label {
  color: var(--red-deep);
  font-weight: 600;
}

.form-control {
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-control:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 0.2rem rgba(207, 162, 74, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* result area */
[data-result] {
  min-height: 3rem;
  border: 2px dashed var(--border-gold) !important;
  background: #fffaf0;
  color: var(--ink);
}


.title-ornament {
  display: inline-block;
  position: relative;
  padding: 0.25rem 0.75rem;
  color: var(--red-deep);
  border: 2px solid var(--border-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffef6 0%, #fff7e6 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.title-ornament::before,
.title-ornament::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-gold);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gold-light);
}

.title-ornament::before {
  left: -14px;
}

.title-ornament::after {
  right: -14px;
}

/* Fullscreen canvas for confetti */
#confettiCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  /* above content, below modals if needed */
}