/* ====== Reset ringan & layout dasar ====== */
html, body { overflow-x: hidden; }

main { position: relative; z-index: 10; } /* konten */

/* Background ikut tema admin */
body{
  background:
    radial-gradient(
      1200px 600px at 50% -10%,
      var(--brand-700, #7c1c28) 0%,
      transparent 60%
    ),
    linear-gradient(180deg,
      var(--brand, #8d1e2c),
      var(--brand-800, #6e1423)
    );
  overscroll-behavior-y: none;
}

/* ====== Pattern SVG layar penuh ====== */
.xmas-pattern{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 15;               /* sebelumnya ‘20’… nice try */
  mix-blend-mode: soft-light; /* nyatu sama background */
}

/* ====== Salju ====== */
.flake{
  position: fixed;
  top: -10px;
  width: 10px; height: 10px;
  z-index: 2; /* di depan pattern, di belakang konten */
  background: radial-gradient(circle, var(--cream, #fff) 0 45%, transparent 46%);
  opacity: 0.75;
  border-radius: 9999px;
  pointer-events: none;
  animation: fall var(--t, 16s) linear infinite;
  will-change: transform, opacity;
}
@keyframes fall{
  to{
    transform: translateY(110vh) translateX(calc(var(--sx, 30px)));
    opacity: 0.95;
  }
}

/* ====== Pohon samping: anchor pojok bawah ====== */
.pine{
  position: fixed;
  bottom: 0;
  z-index: 1; /* di atas pattern, di bawah salju & konten */
  width: clamp(260px, 28vw, 520px);
  height: auto;
  transform-origin: bottom center;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
  opacity: 0.95;
  pointer-events: none;
}
.pine-left{ left: max(-8vw, -72px); transform: translateY(6px); }
.pine-right{ right: max(-8vw, -72px); transform: scaleX(-1) translateY(6px); }

@media (min-width: 1536px){
  .pine{ width: clamp(320px, 30vw, 640px); }
}

/* ====== Dekor bawah section ====== */
.decor-below{
  position: relative;
  height: 180px;
  margin-top: -6px;
  pointer-events: none;
  z-index: 0;
}
.decor-below .cluster{
  position: absolute;
  bottom: 0;
  width: min(46vw, 680px);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));
}
.decor-below .left{ left: -70px; }
.decor-below .right{ right: -70px; transform: scaleX(-1); }

.snowplate{
  position: absolute;
  left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: min(560px, 72%); height: 26px;
  background: radial-gradient(
    120% 100% at 50% 30%,
    color-mix(in srgb, var(--cream, #fff) 95%, transparent) 0%,
    color-mix(in srgb, var(--cream, #fff) 20%, transparent) 70%
  );
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  opacity: 0.95;
}

/* ====== Blob hijau (WARISAN). Dikawinkan ke palet tema biar gak tabrak lari) ====== */
.blob{
  position: fixed; z-index: -1;
  width: 34vmin; height: 34vmin;
  opacity: 0.9;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.35));
  /* gunakan pine + campuran brand supaya masih “natal”, tapi tetap tematik */
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--pine, #165b36) 80%, var(--brand, #8d1e2c) 20%) 0 55%,
      transparent 56%),
    radial-gradient(circle at 65% 70%,
      color-mix(in srgb, var(--pine, #165b36) 60%, black 40%) 0 55%,
      transparent 56%),
    radial-gradient(120% 60% at 50% 100%,
      color-mix(in srgb, var(--pine, #165b36) 75%, white 25%) 0 60%,
      transparent 61%);
  border-radius: 28% 72% 68% 32%/40% 30% 70% 60%;
  transform-origin: center;
  will-change: transform, filter, opacity;
}

/* ====== Tombol submit dengan efek sweep ====== */
#submitBtn{ position: relative; overflow: hidden; }
#submitBtn::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 80%
  );
  transform: translateX(-140%) skewX(-20deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
#submitBtn:hover::after,
#submitBtn:focus-visible::after{
  transform: translateX(140%) skewX(-20deg);
}

/* Spinner ikut tema */
#submitBtn .btn-spinner{
  display: none;
  width: 1.1em; height: 1.1em;
  margin-left: .6rem; vertical-align: -2px;
  border: 2px solid color-mix(in srgb, var(--brand, #8d1e2c) 25%, white 75%);
  border-top-color: var(--cream, #fff);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
#submitBtn.loading .btn-spinner{ display: inline-block; }
#submitBtn.loading::after{ opacity: 0; } /* matiin sweep pas loading */

@keyframes spin{ to{ transform: rotate(360deg); } }

/* ====== Prefer-reduced-motion ====== */
@media (prefers-reduced-motion: reduce){
  .flake{ animation: none !important; }
  .parallax{ transform: none !important; }
  .blob{ animation: none !important; }
  .btn-sweep .sweep{ transition: none; }
  .btn-sweep:hover .sweep{ transform: none; opacity: .15; }
}

/* ====== Responsif ====== */
@media (max-width: 1023px){
  .pine, .decor-below{ display: none; }
}