/* Expanding gradient panels, palette colors */
.panels{display:flex;gap:14px;height:min(470px,72svh)}
.panel{--c1:#c0e6fd;--c2:#80aad3;--c3:#5b86b6;--ink:#04162b;position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;isolation:isolate;
  background:var(--bg-2);transition:flex-grow .65s cubic-bezier(.22,.8,.24,1),height .5s cubic-bezier(.22,.8,.24,1)}
.panel::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--c1),var(--c2) 58%,var(--c3));transition:opacity .5s}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,15,34,0) 30%,rgba(0,15,34,.9));opacity:0;transition:opacity .5s}
.panel.active{flex-grow:5.2}
.panel.active::before{opacity:.55}
.panel.active::after{opacity:1}
.panel:nth-child(2){--c1:#80aad3;--c2:#5b86b6;--c3:#3f6593}
.panel:nth-child(3){--c1:#5b86b6;--c2:#3f6593;--c3:#1b3554;--ink:#fff}
.panel:nth-child(4){--c1:#3f6593;--c2:#1b3554;--c3:#0b2038;--ink:#fff}

.tab{position:absolute;inset:0;width:100%;background:none;border:0;cursor:pointer;color:var(--ink);z-index:1}
.tab:focus-visible{outline-offset:-4px}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:26px;color:var(--ink);pointer-events:none;transition:opacity .25s}
.face i{display:block;width:1.5px;height:52px;background:var(--ink);margin-bottom:12px}
.face b{writing-mode:vertical-rl;font-weight:600;font-size:1rem;letter-spacing:.1em}
.face em{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:600 2.7rem/1 var(--sans);font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.panel.active .face{opacity:0}

.art{position:absolute;top:63%;left:50%;width:132px;height:132px;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;opacity:.45;
  transition:opacity .5s,top .6s cubic-bezier(.22,.8,.24,1),left .6s cubic-bezier(.22,.8,.24,1)}
.art svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.art img{width:112px;height:112px;border-radius:24px;object-fit:cover;box-shadow:0 14px 40px -12px rgba(0,0,0,.5)}
.panel.active .art{top:25%;left:83%;opacity:.95}
.panel.active .art svg{stroke:#fff}

.open{position:absolute;left:0;right:0;bottom:0;padding:30px;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .4s;pointer-events:none;z-index:2}
.panel.active .open{opacity:1;transform:none;transition-delay:.28s}
.open>div{width:clamp(280px,36vw,500px)}
.open h3{font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;margin-bottom:8px}
.open p{font-size:.88rem;color:rgba(255,255,255,.85);margin-bottom:18px}
.open ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.open li{font-size:.86rem;color:rgba(255,255,255,.85);padding-left:16px;position:relative}
.open li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-hi)}
.open li strong{color:#fff;font-weight:600}
.open .btn{pointer-events:auto}
.panel:not(.active) .open .btn{visibility:hidden}

@media (max-width:860px){
  .panels{flex-direction:column;height:auto}
  .panel{flex:none;height:78px}
  .panel.active{height:var(--open-h,380px)}
  .face{flex-direction:row;align-items:center;padding:0 22px;gap:14px}
  .face i{width:30px;height:1.5px;margin:0}
  .face b{writing-mode:horizontal-tb}
  .face em{left:auto;right:22px;bottom:auto;top:50%;transform:translateY(-50%);font-size:2rem}
  .art{opacity:0;width:96px;height:96px}.art img{width:84px;height:84px}
  .panel.active .art{top:20%;left:50%;opacity:.95}
  .open{padding:22px}.open>div{width:100%}
}