.slider{position:relative;z-index:var(--z-slider);height:100dvh;min-height:560px;overflow:hidden}.slider:focus-visible{outline:none}.slider__viewport{height:100%;overflow:hidden;touch-action:pan-y;cursor:grab}.slider__viewport.is-dragging{cursor:grabbing}.slider__track{display:flex;gap:var(--gap-cards);height:100%;padding:0;will-change:transform;transition:transform 1s cubic-bezier(.22,1,.36,1)}.slider__slide{flex:0 0 auto;height:100%}.slider__controls{--color-ink: var(--on-dark);--color-line: var(--line-dark);position:absolute;right:var(--page-padding);bottom:clamp(1.25rem,3vh,2.25rem);z-index:5;display:flex;align-items:center;gap:.9rem;padding:.4rem;border-radius:999px;background:#0a0a0a59;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.slider__arrow{width:clamp(31px,2.8vw,39px);height:clamp(31px,2.8vw,39px);display:grid;place-items:center;border-radius:999px;color:var(--color-ink);font-size:.9rem;border:1px solid var(--color-line);transition:transform var(--transition) var(--ease-spring),background var(--transition),color var(--transition),opacity var(--transition)}.slider__arrow:hover:not(:disabled){background:var(--on-dark);color:var(--color-dark)}.slider__arrow--prev:hover:not(:disabled){transform:translate(-3px)}.slider__arrow--next:hover:not(:disabled){transform:translate(3px)}.slider__arrow:disabled{opacity:.32;cursor:default}.slider__dots{display:inline-flex;align-items:center;gap:.5rem;padding:0 .4rem}.slider__dot{width:8px;height:8px;padding:0;border-radius:999px;background:color-mix(in srgb,var(--color-ink) 40%,transparent);transition:background var(--transition),transform var(--transition) var(--ease-spring),width var(--transition)}.slider__dot:hover{background:color-mix(in srgb,var(--color-ink) 70%,transparent)}.slider__dot.is-active{width:22px;background:var(--color-accent-2)}@media (max-width: 899px){.slider__controls{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;left:var(--page-padding);right:var(--page-padding);justify-content:center}}.card{--color-ink: var(--on-dark);--color-ink-dim: var(--on-dark-dim);--color-line: var(--line-dark);position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:0;color:var(--color-ink);isolation:isolate;background:var(--color-dark-soft)}.card__bg{position:absolute;inset:0;z-index:0;overflow:hidden}.card__media{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 2s var(--ease-out)}.card__veil{position:absolute;inset:0;background:linear-gradient(180deg,#0a0a0a00 35%,#0a0a0a8c);transition:background .9s var(--ease-out)}.card__placeholder{position:absolute;inset:0}.card__placeholder[data-theme=work]{background:radial-gradient(120% 90% at 15% 10%,#ff5c38,#ff5c3800 55%),radial-gradient(120% 120% at 90% 100%,#3a1d16,#0a0a0a 70%)}.card__placeholder[data-theme=services]{background:radial-gradient(120% 90% at 85% 10%,#ffb43d,#ffb43d00 52%),radial-gradient(120% 120% at 10% 100%,#2a2412,#0a0a0a 72%)}.card__placeholder[data-theme=about]{background:radial-gradient(110% 90% at 50% 0%,#2f3a44,#2f3a4400 55%),radial-gradient(120% 120% at 20% 100%,#14181c,#0a0a0a 72%)}.card__placeholder[data-theme=contact]{background:radial-gradient(120% 100% at 20% 15%,#ff5c38,#ff5c3800 45%),radial-gradient(120% 100% at 95% 90%,#ffb43d,#ffb43d00 40%),linear-gradient(160deg,#1a0f0b,#0a0a0a)}.card__content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(4.5rem,9vh,7rem)}.card__title{font-size:clamp(1.7rem,1.1rem + 2.1vw,3.1rem);line-height:var(--lh-tight);max-width:16ch;transform-origin:left bottom;transform:translateY(0) scale(1);transition:transform .7s var(--ease-out)}.card__desc{font-size:var(--fs-300);color:var(--color-ink-dim);max-width:34ch;margin-top:.6rem;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}@media (hover: hover){.card:hover .card__media,.card:focus-visible .card__media{transform:scale(1.05)}.card:hover .card__veil,.card:focus-visible .card__veil{background:linear-gradient(180deg,#0a0a0a0f,#0a0a0a33,#0a0a0a99)}.card:hover .card__title,.card:focus-visible .card__title{transform:translateY(-4px) scale(1.07)}.card:hover .card__desc,.card:focus-visible .card__desc{opacity:1;transform:translateY(0)}}@media (hover: none){.card__desc{opacity:1;transform:none}.card__veil{background:linear-gradient(180deg,#0a0a0a0d 30%,#0a0a0a9e)}}
