/* ALVIS preview: Websites section, "the deck". Six client sites as a fanned stack of real screens; the front card
   carries its phone version docked at the corner. Motion is transform and opacity only. All rules scoped under #websites. */
#websites .wd-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: clamp(36px, 5vh, 56px); }
#websites .wd-head h2 { margin: 0; font: 500 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.04em; max-width: 22ch; text-wrap: balance; }
#websites .wd-head p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; max-width: 40ch; }
#websites .wd-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: clamp(40px, 6vw, 96px); align-items: center; }

/* the deck */
#websites .deck { position: relative; aspect-ratio: 1440 / 900; touch-action: pan-y; user-select: none; outline: none; }
#websites .deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 12px; border-radius: 6px; }
#websites .card { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform, opacity; cursor: pointer;
  transition: transform 720ms var(--ease-out), opacity 520ms var(--ease-out); }
#websites .card .frame { position: absolute; inset: 0; padding: 1px; border-radius: 6px; background: var(--line-2); transition: background-color 200ms ease; }
#websites .card .shot { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 5px; background: var(--panel); }
#websites .card .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
#websites .card .shade { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity 520ms var(--ease-out); pointer-events: none; }
#websites .card[data-pos="0"] { cursor: default; }
#websites .card[data-pos="0"] .frame { background: color-mix(in oklab, var(--ink) 26%, transparent); }
@media (hover: hover) and (pointer: fine) { #websites .card:not([data-pos="0"]):hover .frame { background: var(--accent); } }

#websites .phone { position: absolute; z-index: 20; right: -3.5%; bottom: -7%; width: 19%; aspect-ratio: 390 / 844; padding: 5px; border-radius: 6px;
  background: #0d0e0f; border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  will-change: transform, opacity; transition: transform 640ms var(--ease-out), opacity 360ms var(--ease-out); pointer-events: none; }
#websites .phone .scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #000; }
#websites .phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#websites .phone[data-out] { opacity: 0; transform: translateY(18px) rotate(3deg); }
#websites .deck-hint { position: absolute; left: 0; bottom: -40px; font-size: 12.5px; color: var(--ink-3); }

/* details */
#websites .info { display: grid; gap: 22px; }
#websites .count { display: flex; align-items: center; gap: 14px; font: 400 12px var(--font-mono); color: var(--ink-3); }
#websites .count b { color: var(--accent); font-weight: 400; }
#websites .count .bar { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
#websites .count .bar i { position: absolute; inset: 0; background: var(--ink-2); transform-origin: left; transition: transform 720ms var(--ease-out); }
#websites .kind { font-size: 13px; color: var(--accent); }
#websites .info h3 { margin: -10px 0 0; font: 500 clamp(1.9rem, 2.8vw, 2.6rem)/1.02 var(--font-display); letter-spacing: -0.035em; }
#websites .desc { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; min-height: 4.8em; max-width: 42ch; }
#websites .desc span { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i) * 22ms); }
#websites .desc[data-in] span { opacity: 1; transform: none; }
#websites .needs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
#websites .needs li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink);
  opacity: 0; transform: translateX(-6px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); transition-delay: calc(160ms + var(--i) * 60ms); }
#websites .needs li span { font: 400 11px var(--font-mono); color: var(--ink-3); padding-top: 3px; }
#websites .needs[data-in] li { opacity: 1; transform: none; }
#websites .meta { display: flex; gap: 28px; font-size: 13px; color: var(--ink-3); }
#websites .meta b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; margin-top: 2px; }
#websites .ctrl { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
#websites .ctrl .btn-icon { --btn-h: 44px; }
#websites .ctrl .open { margin-left: auto; font-size: 14px; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { #websites .ctrl .open:hover { color: var(--accent-2); } }
#websites .note { font-size: 12px; color: var(--ink-3); }

@media (max-width: 959px) {
  #websites .wd-head { flex-direction: column; align-items: start; gap: 18px; }
  #websites .wd-body { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  #websites .deck { margin-right: 4%; }
  #websites .phone { width: 24%; right: -4%; }
  #websites .deck-hint { bottom: -36px; }
}
@media (prefers-reduced-motion: reduce) {
  #websites .card, #websites .phone, #websites .desc span, #websites .needs li, #websites .count .bar i { transition: none; }
}