@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Vinyl & Kaset" (koleksi Hobi)
   Musik retro 70-an: sampul album bergaris pelangi retro dengan piringan
   hitam yang mengintip lalu meluncur keluar saat dibuka, piringan berputar
   dengan label berfoto, lengan jarum yang turun, judul "Side A · Track",
   kartu acara bergaya kaset dengan gulungan pita yang berputar, equalizer.
   ========================================================== */
.t-trvinyl {
    --bg: #f5e8cf; --card: #fff6e4; --ink: #4a2617; --muted: #8a6248; --line: rgba(90,46,30,.22);
    --accent: #d2562b; --accent-2: #e3a72f; --on-accent: #fff6e4; --hero-rgb: 60,30,20; --tint-a: .4; --hero-ink: #4a2617;
    --teal: #2f6f6a; --brown: #5a2e1e;
    --deep: #3a1d12; --soft: #efd9b4; --field: #fffaf0; --ring: rgba(210,86,43,.18);
    --fn: 'Shrikhand', cursive; --fh: 'DM Serif Display', Georgia, serif; --fb: 'Space Grotesk', sans-serif; --fn-k: .8; --fh-w: 400; --fh-ls: 0;
    --stripes: linear-gradient(180deg, var(--accent-2) 0 20%, transparent 20% 26%, #e8822f 26% 46%, transparent 46% 52%, var(--accent) 52% 72%, transparent 72% 78%, var(--brown) 78%);
    --card-r: 18px; --btn-r: 999px; --cd-r: 12px; --ph-r: 12px;
    --card-sh: 0 4px 0 rgba(90,46,30,.15), 0 18px 30px -24px rgba(90,46,30,.5);
    color-scheme: light;
}
@keyframes vnSpin { to { transform: rotate(360deg); } }
@keyframes vnArm { 0% { transform: rotate(-32deg); } 100% { transform: rotate(0deg); } }
@keyframes vnSlide { 0% { transform: translateX(-12%); } 100% { transform: translateX(28%); } }
@keyframes vnEq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes vnSun { to { transform: rotate(360deg); } }

body.t-trvinyl .page { background: var(--bg); }
.t-trvinyl .sec--tint, .t-trvinyl .sec--countdown { background: repeating-linear-gradient(-45deg, rgba(227,167,47,.08) 0 18px, transparent 18px 36px), #f2dfbd; }
body.t-trvinyl .names { color: var(--brown); }
body.t-trvinyl .names i { font-family: var(--fh); font-style: italic; color: var(--accent); }
body.t-trvinyl .kicker { color: var(--teal); letter-spacing: .32em; font-weight: 700; }

/* Piringan hitam */
.t-trvinyl .vn-rec { position: relative; width: var(--s, 240px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.05) 31.4%, transparent 32%), repeating-radial-gradient(circle, #141210 0 1.6px, #23201c 1.8px 3.2px), #151311;
    box-shadow: 0 18px 34px -16px rgba(0,0,0,.6), inset 0 0 0 4px #0c0b0a; }
.t-trvinyl .vn-rec::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 8%, rgba(255,255,255,.16) 12%, transparent 18% 50%, rgba(255,255,255,.12) 58%, transparent 64%); pointer-events: none; }
.t-trvinyl .vn-label { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, radial-gradient(circle, var(--accent-2) 0 30%, var(--accent) 31% 62%, var(--brown) 63%); color: #fff6e4; text-align: center; animation: vnSpin 3.2s linear infinite; }
.t-trvinyl .vn-label b { font: 400 .95rem/1 var(--fn); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.t-trvinyl .vn-label::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8%; height: 8%; margin: -4% 0 0 -4%; border-radius: 50%; background: #f5e8cf; box-shadow: 0 0 0 2px rgba(0,0,0,.3); }
.t-trvinyl .vn-rec .vn-grooves { position: absolute; inset: 0; border-radius: 50%; animation: vnSpin 3.2s linear infinite; background: conic-gradient(from 0deg, rgba(255,255,255,.03), transparent 25%, rgba(255,255,255,.04) 50%, transparent 75%); }

/* Sampul album */
.t-trvinyl .cover, body.t-trvinyl .cover.has-photo { place-items: center; padding: 2.4rem 1.4rem; overflow: hidden; background: radial-gradient(circle at 50% 120%, #f1c26a, transparent 60%), var(--bg); color: var(--ink); }
.t-trvinyl .cover__inner { position: relative; z-index: 3; gap: .45rem; width: min(340px, calc(100vw - 40px)); }
.t-trvinyl .vn-sleeve { position: relative; width: min(250px, 64vw); aspect-ratio: 1; margin: 0 auto .6rem; }
.t-trvinyl .vn-sleeve .vn-rec { --s: 92%; position: absolute; top: 4%; left: 4%; z-index: 0; animation: vnSlide 1.4s cubic-bezier(.4,0,.2,1) .6s both; }
.t-trvinyl .vn-jacket { position: absolute; inset: 0; z-index: 1; border-radius: 6px; overflow: hidden; background: #fff3dc; box-shadow: 0 20px 36px -18px rgba(70,30,15,.6), inset 0 0 0 1px rgba(90,46,30,.15); transform: translateX(-12%); }
.t-trvinyl .vn-jacket::before { content: ''; position: absolute; left: -20%; right: -20%; bottom: -58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 0 34%, var(--brown) 34% 44%, transparent 44% 47%, var(--accent) 47% 57%, transparent 57% 60%, #e8822f 60% 70%, transparent 70% 73%, var(--accent-2) 73% 83%, transparent 83%); }
.t-trvinyl .vn-jacket span { position: absolute; left: 10%; right: 10%; top: 13%; font: 400 1.7rem/1 var(--fn); color: var(--brown); text-align: left; }
.t-trvinyl .vn-jacket small { position: absolute; left: 10%; top: 6%; font: 700 .58rem/1 var(--fb); letter-spacing: .3em; color: var(--teal); }
.t-trvinyl .vn-jacket em { position: absolute; right: 8%; top: 6%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff6e4; font: 700 .58rem/1.1 var(--fb); font-style: normal; text-align: center; transform: rotate(12deg); }
.t-trvinyl .cover .names { font-size: calc(clamp(2.4rem, 11vw, 3.2rem) * 1); animation: trUp 1.1s var(--ease) .9s both; }
.t-trvinyl .cover__to { margin: .3rem 0 .6rem; padding: .7rem 1rem; border-radius: 14px; background: var(--card); box-shadow: 0 4px 0 rgba(90,46,30,.15); animation: trUp 1s var(--ease) 1.1s both; }
.t-trvinyl .cover__to small { color: var(--muted); }
.t-trvinyl .cover__to strong { font: 400 1.5rem var(--fh); color: var(--ink); }
.t-trvinyl .cover .ibtn { animation: trUp 1s var(--ease) 1.3s both; }
body.t-trvinyl .ibtn { border: 2px solid var(--brown); color: var(--brown); font-weight: 700; }
body.t-trvinyl .ibtn:hover { background: var(--brown); color: #fff6e4; }
body.t-trvinyl .ibtn--solid { background: var(--accent); color: #fff6e4; border-color: var(--accent); box-shadow: 0 4px 0 var(--brown); }
body.t-trvinyl .ibtn--solid::after { display: none; }
body.t-trvinyl .ibtn--solid:hover { background: #e06535; color: #fff; }
.t-trvinyl .cover.is-open .vn-sleeve .vn-rec { animation: none; transform: translateX(120%) rotate(200deg); transition: transform 1s cubic-bezier(.6,0,.3,1); }
.t-trvinyl .cover.is-open { transform: translateY(-100%); opacity: 1; transition: transform 1s cubic-bezier(.7,0,.25,1) .35s; }
@media (max-height: 760px) { .t-trvinyl .vn-sleeve { width: min(180px, 48vw); } .t-trvinyl .vn-jacket span { font-size: 1.25rem; } .t-trvinyl .cover__to small:last-child { display: none; } }

/* Pembuka: meja putar */
.t-trvinyl .hero, .t-trvinyl .aside, body.t-trvinyl .hero.has-photo, body.t-trvinyl .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; place-items: center; padding: 4rem 1.4rem; color: var(--ink); background: var(--bg); }
.t-trvinyl .hero::after, .t-trvinyl .aside::after { content: ''; position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; background: repeating-conic-gradient(rgba(227,167,47,.13) 0 6deg, transparent 6deg 12deg); animation: vnSun 120s linear infinite; pointer-events: none; z-index: 0; }
.t-trvinyl .hero__inner, .t-trvinyl .aside__inner { position: relative; z-index: 3; }
.t-trvinyl .vn-deck { position: relative; width: min(290px, 76vw); aspect-ratio: 1.12; margin: 0 auto .8rem; border-radius: 22px; background: linear-gradient(160deg, #8a5a3a, #5a2e1e); box-shadow: 0 24px 40px -22px rgba(60,25,10,.7), inset 0 2px 0 rgba(255,255,255,.18); }
.t-trvinyl .vn-deck .vn-rec { --s: 80%; position: absolute; left: 6%; top: 7%; }
.t-trvinyl .vn-deck .vn-rec .vn-grooves, .t-trvinyl .vn-deck .vn-label { animation-play-state: paused; }
body.t-trvinyl:not(.is-locked) .vn-deck .vn-rec .vn-grooves, body.t-trvinyl:not(.is-locked) .vn-deck .vn-label { animation-play-state: running; animation-delay: 1.4s; }
.t-trvinyl .vn-arm { position: absolute; right: 7%; top: 8%; width: 16%; height: 78%; transform-origin: 50% 9%; transform: rotate(-32deg); }
body.t-trvinyl:not(.is-locked) .vn-arm { animation: vnArm 1.2s cubic-bezier(.4,0,.2,1) .3s forwards; }
.t-trvinyl .vn-arm svg { width: 100%; height: 100%; overflow: visible; }
.t-trvinyl .vn-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 26px; margin: .2rem auto .4rem; }
.t-trvinyl .vn-eq i { width: 6px; height: 100%; border-radius: 3px; background: var(--c, var(--accent)); transform-origin: 50% 100%; animation: vnEq .9s ease-in-out infinite; animation-delay: calc(var(--k) * -.13s); }

/* Bagian */
body.t-trvinyl .sec__title { color: var(--brown); font-size: clamp(2rem, 8.6vw, 2.6rem); }
body.t-trvinyl .sec__title::before { content: attr(data-track); display: block; width: max-content; margin: 0 auto .7rem; padding: .3rem .8rem; border-radius: 999px; background: var(--brown); color: #f5e8cf; font: 700 .62rem/1 var(--fb); letter-spacing: .24em; text-transform: uppercase; }
body.t-trvinyl .sec__title::after { content: ''; display: block; width: 120px; height: 12px; margin: .8rem auto 0; background: var(--stripes); border-radius: 3px; }
/* Kartu acara bergaya kaset */
body.t-trvinyl .event { position: relative; padding: 4.6rem 1.3rem 1.6rem; overflow: hidden; background: var(--card); border: 2px solid var(--brown); }
body.t-trvinyl .event::before { content: ''; display: block !important; position: absolute; left: 14px; right: 14px; top: 14px; height: 52px; inset: 14px 14px auto 14px; border: 0; border-radius: 10px; background: radial-gradient(circle at 30% 50%, #fff6e4 0 9px, var(--brown) 9.5px 15px, transparent 15.5px), radial-gradient(circle at 70% 50%, #fff6e4 0 9px, var(--brown) 9.5px 15px, transparent 15.5px), linear-gradient(90deg, transparent 33%, rgba(90,46,30,.85) 33% 67%, transparent 67%) center / 100% 8px no-repeat, var(--stripes); }
body.t-trvinyl .event h3 { color: var(--accent); font-size: 2rem; }
body.t-trvinyl .countdown div { background: var(--brown); border: 0; box-shadow: 0 4px 0 #2e160c; }
body.t-trvinyl .countdown b { color: var(--accent-2); font-family: var(--fb); font-weight: 700; }
body.t-trvinyl .countdown small { color: #f2dfbd; }
body.t-trvinyl .pframe::before { border: 0; inset: -14px; border-radius: 50%; background: repeating-radial-gradient(circle, #141210 0 1.6px, #23201c 1.8px 3.2px); box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); }
body.t-trvinyl .pframe__arch { border-radius: 50%; }
body.t-trvinyl .gallery__item { border: 3px solid var(--brown); }
body.t-trvinyl .quote { font-family: var(--fh); font-style: italic; color: var(--brown); }
body.t-trvinyl .thanks { color: var(--accent); }
.t-trvinyl .sec--closing { position: relative; overflow: hidden; padding-block: 5rem; }
.t-trvinyl .sec--closing > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .t-trvinyl .vn-label, .t-trvinyl .vn-grooves, .t-trvinyl .vn-eq i, .t-trvinyl .hero::after { animation: none !important; } .t-trvinyl .vn-arm { transform: none !important; } }