/* =====================================================================
   DAISY WEDDING — style.css
   Hanya berisi hal yang tidak bisa / tidak praktis dibuat dengan
   utility Tailwind. Semua nama class yang disentuh script.js
   (fade-out-cover, content-hidden, content-show, number-card,
   anim-out, anim-in) dipertahankan persis.
===================================================================== */

:root {
  --cream: #FBFAF4;
  --sage: #3E5A47;
  --sage-soft: #8FA98F;
  --mustard: #E3B23C;

  /* warna daisy (dipakai <symbol id="daisy">) */
  --petal: #FFFFFF;
  --petal-back: #F3F0DF;
  --petal-edge: #E3DDBF;
  --center: #E3B23C;
  --center-edge: #C99118;
  --center-dot: #A87408;
  --leaf: #8FA98F;
}

html { scrollbar-gutter: stable; }
/* ornamen daisy sengaja menjorok keluar layar; potong tanpa membuat scroll horizontal */
html, body { overflow-x: clip; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--sage-soft); border-radius: 4px; }

/* ---------- Background halaman: krem + pola daisy sangat tipis ---------- */
.bg-daisy-page {
  background-color: var(--cream);
  background-image:
    radial-gradient(60rem 36rem at 100% 0%, rgba(246, 227, 161, .45), transparent 60%),
    radial-gradient(48rem 30rem at 0% 45%, rgba(203, 218, 197, .50), transparent 62%),
    radial-gradient(52rem 32rem at 100% 100%, rgba(246, 227, 161, .35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%238FA98F' stroke-width='.8' opacity='.32'%3E%3Cg transform='translate(45 50) scale(1)'%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(0.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(45.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(90.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(135.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(180.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(225.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(270.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(315.00)'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3Cg transform='translate(135 135) scale(0.8)'%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(0.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(45.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(90.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(135.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(180.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(225.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(270.00)'/%3E%3Cellipse cx='0' cy='-9' rx='3.2' ry='7' transform='rotate(315.00)'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23E3B23C' opacity='.3'%3E%3Ccircle cx='45' cy='50' r='1.6'/%3E%3Ccircle cx='135' cy='135' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, 180px 180px;
}

/* ---------- Glassmorphism (blur ringan agar tetap mulus di HP) ---------- */
.glass {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow:
    0 18px 40px -18px rgba(62, 90, 71, .28),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.glass-sage {
  background: rgba(62, 90, 71, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 22px 44px -20px rgba(47, 72, 55, .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .9); }
}

/* ---------- Transisi cover -> doa -> konten (dipakai script.js) ---------- */
.fade-out-cover {
  opacity: 0 !important;
  filter: blur(14px) !important;
  /* < 800ms: script.js menyembunyikan (display:none) cover di 800ms & doa di 1000ms */
  transition: opacity .75s cubic-bezier(.4, 0, .2, 1), filter .75s cubic-bezier(.4, 0, .2, 1) !important;
  pointer-events: none;
}
.content-hidden {
  opacity: .55;
  filter: blur(18px);
  transform: scale(.985);
  transition: opacity 1.8s ease-out, filter 1.8s ease-out, transform 1.8s ease-out;
}
.content-show {
  opacity: 1;
  filter: blur(0);
  transform: none; /* tanpa transform permanen agar tidak mengganggu stacking context */
}

/* ---------- Countdown (dipakai script.js) ---------- */
.number-card {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: transform .4s ease, opacity .4s ease;
  will-change: transform, opacity;
}
.number-card.anim-out { transform: translateY(6px) scale(.9); opacity: 0; }
.number-card.anim-in  { transform: translateY(-6px) scale(1.08); opacity: 0; }

/* ---------- Pembatas: garis — daisy — garis ---------- */
.daisy-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.daisy-divider::before,
.daisy-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 0;
  background: linear-gradient(to right, transparent, rgba(227, 178, 60, .65));
}
.daisy-divider::after { background: linear-gradient(to left, transparent, rgba(227, 178, 60, .65)); }
.daisy-divider.is-left::before { display: none; }
.daisy-divider.is-right::after { display: none; }
.daisy-divider.is-right::before { background: linear-gradient(to right, transparent, rgba(227, 178, 60, .65)); }
.daisy-divider.is-left::after   { background: linear-gradient(to right, rgba(227, 178, 60, .65), transparent); }
.daisy-divider > svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Frame foto mempelai (kubah / arch) ---------- */
.arch-wrap { position: relative; width: 9.5rem; flex: none; }
.arch-wrap::before {               /* garis kubah kedua, bergeser */
  content: "";
  position: absolute;
  inset: .55rem -.55rem -.55rem .55rem;
  border: 1px solid rgba(227, 178, 60, .7);
  border-radius: 999px 999px 1.25rem 1.25rem;
}
.arch-wrap.is-flip::before { inset: .55rem .55rem -.55rem -.55rem; }
.arch-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 1.25rem 1.25rem;
  overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF, #E4ECDD);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 32px -14px rgba(62, 90, 71, .35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.arch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: multiply;
}

/* ---------- Garis timeline ---------- */
.timeline-line {
  background: linear-gradient(to bottom, rgba(227, 178, 60, .7), rgba(143, 169, 143, .35));
}

/* ---------- Umpan balik sentuhan di HP ---------- */
.btn-press {
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 10px 22px -10px rgba(47, 72, 55, .6);
}
.btn-press:active { transform: scale(.96); }
.tap-card { -webkit-tap-highlight-color: transparent; transition: transform .2s ease; }
.tap-card:active { transform: scale(.97); }

/* ---------- Form ---------- */
input, textarea { font-family: inherit; }
::placeholder { color: rgba(62, 90, 71, .45); }

/* ---------- Hormati preferensi "kurangi gerakan" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}