/* Concept selector — three panels split by two slanted dividers, a large numeral in each. Isolated; index.html only. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0a2130;overflow:hidden}
:root{--m:64px;--d:6px;--ease:cubic-bezier(.2,.7,.2,1);
  /* divider positions, top and bottom edge (from the sketch) */
  --a1:35%;--b1:26%;--a2:71%;--b2:57%}
.panels{position:relative;height:100svh}
.panel{position:absolute;inset:0;display:block;transition:filter .5s var(--ease)}
.panel img{position:absolute;top:0;height:100%;object-fit:cover;object-position:left top;transition:object-position 7s linear,transform .8s var(--ease)}
.p1{clip-path:polygon(0 0,var(--a1) 0,var(--b1) 100%,0 100%)}
.p2{clip-path:polygon(calc(var(--a1) + var(--d)) 0,var(--a2) 0,var(--b2) 100%,calc(var(--b1) + var(--d)) 100%)}
.p3{clip-path:polygon(calc(var(--a2) + var(--d)) 0,100% 0,100% 100%,calc(var(--b2) + var(--d)) 100%)}
.p1 img{left:0;width:var(--a1)}
.p2 img{left:var(--b1);width:calc(var(--a2) - var(--b1))}
.p3 img{left:var(--b2);width:calc(100% - var(--b2))}
.panels:hover .panel{filter:brightness(.5) saturate(.6)}
.panels .panel:hover,.panel:focus-visible{filter:none;outline:none}
.panel:hover img,.panel:focus-visible img{object-position:left bottom}
/* Numerals: bottom of each panel, inside the page margins */
.n{position:absolute;bottom:var(--m);font:700 clamp(96px,11vw,180px)/.8 "Helvetica Neue",Arial,sans-serif;color:#fff;
  text-shadow:0 6px 30px #0a213099;transition:color .3s,transform .5s var(--ease)}
.p1 .n{left:calc(var(--m) + 4%)}
.p2 .n{left:calc((var(--b1) + var(--a2)) / 2 + 4%)}
.p3 .n{right:var(--m)}
.panel:hover .n,.panel:focus-visible .n{color:#e5352c;transform:translateY(-8px)}
@media (max-width:760px){
  html,body{overflow:auto}
  :root{--m:24px;--cut:40px}
  .panels{height:auto;display:flex;flex-direction:column}
  .panel{position:relative;height:68svh;margin-top:calc(var(--cut) * -1 + var(--d));clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
  .p1{margin-top:0;clip-path:none}
  .panel img{left:0!important;width:100%!important}
  .p2 .n{left:var(--m)}.p3 .n{right:auto;left:var(--m)}
  .n{bottom:var(--m);font-size:96px}
  .panels:hover .panel{filter:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Numerals: same spot in every panel (bottom-left, one margin in from the panel's left edge); white with shading */
.n{color:#fff!important;text-shadow:0 2px 4px #0a213066,0 10px 40px #0a2130b3}
.p1 .n{left:var(--m)}
.p2 .n{left:calc(var(--b1) + var(--d) + var(--m))}
.p3 .n{left:calc(var(--b2) + var(--d) + var(--m));right:auto}
@media (max-width:760px){.p2 .n,.p3 .n{left:var(--m)}}