@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Scrapbook Polaroid" (koleksi Tren)
   Album kenangan: kertas kraft & kertas bergaris, foto polaroid miring
   tertempel selotip washi, tulisan tangan, coretan hati/panah/bintang,
   label sobekan kertas, stiker bulat. Banyak foto = makin hidup.
   ========================================================== */
.t-trscrap {
    --bg: #f6f0e4; --card: #fffdf7; --ink: #3a3026; --muted: #7b6a58; --line: rgba(90,70,45,.2);
    --accent: #d65a4a; --accent-2: #3f7f8c; --on-accent: #fff; --hero-rgb: 92,70,44; --tint-a: .3; --hero-ink: #3a3026;
    --deep: #3a3026; --soft: #e8dcc6; --field: #fffef9; --ring: rgba(214,90,74,.16);
    --fn: 'Caveat', cursive; --fh: 'Caveat', cursive; --fb: 'Nunito', sans-serif; --fn-w: 700; --fn-k: 1.28; --fh-w: 700; --fh-ls: 0;
    --kraft: url(../../img/themes/trscrap/kraft.jpg) 0 0 / 380px 380px;
    --grid: linear-gradient(rgba(63,127,140,.11) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(63,127,140,.11) 1px, transparent 1px) 0 0 / 22px 22px;
    --tape-a: repeating-linear-gradient(45deg, rgba(240,190,90,.75) 0 7px, rgba(250,214,140,.75) 7px 14px);
    --tape-b: repeating-linear-gradient(-45deg, rgba(120,180,190,.72) 0 6px, rgba(170,210,215,.72) 6px 12px);
    --tape-c: radial-gradient(circle, rgba(255,255,255,.65) 2px, transparent 2.5px) 0 0 / 9px 9px, rgba(232,140,150,.72);
    --card-r: 3px; --btn-r: 6px; --cd-r: 4px; --ph-r: 2px;
    --card-sh: 0 3px 0 rgba(58,48,38,.08), 0 14px 26px -18px rgba(58,48,38,.5);
    color-scheme: light;
}
@keyframes scDrop { 0% { opacity: 0; transform: translateY(-40px) rotate(var(--r0, -14deg)) scale(1.06); } 70% { opacity: 1; } 100% { opacity: 1; transform: rotate(var(--r, -4deg)); } }
@keyframes scWiggle { 0%, 100% { transform: rotate(var(--r, -4deg)); } 50% { transform: rotate(calc(var(--r, -4deg) + 1.5deg)); } }
@keyframes scDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scPop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(var(--r, 8deg)); } }

