.bg-section{--bg-card-bg:#111;--bg-bar-accent:#b8893f;--bg-circle-color:#5a4424;--bg-grid-color:#ffffff14;--bg-page-bg:#f7f3ea;justify-content:center;display:flex}.bg-card{aspect-ratio:5/6;background:var(--bg-card-bg);border-radius:28px;width:100%;max-width:520px;padding:28px;position:relative;overflow:hidden}.bg-grid{pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:28px}.bg-grid span{background:var(--bg-grid-color);height:1px;display:block}.bg-bars{justify-content:space-between;align-items:flex-end;gap:14px;display:flex;position:absolute;inset:28px}.bg-bar{background:linear-gradient(180deg,#d6a55a 0%,var(--bg-bar-accent)60%,#8c6730 100%);transform-origin:bottom;border-radius:2px 2px 0 0;flex:1;height:0;transition:height 1.4s cubic-bezier(.22,1,.36,1);position:relative}.bg-bar:first-child{opacity:.08}.bg-bar:nth-child(2){opacity:.22}.bg-bar:nth-child(3){opacity:.42}.bg-bar:nth-child(4){opacity:.68}.bg-bar:nth-child(5){opacity:1}.bg-bar--accent{box-shadow:0 0 30px #b8893f26}.bg-circle{background:var(--bg-circle-color);z-index:2;opacity:0;border-radius:50%;width:80px;height:80px;transition:opacity .8s 1s,transform 1s cubic-bezier(.22,1,.36,1) 1s;position:absolute;top:10%;right:6%;transform:translateY(-10px)scale(.6)}.bg-card.is-visible .bg-bar{height:calc(var(--final-h,50)*1%)}.bg-card.is-visible .bg-bar:first-child{transition-delay:50ms}.bg-card.is-visible .bg-bar:nth-child(2){transition-delay:.2s}.bg-card.is-visible .bg-bar:nth-child(3){transition-delay:.35s}.bg-card.is-visible .bg-bar:nth-child(4){transition-delay:.5s}.bg-card.is-visible .bg-bar:nth-child(5){transition-delay:.65s}.bg-card.is-visible .bg-circle{opacity:1;transform:translateY(0)scale(1)}@media (prefers-reduced-motion:reduce){.bg-bar,.bg-circle{transition:none}}@media (max-width:480px){.bg-card{border-radius:22px;padding:20px}.bg-grid,.bg-bars{inset:20px}.bg-circle{width:60px;height:60px;top:8%;right:5%}.bg-bars{gap:10px}}.ma-section{--ma-card-bg:#111;--ma-arc-color:#b8893f;--ma-block-color:#2a2a2e;--ma-page-bg:#f7f3ea;justify-content:center;display:flex}.ma-card{aspect-ratio:4/3;background:var(--ma-card-bg);border-radius:28px;width:100%;max-width:640px;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px #00000040}.ma-arcs{width:100%;height:100%;position:absolute;inset:0}.ma-arc{fill:none;stroke:var(--ma-arc-color);stroke-width:1.5px;stroke-linecap:round;opacity:.8;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1)}.ma-arc:first-child{--len:1195}.ma-arc:nth-child(2){--len:850}.ma-arc:nth-child(3){--len:475}.ma-blocks{align-items:flex-end;gap:5px;height:13%;padding:0 10px;display:flex;position:absolute;bottom:0;left:0;right:0}.ma-block{flex:var(--f,1);height:var(--h);background:var(--ma-block-color);opacity:0;transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1);transform:translateY(20px)}.ma-card.is-visible .ma-arc{stroke-dashoffset:0}.ma-card.is-visible .ma-arc:nth-child(3){transition-delay:0s}.ma-card.is-visible .ma-arc:nth-child(2){transition-delay:.25s}.ma-card.is-visible .ma-arc:first-child{transition-delay:.5s}.ma-card.is-visible .ma-block{opacity:1;transform:translateY(0)}.ma-card.is-visible .ma-block:first-child{transition-delay:.6s}.ma-card.is-visible .ma-block:nth-child(2){transition-delay:.65s}.ma-card.is-visible .ma-block:nth-child(3){transition-delay:.7s}.ma-card.is-visible .ma-block:nth-child(4){transition-delay:.75s}.ma-card.is-visible .ma-block:nth-child(5){transition-delay:.8s}.ma-card.is-visible .ma-block:nth-child(6){transition-delay:.85s}.ma-card.is-visible .ma-block:nth-child(7){transition-delay:.9s}.ma-card.is-visible .ma-block:nth-child(8){transition-delay:.95s}.ma-card.is-visible .ma-block:nth-child(9){transition-delay:1s}.ma-card.is-visible .ma-block:nth-child(10){transition-delay:1.05s}.ma-card.is-visible .ma-block:nth-child(11){transition-delay:1.1s}.ma-card.is-visible .ma-block:nth-child(12){transition-delay:1.15s}@media (prefers-reduced-motion:reduce){.ma-arc,.ma-block{transition:none}}@media (max-width:480px){.ma-card{border-radius:22px}.ma-blocks{gap:3px;padding:0 6px}}
