@import url("_marun.css");
/* ==========================================================
   DInvite — Tema "Tirai Teater" (koleksi Marun Romantis)
   Panggung pertunjukan: tirai beludru marun berlipit tersibak, lambrekin
   bergelombang berumbai emas, lampu sorot, papan marquee dengan bola lampu
   yang menyala berkejaran, label "Babak I, II …", kartu acara bergaya tiket.
   ========================================================== */
.t-mrteater {
    --bg: #14060a; --card: #22090f; --ink: #f7e7d6; --muted: #cfb0a4; --line: rgba(230,186,110,.35);
    --accent: #e6ba6e; --accent-2: #f6dba6; --on-accent: #14060a; --hero-rgb: 20,6,10; --tint-a: .5; --hero-ink: #f7e7d6;
    --gold: #e6ba6e; --gold-2: #f6dba6;
    --fn: 'Playfair Display', Georgia, serif; --fh: 'Cinzel Decorative', 'Cinzel', serif; --fb: 'Lato', sans-serif; --fn-s: italic; --fn-k: .92; --fh-w: 700; --fh-ls: .04em;
    --btn-r: 6px; --card-r: 6px;
    --pleats: repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 22px, rgba(255,140,140,.14) 34px, rgba(0,0,0,0) 46px, rgba(0,0,0,.42) 68px);
    --velvet: url(../../img/themes/roseromance/beludru.jpg) center / cover;
    --am-seam: transparent;
    color-scheme: dark;
}
@keyframes mtBulb { 0%, 100% { opacity: .35; box-shadow: 0 0 2px rgba(255,220,150,.4); } 50% { opacity: 1; box-shadow: 0 0 10px 3px rgba(255,210,130,.85); } }
@keyframes mtSpot { 0%, 100% { transform: translateX(-50%) rotate(-7deg); } 50% { transform: translateX(-50%) rotate(7deg); } }
@keyframes mtValance { from { transform: translateY(-100%); } to { transform: none; } }

/* Lambrekin (atas panggung) & lampu sorot — mrteater.js */
.t-mrteater .mt-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(60% 40% at 50% 100%, rgba(230,186,110,.18), transparent 70%), var(--bg); }
.t-mrteater .mt-spot { position: absolute; left: 50%; top: -6%; width: 110%; height: 112%; transform-origin: 50% 0; transform: translateX(-50%); animation: mtSpot 10s ease-in-out infinite;
    background: radial-gradient(48% 30% at 50% 88%, rgba(255,235,190,.3), transparent 70%), linear-gradient(180deg, rgba(255,236,190,.32), rgba(255,236,190,.04));
    clip-path: polygon(44% 0, 56% 0, 84% 100%, 16% 100%); filter: blur(6px); }