body.t-trscrap .page { background: var(--grid), var(--bg); }
.t-trscrap .cover, .t-trscrap .hero, .t-trscrap .aside, .t-trscrap .sec--closing, body.t-trscrap .cover.has-photo, body.t-trscrap .hero.has-photo, body.t-trscrap .aside.has-photo { background: var(--kraft), #c4a47a; }
.t-trscrap .sec--tint, .t-trscrap .sec--countdown { background: var(--grid), #f2e9d8; }
body.t-trscrap .names { color: var(--ink); line-height: .95; }
body.t-trscrap .names i { font-family: var(--fn); font-style: normal; color: var(--accent); font-size: .62em; vertical-align: .1em; }
body.t-trscrap .kicker { font: 400 .78rem/1 'Special Elite', monospace; letter-spacing: .18em; color: var(--ink); }
body.t-trscrap .cover__date, body.t-trscrap .hero__date, body.t-trscrap .aside__date, body.t-trscrap .countdown__date, body.t-trscrap .event__date { font-family: 'Special Elite', monospace; letter-spacing: .08em; font-weight: 400; }

/* Polaroid & selotip */
.t-trscrap .sc-pola { position: relative; display: block; width: var(--w, 200px); padding: 10px 10px 40px; background: #fffef8; box-shadow: 0 2px 2px rgba(0,0,0,.08), 0 18px 28px -16px rgba(40,25,10,.55); transform: rotate(var(--r, -4deg)); }
.t-trscrap .sc-pola > i { display: block; aspect-ratio: 1; background: var(--img, none) center 25% / cover no-repeat, linear-gradient(135deg, #e9dcc6, #d3bf9e); }
.t-trscrap .sc-pola > b { position: absolute; left: 0; right: 0; bottom: 8px; font: 700 1.25rem/1 'Caveat', cursive; color: var(--ink); text-align: center; }
.t-trscrap .sc-pola > em { position: absolute; inset: 10px 10px 40px; display: grid; place-items: center; font: 700 3.6rem/1 'Caveat', cursive; font-style: normal; color: rgba(255,255,255,.95); text-shadow: 0 2px 8px rgba(80,50,20,.25); }
.t-trscrap .sc-tape { position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: var(--tape-a); transform: rotate(-6deg); opacity: .95; box-shadow: 0 1px 2px rgba(0,0,0,.12);
    -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0), radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) 0 0 / 4px 6px repeat-y; mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); }
.t-trscrap .sc-tape--b { background: var(--tape-b); transform: rotate(5deg); }
.t-trscrap .sc-tape--c { background: var(--tape-c); transform: rotate(-3deg); }
.t-trscrap .sc-stack { position: relative; width: min(300px, 80vw); height: min(290px, 76vw); margin: 0 auto .4rem; }
.t-trscrap .sc-stack .sc-pola { position: absolute; }
.t-trscrap .sc-stack .sc-pola:nth-child(1) { --w: 58%; left: 0; top: 10%; --r: -9deg; --r0: -24deg; }
.t-trscrap .sc-stack .sc-pola:nth-child(2) { --w: 58%; right: 0; top: 2%; --r: 7deg; --r0: 20deg; }
.t-trscrap .sc-stack .sc-pola:nth-child(3) { --w: 64%; left: 18%; top: 22%; --r: -2deg; --r0: -10deg; z-index: 2; }
body:not(.is-locked) .t-trscrap .sc-pola, .t-trscrap .cover .sc-pola { animation: scDrop .9s cubic-bezier(.3,1.25,.5,1) both; animation-delay: calc(.25s + var(--d, 0) * .2s); }
.t-trscrap .sc-doodle { position: absolute; pointer-events: none; overflow: visible; z-index: 3; }
.t-trscrap .sc-doodle path { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: scDraw 1.2s ease forwards; animation-delay: var(--dl, 1s); }
.t-trscrap .sc-sticker { position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #f4c84f; color: #3a3026; font: 700 .78rem/1.05 'Caveat', cursive; font-size: 1rem; text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 8px 14px -8px rgba(0,0,0,.4); transform: rotate(var(--r, 10deg)); animation: scPop .6s cubic-bezier(.3,1.5,.5,1) 1.3s both; z-index: 4; }

/* Label sobekan (sampul & judul) */
.t-trscrap .sc-paper { position: relative; padding: 1.4rem 1.3rem 1.2rem; background: #fffef8; box-shadow: 0 16px 26px -18px rgba(40,25,10,.6);
    -webkit-mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) -6px 100% / 12px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat;
    mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) -6px 100% / 12px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat; }
.t-trscrap .sc-lined { background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(63,127,140,.22) 25px 26px) 0 14px, linear-gradient(90deg, transparent 22px, rgba(214,90,74,.35) 22px 23px, transparent 23px), #fffef8; }

/* Sampul */
.t-trscrap .cover, body.t-trscrap .cover.has-photo { place-items: center; padding: 2.4rem 1.4rem; overflow: hidden; color: var(--ink); }
.t-trscrap .cover__inner { position: relative; z-index: 3; gap: .5rem; width: min(340px, calc(100vw - 40px)); }
.t-trscrap .cover .sc-paper { display: grid; gap: .35rem; transform: rotate(-1.2deg); animation: trUp 1s var(--ease) .9s both; }
.t-trscrap .cover__to { margin: .1rem 0 .2rem; }
.t-trscrap .cover__to small { color: var(--muted); }
.t-trscrap .cover__to strong { font: 700 1.6rem/1.1 'Caveat', cursive; color: var(--accent-2); }
.t-trscrap .cover .ibtn { animation: trUp 1s var(--ease) 1.1s both; }
body.t-trscrap .ibtn { border: 2px solid var(--ink); color: var(--ink); font: 400 .82rem/1 'Special Elite', monospace; letter-spacing: .08em; box-shadow: 3px 3px 0 var(--ink); background: #fffef8; }
body.t-trscrap .ibtn:hover { background: #fff3c4; color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
body.t-trscrap .ibtn--solid { background: var(--accent); color: #fff; border-color: var(--ink); }
body.t-trscrap .ibtn--solid::after { display: none; }
body.t-trscrap .ibtn--solid:hover { background: #e06b5b; color: #fff; }
.t-trscrap .cover.is-open { transform: translateX(110%) rotate(8deg); opacity: 1; transition: transform 1s cubic-bezier(.6,0,.3,1); }
@media (max-height: 760px) { .t-trscrap .sc-stack { height: min(220px, 60vw); width: min(240px, 66vw); } .t-trscrap .cover__to small:last-child { display: none; } .t-trscrap .cover .sc-paper { padding: 1rem 1rem .9rem; } }

/* Pembuka */
.t-trscrap .hero, .t-trscrap .aside, body.t-trscrap .hero.has-photo, body.t-trscrap .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; color: var(--ink); place-items: center; padding: 4rem 1.4rem; }
.t-trscrap .hero__inner, .t-trscrap .aside__inner { position: relative; z-index: 3; }
.t-trscrap .hero .sc-paper, .t-trscrap .aside .sc-paper { display: grid; gap: .35rem; transform: rotate(1deg); }

/* Bagian */
body.t-trscrap .sec__title { display: table; margin: 0 auto 1.8rem; padding: .25rem 1.4rem .4rem; font-size: 2.3rem; color: var(--ink); background: #fffef8; transform: rotate(-1.5deg); box-shadow: 0 8px 14px -10px rgba(40,25,10,.5); position: relative; }
body.t-trscrap .sec__title::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: var(--tape-b); transform: rotate(4deg); }
body.t-trscrap .sec:nth-of-type(3n) .sec__title::before { background: var(--tape-a); transform: rotate(-5deg); }
body.t-trscrap .sec:nth-of-type(3n+1) .sec__title::before { background: var(--tape-c); }
body.t-trscrap .sec__title::after { display: none; }
body.t-trscrap .event { position: relative; padding: 1.8rem 1.4rem 1.5rem; background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(63,127,140,.18) 25px 26px) 0 12px, #fffef8; transform: rotate(var(--r, -.8deg)); }
body.t-trscrap .event:nth-child(2n) { --r: .9deg; }
body.t-trscrap .event::before { content: ''; display: block !important; position: absolute; top: -11px; left: 18px; width: 64px; height: 22px; background: var(--tape-a); transform: rotate(-8deg); inset: auto; border: 0; border-radius: 0; }
body.t-trscrap .event h3 { color: var(--accent); font-size: 2.4rem; }
body.t-trscrap .countdown div { background: #fffef8; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body.t-trscrap .countdown b { font-family: 'Caveat', cursive; font-weight: 700; color: var(--accent); }
body.t-trscrap .gallery__item { padding: 7px 7px 26px; background: #fffef8; border-radius: 0; box-shadow: 0 12px 20px -14px rgba(40,25,10,.6); }
body.t-trscrap .gallery__item:nth-child(odd) { transform: rotate(-2.4deg); } body.t-trscrap .gallery__item:nth-child(even) { transform: rotate(2deg); }
body.t-trscrap .pframe::before { display: none; }
body.t-trscrap .pframe__arch { border-radius: 0; padding: 8px 8px 30px; background: #fffef8; transform: rotate(-3deg); }
body.t-trscrap .person + .amp + .person .pframe__arch { transform: rotate(3deg); }
body.t-trscrap .wish { background: #fff8c9; border: 0; transform: rotate(var(--r, -.6deg)); }
body.t-trscrap .wish:nth-child(2n) { --r: .7deg; background: #e3f1f2; } body.t-trscrap .wish:nth-child(3n) { background: #fde2e1; }
body.t-trscrap .quote { font-family: 'Caveat', cursive; font-style: normal; font-size: 1.6rem; line-height: 1.35; }
body.t-trscrap .thanks { color: var(--accent); }
body.t-trscrap .lstory__card { background: #fffef8; }
.t-trscrap .sec--closing { position: relative; overflow: hidden; padding-block: 5rem; }
.t-trscrap .sec--closing > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .t-trscrap .sc-doodle path { stroke-dashoffset: 0 !important; } }