.shader-strip{display:flex;gap:12px;height:clamp(440px,62vh,580px);margin:0;padding:0;list-style:none}.shader-strip__card{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:16px;background:#0e0e0e;cursor:pointer;outline:none;isolation:isolate;transition:flex-grow .6s cubic-bezier(.22,1,.36,1)}.shader-strip__card.is-active{flex-grow:2.6}.shader-strip__card:focus-visible{box-shadow:inset 0 0 0 2px var(--color-cream)}.shader-strip__art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .6s ease;filter:saturate(.85) brightness(.8)}.shader-strip__card.is-active .shader-strip__art{transform:scale(1);filter:none}.shader-strip__shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(to bottom,#0a0a0c8c,#0a0a0c40 35%,#0a0a0ce0);transition:background-color .5s ease;background-color:#0a0a0c59}.shader-strip__card.is-active .shader-strip__shade{background-color:#0a0a0c00}.shader-strip__logo{position:absolute;top:28px;left:50%;width:84%;height:72px;object-fit:contain;transform:translate(-50%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));transition:width .5s ease,top .5s ease}.shader-strip__card.is-active .shader-strip__logo{width:min(60%,320px);height:112px}.shader-strip__vtitle{position:absolute;left:50%;bottom:24px;max-height:calc(100% - 180px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;writing-mode:vertical-rl;transform:translate(-50%) rotate(180deg);font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--color-cream);transition:opacity .3s ease}.shader-strip__card.is-active .shader-strip__vtitle{opacity:0}.shader-strip__body{position:absolute;left:0;bottom:0;width:min(100%,580px);min-width:360px;padding:28px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.shader-strip__card.is-active .shader-strip__body{opacity:1;transform:none;pointer-events:auto;transition:opacity .35s ease .25s,transform .35s ease .25s}.shader-strip__badge{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-black);background:var(--color-cream)}.shader-strip__title{margin:0 0 8px;font-family:var(--font-display);font-size:clamp(26px,2.6vw,38px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--color-cream)}.shader-strip__desc{max-width:46ch;margin:0 0 20px;font-size:15px;line-height:1.5;color:#fcfbf6d6}.shader-strip__cta{display:inline-flex;align-items:center;gap:12px;padding:14px 22px 14px 24px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-cream);background:#0a0a0c99;border:2px solid var(--cta, var(--accent));border-radius:6px;box-shadow:0 0 24px color-mix(in srgb,var(--cta, var(--accent)) 35%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s ease,color .25s ease,box-shadow .25s ease}.shader-strip__cta-arrow{width:16px;height:16px;transition:transform .25s ease}.shader-strip__card.is-active:hover .shader-strip__cta{background:var(--cta, var(--accent));color:var(--accent-ink, var(--color-black));box-shadow:0 0 32px color-mix(in srgb,var(--cta, var(--accent)) 55%,transparent)}.shader-strip__card.is-active:hover .shader-strip__cta-arrow{transform:translate(4px)}@media (prefers-reduced-motion: reduce){.shader-strip__card,.shader-strip__body,.shader-strip__vtitle{transition:none}}.shader-strip__card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--accent);mix-blend-mode:color;opacity:1;pointer-events:none;transition:opacity .6s ease}.shader-strip__card:before{background:color-mix(in srgb,var(--accent) 62%,#0a0a0c);mix-blend-mode:normal;opacity:.86;transition:opacity .7s cubic-bezier(.22,1,.36,1)}.shader-strip__card.is-active:before{opacity:0}.shader-strip__card .shader-strip__art{transition:transform .8s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}.shader-strip__card:not(.is-active) .shader-strip__art{filter:grayscale(1) contrast(1.15) brightness(.85)}.shader-strip__card:not(.is-active) .shader-strip__shade{background:linear-gradient(to bottom,transparent 50%,rgba(10,10,12,.5) 100%)}.shader-strip--compact{height:clamp(320px,42vh,400px)}.shader-strip--compact .shader-strip__logo{height:56px}.shader-strip--compact .is-active .shader-strip__logo{height:84px}.shader-strip__shade{box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 0 60px 8px #0000008c}.shader-strip__suffix{position:absolute;top:110px;left:0;right:0;z-index:2;padding-left:.32em;font-family:"Eurostile URW",var(--font-display);font-size:13px;letter-spacing:.32em;text-align:center;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:0;transition:opacity .3s ease;pointer-events:none}.shader-strip__card.is-active .shader-strip__suffix{opacity:1;transition-delay:.2s}.shader-strip--compact .shader-strip__suffix{top:96px;font-size:11px}@media (max-width: 767px){.shader-strip,.shader-strip--compact{flex-direction:column;height:auto;gap:8px}.shader-strip__card{flex:none;height:72px;transition:height .55s cubic-bezier(.22,1,.36,1)}.shader-strip__card.is-active,.shader-strip--compact .shader-strip__card.is-active{height:440px}.shader-strip__logo,.shader-strip--compact .shader-strip__logo{top:50%;left:16px;width:92px;height:44px;transform:translateY(-50%);object-position:left center}.shader-strip__card.is-active .shader-strip__logo,.shader-strip--compact .shader-strip__card.is-active .shader-strip__logo{top:24px;left:50%;width:220px;height:84px;transform:translate(-50%);object-position:center}.shader-strip__vtitle{top:50%;right:44px;bottom:auto;left:124px;max-height:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;writing-mode:horizontal-tb;transform:translateY(-50%);font-size:15px}.shader-strip__card:not(.is-active):after{content:"";position:absolute;top:50%;right:18px;left:auto;bottom:auto;width:8px;height:8px;border-right:2px solid rgba(252,251,246,.8);border-bottom:2px solid rgba(252,251,246,.8);background:none;transform:translateY(-70%) rotate(45deg)}.shader-strip__body{width:100%;min-width:0;padding:22px}.shader-strip__title{font-size:26px}.shader-strip__suffix,.shader-strip--compact .shader-strip__suffix{top:94px;font-size:11px}}