.t-mrteater .mt-side { position: absolute; top: 0; bottom: 0; width: 16%; background: var(--pleats), var(--velvet), #5a1420; box-shadow: inset -10px 0 20px rgba(0,0,0,.5); }
.t-mrteater .mt-side--l { left: 0; border-radius: 0 0 60% 0 / 0 0 14% 0; }
.t-mrteater .mt-side--r { right: 0; transform: scaleX(-1); border-radius: 0 0 60% 0 / 0 0 14% 0; }
.t-mrteater .mt-valance { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 2; animation: mtValance 1s var(--ease) both;
    background: radial-gradient(circle at 50% 0, #6d1a24 0 34px, transparent 35px) 0 22px / 68px 52px repeat-x, var(--pleats), #6d1a24;
    -webkit-mask: linear-gradient(#000 0 40px, transparent 40px), radial-gradient(circle at 50% 0, #000 0 34px, transparent 35px) 0 40px / 68px 34px repeat-x; mask: linear-gradient(#000 0 40px, transparent 40px), radial-gradient(circle at 50% 0, #000 0 34px, transparent 35px) 0 40px / 68px 34px repeat-x; }
.t-mrteater .mt-fringe { position: absolute; left: 0; right: 0; top: 38px; height: 6px; z-index: 3; background: repeating-linear-gradient(90deg, var(--gold) 0 3px, #9c7a3a 3px 6px); box-shadow: 0 2px 4px rgba(0,0,0,.5); }

/* Papan marquee dengan bola lampu */
.t-mrteater .mt-bulbs { position: absolute; inset: 0; pointer-events: none; }
.t-mrteater .mt-bulbs span { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ffe7b0; animation: mtBulb 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }

/* Sampul */
.t-mrteater .cover, body.t-mrteater .cover.has-photo { background: var(--bg); color: var(--ink); place-items: center; padding: 5.5rem 1.4rem 1.6rem; overflow: hidden; }
.t-mrteater .cover__inner { position: relative; z-index: 4; width: min(330px, calc(100vw - 64px)); gap: .5rem; padding: 1.8rem 1.4rem 1.6rem; border-radius: 10px;
    background: #1d070c; border: 2px solid var(--gold); box-shadow: inset 0 0 0 6px #1d070c, inset 0 0 0 7px rgba(230,186,110,.4), 0 30px 60px -20px rgba(0,0,0,.8); animation: mrUp 1.1s var(--ease) .3s both; }
.t-mrteater .cover__inner > :not(.mt-bulbs) { position: relative; z-index: 1; }
.t-mrteater .mt-billing { font: 700 .66rem/1 'Cinzel Decorative', serif; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.t-mrteater .cover .names, .t-mrteater .hero .names, .t-mrteater .aside .names { color: #fff3e2; text-shadow: 0 0 22px rgba(255,210,140,.35) !important; }
.t-mrteater .cover__to { margin: .2rem 0 .5rem; padding: .7rem .8rem; border-radius: 6px; background: rgba(230,186,110,.08); border: 1px dashed var(--line); }
.t-mrteater .cover__to small { color: var(--muted); }
.t-mrteater .cover__to strong { font: italic 600 1.35rem 'Playfair Display', serif; color: var(--ink); }
.t-mrteater .am-panel::before { background: var(--pleats), var(--velvet), #6d1a24; }
.t-mrteater .am-panel { transition: transform 2s cubic-bezier(.65,.02,.2,1) .15s; }
.t-mrteater .cover .am-open { z-index: 1; }
.t-mrteater .cover .mt-valance, .t-mrteater .cover .mt-fringe { z-index: 6; }
body.am-has-opening.t-mrteater .cover.is-open .cover__inner { animation: none; opacity: 0; transform: scale(.95); transition: opacity .4s, transform .6s; }
body.am-has-opening.t-mrteater .cover .cover__inner { z-index: 4; }
@media (max-height: 720px) { .t-mrteater .cover { padding-top: 4.4rem; } .t-mrteater .cover__inner { padding: 1.3rem 1.1rem 1.2rem; gap: .35rem; } .t-mrteater .cover__to small:last-child { display: none; } }

/* Pembuka */
.t-mrteater .hero, .t-mrteater .aside, body.t-mrteater .hero.has-photo, body.t-mrteater .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; background: var(--bg); color: var(--ink); place-items: center; padding: 6rem 1.5rem 3.5rem; }
.t-mrteater .hero__inner, .t-mrteater .aside__inner { position: relative; z-index: 4; }
.t-mrteater .mt-poster { position: relative; width: min(210px, 56vw); aspect-ratio: 3 / 4; margin: 0 auto .7rem; border-radius: 8px; padding: 10px; background: #1d070c; border: 2px solid var(--gold); }
.t-mrteater .mt-poster > i { display: block; width: 100%; height: 100%; border-radius: 4px; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, #3d0c13; }
body.t-mrteater:not(.is-locked) .hero .mt-poster { animation: mrUp 1.2s var(--ease) .3s both; }
body.t-mrteater:not(.is-locked) .hero .names { animation: mrUp 1.4s var(--ease) .55s both; }

/* Bagian: Babak I, II … */
.t-mrteater .page > .sec:nth-of-type(even), .t-mrteater .sec--tint, .t-mrteater .sec--countdown { background: radial-gradient(60% 40% at 50% 0%, rgba(230,186,110,.12), transparent 70%), #100407; }
.t-mrteater .sec__title { color: var(--gold-2); font-size: clamp(1.6rem, 7vw, 2.1rem); }
.t-mrteater .sec__title::before { content: attr(data-act); display: block; margin-bottom: .6rem; font: 600 .66rem/1 'Lato', sans-serif; letter-spacing: .42em; text-transform: uppercase; color: var(--muted); }
.t-mrteater .sec__title::after { content: '★ ★ ★'; display: block; margin-top: .7rem; font-size: .6rem; letter-spacing: .6em; padding-left: .6em; color: var(--gold); }
/* Kartu acara bergaya tiket pertunjukan */
.t-mrteater .event { position: relative; padding: 1.8rem 1.3rem 1.6rem; background: #2a0b12; border: 1px solid var(--line);
    -webkit-mask: radial-gradient(circle 14px at 0 calc(100% - 78px), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% calc(100% - 78px), transparent 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 14px at 0 calc(100% - 78px), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% calc(100% - 78px), transparent 98%, #000) right / 51% 100% no-repeat; }
.t-mrteater .event::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 78px; border-top: 2px dashed rgba(230,186,110,.35); pointer-events: none; }
.t-mrteater .event h3 { color: var(--gold-2); }
.t-mrteater .event__btns { position: relative; z-index: 1; margin-top: 1.4rem; }
.t-mrteater .countdown div { background: #1d070c; border-color: var(--gold); }
.t-mrteater .pframe::before { border: 2px solid var(--gold); border-radius: 8px; inset: -10px; box-shadow: inset 0 0 0 6px var(--bg); }
.t-mrteater .pframe__arch { border-radius: 4px; }
.t-mrteater .sec--closing { position: relative; overflow: hidden; padding-block: 7rem 5rem; background: var(--bg); }
.t-mrteater .sec--closing > :not(.mt-stage) { position: relative; z-index: 4; }
.t-mrteater .mt-fin { font: 700 .7rem/1 'Cinzel Decorative', serif; letter-spacing: .5em; padding-left: .5em; color: var(--gold); margin-top: 1rem; }
.t-mrteater .quote { font-family: 'Playfair Display', Georgia, serif; font-style: italic; text-transform: none; }