:root{
  --skew: 60px;
  --gap: 10px;
  --skew-img: calc(var(--skew) + var(--skew) + var(--gap));
  --brand: #C41721;
  --bg: #0a0a0c;
  --text: #ffffff;
  --ease: cubic-bezier(0.3, 0.5, 0.2, 1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow:hidden;
}

/* Top brand (optional) */
.brand{
  position:fixed;
  z-index:5;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  opacity:.95;
}
.brand img{height:26px; width:auto}
.brand span{font-weight:700; letter-spacing:.06em; font-size:14px}

/* Slider wrapper */
.slider{
  display:flex;
  position:fixed;
  inset:0;
  min-height:400px;
  overflow:hidden;
}

/* Panels */
.panel{
  display:block;
  flex:1 1 auto;
  width:25%;
  opacity:.42;
  transition: width .5s var(--ease), opacity .3s ease-in-out, filter .3s ease-in-out;
  text-decoration:none;
  color:inherit;
  position:relative;
}
.panel:hover{width:100%; opacity:1}
.panel:focus{outline:2px solid rgba(255,255,255,.25); outline-offset:-2px; width:100%; opacity:1}

.panel img{
  object-fit:cover;
  height:100%;
  width:calc(100% + var(--skew) + var(--skew));
  max-width:calc(100% + var(--skew) + var(--skew));
  margin-left:calc(var(--skew) * -1);
  transform: translate3d(0,0,0);
  filter: saturate(1.05) contrast(1.02);
}

/* Clip paths - like the original */
.panel:first-of-type{
  clip-path: polygon(0 0, 0% 100%, calc(100% - var(--skew)) 100%, calc(100% + var(--skew)) 0);
}
.panel:first-of-type > img{
  clip-path: polygon(0 100%, 0 0, calc(100% - (var(--gap) * .5)) 0, calc(100% - var(--skew-img)) 100%);
}
.panel:last-of-type{
  clip-path: polygon(var(--skew) 0, calc(var(--skew) * -1) 100%, 100% 100%, 100% 0);
}
.panel:last-of-type > img{
  clip-path: polygon(var(--gap) 100%, var(--skew-img) 0, 100% 0, 100% 100%);
}
.panel:not(:first-of-type):not(:last-of-type){
  clip-path: polygon(var(--skew) 0, calc(var(--skew) * -1) 100%, calc(100% - var(--skew)) 100%, calc(100% + var(--skew)) 0);
}
.panel:not(:first-of-type):not(:last-of-type) > img{
  clip-path: polygon(var(--gap) 100%, var(--skew-img) 0, calc(100% - var(--gap)) 0, calc(100% - var(--skew-img)) 100%);
}

/* Mobile title shown only on small screens */
.panel-title{
  display:none;
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  border-radius:14px;
  font-weight:700;
  letter-spacing:.02em;
}

/* Page frame overlay (asset) */
.frame-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:6;

  /* Frame exactly like original: border-image with slicing */
  --frame-size: 20px;
  border: var(--frame-size) solid transparent;
  border-image: url("../img/mask-frame.png") 29 repeat;

  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(0,0,0,.55));
}

/* Center label */
.center-label{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  pointer-events:none;
  font-size: clamp(34px, 4vw, 72px);
  z-index:3;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-shadow: 0 18px 55px rgba(0,0,0,.65);
}
.center-label > span{
  display:inline-block;
  min-width:12px;
  opacity:0;
  transform: translateX(25px);
  transition: opacity .7s var(--ease), transform .6s var(--ease);
}
.center-label > span.show{
  transform: translateX(0);
  opacity:1;
}

/* Small helper hint (editable) */
.hint{
  position:fixed;
  z-index:4;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  letter-spacing:.02em;
  opacity:.75;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;
  border-radius:999px;
  backdrop-filter: blur(8px);
}

/* Responsive mode: stacked */
@media (max-width: 1081.98px){
  body{ overflow:auto; }
  .slider{
    position:static;
    padding: 120px 0 70px;
    width:min(1100px, calc(100% - 28px));
    margin:0 auto;
    flex-wrap:wrap;
    gap: 24px;
    height:auto;
  }
  .center-label{ display:none; }
  .frame-overlay{ --frame-size: 16px; }
  .panel{
    width:100%;
    opacity:1;
    transition: transform .18s ease, filter .18s ease;
    border-radius: 18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
  }
  .panel:hover{ width:100%; transform: translateY(-2px); }
  .panel img{
    width:100%;
    max-width:100%;
    margin-left:0;
    clip-path:none !important;
    height: clamp(170px, 28vw, 300px);
  }
  .panel{ clip-path:none !important; }
  .panel-title{ display:block; }
  .hint{ position:static; transform:none; margin: 0 auto 22px; width:fit-content; }
  .brand{ position:sticky; top:16px; left:16px; }
}

@media (max-width: 720px){
  .frame-overlay{ --frame-size: 14px; opacity:.95; }
}


/* ============================
   Preloader (claws tear)
   ============================ */
html.preloader-active,
html.preloader-active body{
  overflow: hidden;
}

.horr-preloader{
  --pre-bg: rgba(11,15,20,1);
  --pre-z: 99999;
  position: fixed;
  inset: 0;
  z-index: var(--pre-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pre-bg);
}

.horr-preloader-mask{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--pre-bg);

  /* IMPORTANT: Chrome needs -webkit- prefix for mask */
  -webkit-mask-image: url("../img/mask-sprite-claws.svg");
          mask-image: url("../img/mask-sprite-claws.svg");
  -webkit-mask-size: 2300% 100%;
          mask-size: 2300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
}


.horr-preloader-logo{
  position: relative;
  opacity: 1;
  transform: translateZ(0);
  transition: opacity .35s ease;
  filter: drop-shadow(0 18px 60px rgba(0,0,0,.65));
}

.horr-preloader-bar{
  position: absolute;
  bottom: 60px;
  width: 320px;
  opacity: 1;
  transition: opacity .35s ease;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
}

.horr-preloader-bar > span{
  display: block;
  height: 2px;
  background: rgba(231,238,252,.18);
  position: relative;
  overflow: hidden;
}

.horr-preloader-bar > span::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:2px;
  width: 200px;
  background: linear-gradient(90deg, transparent 0%, rgba(231,238,252,.95) 20px, rgba(231,238,252,.95) calc(100% - 20px), transparent 100%);
  transform: translateX(-120%);
  animation: horr-preloader-bar-slide 1.25s infinite;
}

@keyframes horr-preloader-bar-slide{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(240%); }
}

@keyframes horr-mask-sprite{
  from{ -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
  to  { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
}

.horr-preloader-hide{
  pointer-events: none;
  background: transparent;
}

.horr-preloader-hide .horr-preloader-mask{
  animation: horr-mask-sprite .8s steps(22) forwards;
  -webkit-mask-position: 100% 0%;
          mask-position: 100% 0%;
}

.horr-preloader-hide .horr-preloader-logo,
.horr-preloader-hide .horr-preloader-bar{
  opacity: 0;
}