.sozz-bento .bento-link { min-height:52px; padding:12px 20px; gap:20px; border-radius:999px; font-size:16px; font-weight:500; background:linear-gradient(135deg,#bf1746,#9d1235); box-shadow:0 4px 14px rgba(130,15,44,.12); transition:box-shadow .3s ease,background .3s ease,transform .2s ease; }
.sozz-bento .bento-link.secondary { background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.sozz-bento .bento-top a { display:inline-flex; align-items:center; gap:8px; }
.sozz-bento .bento-arrow { position:relative; display:inline-block; flex:0 0 24px; width:24px; height:24px; overflow:hidden; }
.sozz-bento .bento-arrow svg { position:absolute; inset:0; width:24px; height:24px; transition:transform .4s cubic-bezier(.2,.75,.25,1),opacity .25s ease; }
.sozz-bento .bento-arrow svg:last-child { transform:translate(-24px,24px); opacity:0; }
.sozz-bento :is(a,button):is(:hover,:focus-visible) .bento-arrow svg:first-child { transform:translate(24px,-24px); opacity:0; }
.sozz-bento :is(a,button):is(:hover,:focus-visible) .bento-arrow svg:last-child { transform:translate(0,0); opacity:1; }
.sozz-bento .bento-link:active,.sozz-bento .bento-search button:active { transform:scale(.98); }
.sozz-bento .bento-search { display:flex; align-items:center; gap:8px; padding:6px; margin:24px 0; border-radius:999px; background:var(--canvas); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s ease; }
.sozz-bento .bento-search:focus-within { box-shadow:inset 0 0 0 1px var(--brand),0 0 0 4px rgba(184,24,68,.09); }
.sozz-bento .bento-search input { min-width:0; width:100%; flex:1; color:var(--ink); background:transparent; border:0; outline:0; padding:12px 14px; font:400 16px/1.4 'Roboto',sans-serif; }
.sozz-bento .bento-search input::placeholder { color:var(--muted); opacity:1; }
.sozz-bento .bento-search button { flex-shrink:0; display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 18px; border:0; border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); font:500 15px/1.4 'Roboto',sans-serif; transition:box-shadow .3s ease,transform .2s ease; }
.sozz-bento .bento-search button:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.sozz-bento .bento-search-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.sozz-bento .bento-card { position:relative; transition:box-shadow .4s ease; }
.sozz-bento .bento-card > * { position:relative; z-index:1; }
.sozz-bento .bento-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(380px circle at var(--pointer-x,50%) var(--pointer-y,30%),rgba(183,40,80,.09),transparent 70%); transition:opacity .4s ease; }
[data-theme="dark"] .sozz-bento .bento-card::before { background:radial-gradient(380px circle at var(--pointer-x,50%) var(--pointer-y,30%),rgba(255,182,205,.08),transparent 70%); }
.sozz-bento .bento-card.reveal-ready { opacity:0; transform:translateY(16px); }
.sozz-bento .bento-card.reveal-ready.is-visible { opacity:1; transform:none; transition:opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),box-shadow .35s ease; }
@media(hover:hover) and (pointer:fine) { .sozz-bento .bento-link:hover { box-shadow:0 8px 24px rgba(166,19,59,.25); } .sozz-bento .bento-link.secondary:hover { box-shadow:inset 0 0 0 1px var(--brand),0 6px 20px rgba(166,19,59,.1); } .sozz-bento .bento-card:hover::before { opacity:1; } .sozz-bento .bento-search button:hover { box-shadow:inset 0 0 0 1px var(--brand),0 4px 14px rgba(166,19,59,.12); } }
@media(max-width:600px) { .sozz-bento .bento-link { font-size:15px; padding:12px 18px; gap:12px; } .sozz-bento .bento-search { gap:4px; } .sozz-bento .bento-search input { padding:12px 10px; } .sozz-bento .bento-search button { padding:10px 12px; gap:5px; } }
@media(prefers-reduced-motion:reduce) { .sozz-bento *, .sozz-bento *::before { transition:none!important; animation:none!important; } .sozz-bento .bento-card.reveal-ready { opacity:1; transform:none; } .sozz-bento .bento-arrow svg:last-child { display:none; } .sozz-bento :is(a,button):is(:hover,:focus-visible) .bento-arrow svg:first-child { transform:none; opacity:1; } }