@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Watercolor Garden" (koleksi Tren)
   Lukisan cat air yang lembut: buket mawar & bunga liar merah muda,
   persik, lilac di sudut kertas, sapuan warna yang meresap, bingkai
   foto oval bertepi cat air, kelopak berjatuhan.
   ========================================================== */
.t-trwater {
    --bg: #fdfbf7; --card: rgba(255,255,255,.82); --ink: #5a4146; --muted: #8f777a; --line: rgba(200,130,140,.3);
    --accent: #c9707d; --accent-2: #8aa58a; --on-accent: #fff; --hero-rgb: 120,80,90; --tint-a: .25; --hero-ink: #5a4146;
    --deep: #5a4146; --soft: #f6e6e3; --field: #fffdfb; --ring: rgba(201,112,125,.16);
    --fn: 'Pinyon Script', cursive; --fh: 'Cormorant Garamond', Georgia, serif; --fb: 'Lora', Georgia, serif; --fn-k: 1.08; --fh-w: 500; --fh-s: italic;
    --bq-l: url(../../img/themes/trwater/buket-kiri.webp); --bq-r: url(../../img/themes/trwater/buket-kanan.webp);
    --bloom: url(../../img/themes/trwater/kuntum.webp); --wash: url(../../img/themes/trwater/sapuan.webp);
    --paper: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.9), transparent 60%), #fbf7f1;
    --card-r: 20px; --btn-r: 999px; --cd-r: 50%; --ph-r: 14px;
    --card-sh: 0 18px 40px -30px rgba(150,90,100,.45);
    color-scheme: light;
}
@keyframes wcBloom { from { opacity: 0; transform: scale(.86) rotate(-4deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wcBreath { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.025) rotate(.6deg); } }
@keyframes wcBleed { from { opacity: 0; transform: scale(.6); } to { opacity: .85; transform: scale(1); } }

body.t-trwater .page, .t-trwater .cover, .t-trwater .hero, .t-trwater .aside, body.t-trwater .cover.has-photo, body.t-trwater .hero.has-photo, body.t-trwater .aside.has-photo { background: var(--paper); }
.t-trwater .sec--tint, .t-trwater .sec--countdown { background: var(--wash) center / 140% 100% no-repeat, var(--paper); }

/* Buket di sudut (wc-corner dari trwater.js) */
.t-trwater .wc-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.t-trwater .wc-corner { position: absolute; width: min(380px, 96vw); aspect-ratio: 1; background: var(--bq-l) 0 0 / contain no-repeat; transform-origin: 0 0; animation: wcBloom 1.8s var(--ease) .1s both, wcBreath 12s ease-in-out 2s infinite; }
.t-trwater .wc-corner--tl { top: -3%; left: -7%; }
.t-trwater .wc-corner--br { bottom: -3%; right: -7%; background-image: var(--bq-r); transform-origin: 100% 100%; animation-delay: .5s, 2.5s; }
.t-trwater .wc-wash { position: absolute; left: -10%; right: -10%; top: 30%; height: 40%; background: var(--wash) center / 100% 100% no-repeat; opacity: .8; animation: wcBleed 2.4s ease both; }

/* Bingkai foto oval bertepi cat air */
.t-trwater .wc-oval { position: relative; width: min(200px, 52vw); aspect-ratio: 4 / 5; margin: 0 auto .6rem; }
.t-trwater .wc-oval > i { position: absolute; inset: 0; border-radius: 50%; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, var(--wash) 30% 50% / 260% 200% no-repeat, radial-gradient(circle at 40% 35%, #fff6f3, #f8e3df 60%, #efcdcb); box-shadow: 0 0 0 6px rgba(255,255,255,.8), 0 22px 40px -24px rgba(150,80,90,.6);
    -webkit-mask: radial-gradient(closest-side, #000 92%, transparent 100%); mask: radial-gradient(closest-side, #000 92%, transparent 100%); }
.t-trwater .wc-oval::before { content: ''; position: absolute; inset: -16%; background: var(--bloom) 100% 100% / 46% no-repeat, var(--bloom) 0 0 / 34% no-repeat; z-index: 2; pointer-events: none; }
.t-trwater .wc-oval > em { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 400 4rem/1 var(--fn); font-style: normal; color: #c9707d; }

/* Sampul */
.t-trwater .cover, body.t-trwater .cover.has-photo { place-items: center; padding: 3rem 1.6rem; overflow: hidden; color: var(--ink); }
.t-trwater .cover__inner { position: relative; z-index: 3; gap: .5rem; max-width: 340px; }
.t-trwater .cover .wc-oval { animation: wcBloom 1.6s var(--ease) .5s both; }
.t-trwater .cover .kicker { color: var(--accent-2); animation: trUp 1s var(--ease) .9s both; }
.t-trwater .cover .names { color: var(--ink); animation: trUp 1.3s var(--ease) 1.05s both; }
.t-trwater .cover__date { animation: trUp 1s var(--ease) 1.25s both; }
.t-trwater .cover__to { margin: .3rem 0 .6rem; padding: .75rem 1rem; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 10px 26px -20px rgba(150,90,100,.5); animation: trUp 1s var(--ease) 1.4s both; }
.t-trwater .cover__to small { color: var(--muted); }
.t-trwater .cover__to strong { font: 500 1.45rem var(--fh); font-style: italic; color: var(--ink); }
.t-trwater .cover .ibtn { animation: trUp 1s var(--ease) 1.6s both; }
body.t-trwater .ibtn--solid { background: linear-gradient(135deg, #e7a1a9, #c9707d); color: #fff; }
body.t-trwater .names i { color: var(--accent-2); }
.t-trwater .cover.is-open { transform: scale(1.12); opacity: 0; filter: blur(8px); transition: transform 1.2s ease, opacity 1s ease, filter 1s ease; pointer-events: none; }
@media (max-height: 740px) { .t-trwater .wc-oval { width: min(140px, 38vw); } .t-trwater .cover__to small:last-child { display: none; } .t-trwater .cover__inner { gap: .3rem; } }

/* Pembuka */
.t-trwater .hero, .t-trwater .aside, body.t-trwater .hero.has-photo, body.t-trwater .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; color: var(--ink); place-items: center; padding: 4rem 1.6rem; }
.t-trwater .hero__inner, .t-trwater .aside__inner { position: relative; z-index: 3; }
body.t-trwater:not(.is-locked) .hero .wc-oval { animation: wcBloom 1.6s var(--ease) .2s both; }

/* Bagian */
body.t-trwater .sec__title { color: var(--ink); font-size: clamp(2rem, 8.4vw, 2.6rem); }
body.t-trwater .sec__title::before { content: ''; display: block; width: 92px; height: 70px; margin: 0 auto .1rem; background: var(--bloom) center / contain no-repeat; }
body.t-trwater .sec__title::after { content: ''; display: block; width: 110px; height: 8px; margin: .5rem auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,112,125,.45), transparent); }
body.t-trwater .event { position: relative; overflow: hidden; background: rgba(255,255,255,.86); border: 0; }
body.t-trwater .event::before { content: ''; display: block !important; position: absolute; top: -14px; right: -14px; width: 96px; height: 96px; background: var(--bloom) center / contain no-repeat; opacity: .85; pointer-events: none; inset: auto; border: 0; border-radius: 0; }
body.t-trwater .event > * { position: relative; }
body.t-trwater .event h3 { color: var(--accent); }
body.t-trwater .countdown div { aspect-ratio: 1; display: grid; place-content: center; padding: 0; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.95), rgba(249,220,215,.75)); border: 0; box-shadow: 0 10px 22px -16px rgba(150,80,90,.55); }
body.t-trwater .countdown b { color: var(--accent); }
body.t-trwater .pframe::before { border: 0; inset: -20px; background: var(--bloom) 100% 100% / 44% no-repeat; box-shadow: none; z-index: 2; }
body.t-trwater .pframe__arch { border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,.8), 0 18px 30px -20px rgba(150,80,90,.5); }
body.t-trwater .gallery__item { box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 14px 24px -18px rgba(150,80,90,.55); }
body.t-trwater .quote { color: var(--ink); }
body.t-trwater .thanks { color: var(--accent); }
.t-trwater .sec--closing { position: relative; overflow: hidden; padding-block: 9rem 8rem; }
.t-trwater .sec--closing > :not(.wc-deco) { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .t-trwater .wc-corner { animation: none !important; } }