/* Halloween decoration — minimal, added on top of the normal site.
   To turn it off: remove the <link ... halloween.css> line in index.html and
   in each collection page (the-noir, the-swan, the-romance), or delete this file. Nothing else in the site depends on it. */

/* Thin greeting strip above the header */
body::before {
  content: "Happy Halloween จาก NattInvites";
  display: block; padding: 7px 16px;
  background: #1d1612; color: #f2a254;
  font: 500 0.82rem/1.4 var(--font); text-align: center; letter-spacing: 0.01em;
}

/* Small pumpkin after the hero kicker */
.hero .kicker::after, .col-hero .kicker::after {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-left: 0.35em; vertical-align: -0.14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 8c0-3 1-5 4-6' fill='none' stroke='%23556b3a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='19' rx='13' ry='10' fill='%23e8792b'/%3E%3Cpath d='M16 9.5c-3 2-3 17 0 19M16 9.5c3 2 3 17 0 19M9 11c-3 3-3 13 0 16M23 11c3 3 3 13 0 16' fill='none' stroke='%23c9531c' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Three little bats around the headline */
.hero, .col-hero { position: relative; }
.hero::before, .hero::after, .col-hero::before, .col-hero::after {
  content: ""; position: absolute; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%233c2b23' d='M32 10c2-4 5-5 6-3 3-4 9-6 13-4-2 1-3 4-2 6 4-2 9-1 15 3-6 0-9 3-10 7-3-3-7-4-11-2 0-3-3-5-6-4-2 1-3 3-5 5-2-2-3-4-5-5-3-1-6 1-6 4-4-2-8-1-11 2-1-4-4-7-10-7 6-4 11-5 15-3 1-2 0-5-2-6 4-2 10 0 13 4 1-2 4-1 6 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.55; animation: hw-float 5s ease-in-out infinite;
}
.hero::before, .col-hero::before { top: clamp(40px, 7vw, 84px); left: max(6%, calc(50% - 470px)); width: 54px; height: 24px; }
.hero::after, .col-hero::after { top: clamp(90px, 12vw, 150px); right: max(7%, calc(50% - 460px)); width: 40px; height: 18px; animation-delay: 1.6s; }
.hero .hero-text { position: relative; }
.hero .hero-text::after {
  content: ""; position: absolute; top: 46%; right: max(4%, calc(50% - 420px)); width: 28px; height: 13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%233c2b23' d='M32 10c2-4 5-5 6-3 3-4 9-6 13-4-2 1-3 4-2 6 4-2 9-1 15 3-6 0-9 3-10 7-3-3-7-4-11-2 0-3-3-5-6-4-2 1-3 3-5 5-2-2-3-4-5-5-3-1-6 1-6 4-4-2-8-1-11 2-1-4-4-7-10-7 6-4 11-5 15-3 1-2 0-5-2-6 4-2 10 0 13 4 1-2 4-1 6 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.4; animation: hw-float 6s ease-in-out infinite 0.8s;
}
@keyframes hw-float { 50% { transform: translateY(-8px) rotate(-4deg); } }

@media (max-width: 760px) {
  .hero::before, .col-hero::before { left: 4%; width: 40px; height: 18px; }
  .hero::after, .col-hero::after { right: 5%; width: 30px; height: 14px; }
  .hero .hero-text::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .col-hero::before, .col-hero::after, .hero .hero-text::after { animation: none; }
}