/* =========================================================
   Black Sword Studios — services.css
   Services panel only
   v15-03 four-pages / three-videos / contact button
   ========================================================= */


/* =========================================================
   ROOT TOKENS
   ========================================================= */

:root{
  --panel-z: 9998;

  --services-slice: clamp(88px, 8.2vw, 132px);
  --services-safe-left: clamp(44px, 4.9vw, 82px);
  --services-safe-top: clamp(40px, 4.4vw, 73px);
  --services-safe-right: clamp(42px, 4.7vw, 79px);
  --services-safe-bottom: clamp(42px, 4.5vw, 74px);

  --services-title-color: #d8c28b;
  --services-text-color: rgba(255,255,255,0.88);

  --services-shadow-soft: 0 0 18px rgba(0,0,0,0.34);
  --services-shadow-gold:
    0 0 10px rgba(216,194,139,0.14),
    0 0 24px rgba(216,194,139,0.08);

  --services-bg-tile: url("/assets/images/services_background.jpg");

  --services-corner-tl: url("/assets/images/services/corner_tl.png");
  --services-corner-tr: url("/assets/images/services/corner_tr.png");
  --services-corner-bl: url("/assets/images/services/corner_bl.png");
  --services-corner-br: url("/assets/images/services/corner_br.png");

  --services-edge-top: url("/assets/images/services/edge_top_full.png");
  --services-edge-right: url("/assets/images/services/edge_right_full.png");
  --services-edge-bottom: url("/assets/images/services/edge_bottom_full.png");
  --services-edge-left: url("/assets/images/services/edge_left_full.png");

  --services-contact-width: min(220px, 34vw);
  --services-contact-bottom: 0%;
}


/* =========================================================
   SHARED PANEL BEHAVIOUR
   ========================================================= */

.site-panel{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:var(--panel-z);
}

.site-panel.is-visible{
  display:flex;
}

body.panel-active #main,
body.panel-active footer{
  visibility:hidden;
  pointer-events:none;
}


/* =========================================================
   SERVICES PANEL ROOT
   ========================================================= */

#panel-services{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:var(--panel-z);
}

#panel-services.is-visible{
  display:flex;
}

.services-frame{
  position:relative;
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
  margin:0;
  isolation:isolate;
  overflow:hidden;
  transform:translateZ(0);
  background:#000;
}

.services-panel-content{
  position:absolute;
  inset:0;
  z-index:3;
}


/* =========================================================
   NINE-SLICE SHELL
   ========================================================= */

.services-frame .panel-shell{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.services-frame .panel-corner,
.services-frame .panel-edge{
  position:absolute;
  background-repeat:no-repeat;
  background-size:100% 100%;
  image-rendering:auto;
  pointer-events:none;
}

.services-frame .panel-corner{
  width:var(--services-slice);
  height:var(--services-slice);
  z-index:4;
}

.services-frame .panel-edge{
  z-index:3;
}

.services-frame .panel-corner-tl{
  top:0;
  left:0;
  background-image:var(--services-corner-tl);
}

.services-frame .panel-corner-tr{
  top:0;
  right:0;
  background-image:var(--services-corner-tr);
}

.services-frame .panel-corner-bl{
  bottom:0;
  left:0;
  background-image:var(--services-corner-bl);
}

.services-frame .panel-corner-br{
  bottom:0;
  right:0;
  background-image:var(--services-corner-br);
}

.services-frame .panel-edge-top{
  top:0;
  left:var(--services-slice);
  right:var(--services-slice);
  height:var(--services-slice);
  background-image:var(--services-edge-top);
  background-repeat:repeat-x;
  background-size:auto 100%;
}

.services-frame .panel-edge-bottom{
  bottom:0;
  left:var(--services-slice);
  right:var(--services-slice);
  height:var(--services-slice);
  background-image:var(--services-edge-bottom);
  background-repeat:repeat-x;
  background-size:auto 100%;
}

.services-frame .panel-edge-left{
  top:var(--services-slice);
  bottom:var(--services-slice);
  left:0;
  width:var(--services-slice);
  background-image:var(--services-edge-left);
  background-repeat:repeat-y;
  background-size:100% auto;
}

.services-frame .panel-edge-right{
  top:var(--services-slice);
  bottom:var(--services-slice);
  right:0;
  width:var(--services-slice);
  background-image:var(--services-edge-right);
  background-repeat:repeat-y;
  background-size:100% auto;
}


/* =========================================================
   SAFE AREA
   ========================================================= */

.services-frame .panel-safe,
.services-panel-copy{
  position:absolute;
  top:var(--services-safe-top);
  right:var(--services-safe-right);
  bottom:var(--services-safe-bottom);
  left:var(--services-safe-left);
  z-index:2;
  overflow:hidden;
}

.services-frame .panel-safe{
  background:
    var(--services-bg-tile)
    left top / 640px auto
    repeat;
}

.services-frame .panel-safe::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 56%),
    linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}

.services-frame .panel-safe::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,0.44),
    inset 0 0 120px rgba(0,0,0,0.24);
  pointer-events:none;
  z-index:6;
}


/* =========================================================
   SERVICES STAGE
   ========================================================= */

.services-stage{
  position:absolute;
  inset:0;
  z-index:1;
  touch-action:pan-x pan-y;
  user-select:none;
  -webkit-user-select:none;
}

.services-track{
  position:absolute;
  inset:0;
  display:flex;
  flex-wrap:nowrap;
  height:100%;
  transition:transform 560ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.services-page{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
}

.services-page.is-hidden{
  visibility:hidden;
}

.services-page-inner{
  position:absolute;
  inset:0;
}


/* =========================================================
   THREE-VIDEO LAYOUT
   ========================================================= */

.services-video-stack{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.services-video-wrap{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  box-shadow:var(--services-shadow-soft);
  border-radius:12px;
  filter:
    brightness(0.58)
    saturate(0.86)
    blur(1.1px);
  opacity:0.36;
  mix-blend-mode:screen;
}

.services-video-wrap::before{
  content:"";
  position:absolute;
  inset:-2.5%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.16), transparent 68%);
  opacity:0.24;
  filter:blur(18px);
  pointer-events:none;
}

.services-video-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 54%, rgba(0,0,0,0.30) 100%);
  pointer-events:none;
}

.services-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  outline:0;
  box-shadow:var(--services-shadow-soft);
  mask-image:radial-gradient(
    circle at center,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,0.84) 74%,
    rgba(0,0,0,0.18) 100%
  );
  -webkit-mask-image:radial-gradient(
    circle at center,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,0.84) 74%,
    rgba(0,0,0,0.18) 100%
  );
}

.services-video-wrap[data-video-slot="1"]{
  left:4%;
  top:8%;
  width:min(34%, 560px);
  aspect-ratio:16 / 9;
  transform:rotate(-4deg);
}

.services-video-wrap[data-video-slot="2"]{
  left:50%;
  top:6%;
  width:min(36%, 620px);
  aspect-ratio:16 / 9;
  transform:translateX(-50%);
}

.services-video-wrap[data-video-slot="3"]{
  right:4%;
  top:10%;
  width:min(33%, 540px);
  aspect-ratio:16 / 9;
  transform:rotate(4deg);
}


/* =========================================================
   COPY LAYER
   ========================================================= */

.services-copy,
.services-panel-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:0;
  padding:
    clamp(178px, 24vh, 260px)
    clamp(24px, 3vw, 52px)
    clamp(124px, 16vh, 170px);
  z-index:5;
  pointer-events:none;
}

.services-page-copy{
  width:min(1100px, 100%);
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(12px, 1.5vh, 18px);
}

.services-title{
  margin:0;
  max-width:min(18ch, 100%);
  font-family:"Centaur", serif;
  font-weight:400;
  font-size:clamp(32px, 3.7vw, 68px);
  line-height:1.02;
  letter-spacing:0.05em;
  color:var(--services-title-color);
  text-shadow:var(--services-shadow-gold);
}

.services-text{
  margin:0;
  max-width:min(92ch, 100%);
  font-family:"NewTegomin", serif;
  font-size:clamp(13px, 1vw, 18px);
  line-height:1.42;
  color:var(--services-text-color);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 0 16px rgba(0,0,0,0.34);
}

.services-text p{
  margin:0 0 0.85em;
}

.services-text p:last-child{
  margin-bottom:0;
}

.services-text strong,
.services-text b{
  color:rgba(216,194,139,0.96);
  font-weight:400;
}

.services-text ul{
  list-style:none;
  margin:0.55em 0 0.9em;
  padding:0;
}

.services-text li{
  margin:0 0 0.3em;
}

.services-text li::before{
  content:"";
}


/* =========================================================
   CONTACT BUTTON
   Same hover logic spirit as contact submit button
   ========================================================= */

.services-contact{
  position:absolute;
  left:50%;
  bottom:var(--services-contact-bottom);
  transform:translateX(-50%);
  z-index:8;
  pointer-events:auto;
}

.services-contact-btn,
.services-contact-button,
#servicesContactButton{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  display:block;
  width:var(--services-contact-width);
  aspect-ratio:512 / 144;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:
    url("/assets/images/contactus-hoveroff.png")
    center / contain
    no-repeat;
  color:transparent;
  font-size:0;
  line-height:0;
  cursor:url("/assets/cursors/cursor-hover.cur") 12 12, pointer;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.services-contact-btn::before,
.services-contact-button::before,
#servicesContactButton::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("/assets/images/contactus-hoveron.png")
    center / contain
    no-repeat;
  opacity:0;
  transition:opacity 180ms ease;
  pointer-events:none;
}

.services-contact-btn:hover::before,
.services-contact-btn:focus-visible::before,
.services-contact-button:hover::before,
.services-contact-button:focus-visible::before,
#servicesContactButton:hover::before,
#servicesContactButton:focus-visible::before{
  opacity:1;
}

.services-contact-btn:hover,
.services-contact-btn:focus-visible,
.services-contact-button:hover,
.services-contact-button:focus-visible,
#servicesContactButton:hover,
#servicesContactButton:focus-visible{
  transform:translateY(-1px);
  filter:
    drop-shadow(0 0 8px rgba(216,194,139,0.22))
    drop-shadow(0 0 18px rgba(216,194,139,0.10));
}

.services-contact-btn:active,
.services-contact-button:active,
#servicesContactButton:active{
  transform:translateY(0);
}

.services-contact-btn span,
.services-contact-button span,
#servicesContactButton span{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* =========================================================
   PAGE NAVIGATION
   ========================================================= */

.services-pagination{
  position:absolute;
  left:50%;
  bottom:clamp(54px, 7.4vw, 82px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  z-index:7;
  pointer-events:auto;
}

.services-dot,
.services-page-dot{
  appearance:none;
  -webkit-appearance:none;
  width:11px;
  height:11px;
  margin:0;
  padding:0;
  border:1px solid rgba(216,194,139,0.56);
  border-radius:999px;
  background:rgba(0,0,0,0.48);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.32),
    0 0 10px rgba(0,0,0,0.28);
  cursor:url("/assets/cursors/cursor-hover.cur") 12 12, pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.services-dot:hover,
.services-dot:focus-visible,
.services-page-dot:hover,
.services-page-dot:focus-visible{
  border-color:#d8c28b;
  background:rgba(216,194,139,0.18);
  box-shadow:
    0 0 8px rgba(216,194,139,0.22),
    0 0 18px rgba(216,194,139,0.12);
  transform:scale(1.08);
}

.services-dot.is-active,
.services-page-dot.is-active{
  border-color:#d8c28b;
  background:#b89650;
  box-shadow:
    0 0 10px rgba(184,150,80,0.38),
    0 0 22px rgba(184,150,80,0.18);
}

.services-swipe-hint{
  position:absolute;
  left:50%;
  top:clamp(12px, 1.9vw, 24px);
  transform:translateX(-50%);
  z-index:7;
  padding:0 14px;
  font-family:"NewTegomin", serif;
  font-size:clamp(11px, .9vw, 15px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.48);
  text-align:center;
  pointer-events:none;
}


/* =========================================================
   POINTER / INTERACTION SAFETY
   ========================================================= */

.services-frame .panel-shell,
.services-frame .panel-edge,
.services-frame .panel-corner{
  -webkit-user-drag:none;
  user-drag:none;
}

.services-frame img,
.services-frame video{
  -webkit-user-drag:none;
  user-drag:none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1280px){
  .services-video-wrap[data-video-slot="1"]{
    left:3%;
    top:7%;
    width:min(35%, 500px);
  }

  .services-video-wrap[data-video-slot="2"]{
    top:5%;
    width:min(38%, 560px);
  }

  .services-video-wrap[data-video-slot="3"]{
    right:3%;
    top:8%;
    width:min(34%, 490px);
  }

  .services-copy,
  .services-panel-copy{
    padding:
      clamp(168px, 23vh, 230px)
      clamp(20px, 3vw, 40px)
      clamp(118px, 16vh, 155px);
  }

  .services-title{
    font-size:clamp(30px, 3.5vw, 58px);
  }

  .services-text{
    font-size:clamp(12.5px, 0.98vw, 17px);
    max-width:min(86ch, 100%);
  }
}

@media (max-width:1100px){
  :root{
    --services-slice: clamp(84px, 10vw, 124px);
    --services-safe-left: clamp(38px, 5.2vw, 76px);
    --services-safe-top: clamp(36px, 4.6vw, 68px);
    --services-safe-right: clamp(36px, 5vw, 74px);
    --services-safe-bottom: clamp(38px, 4.8vw, 70px);
  }

  .services-video-wrap[data-video-slot="1"]{
    left:4%;
    top:6%;
    width:min(37%, 420px);
  }

  .services-video-wrap[data-video-slot="2"]{
    top:4%;
    width:min(40%, 470px);
  }

  .services-video-wrap[data-video-slot="3"]{
    right:4%;
    top:7%;
    width:min(36%, 400px);
  }

  .services-copy,
  .services-panel-copy{
    padding:
      clamp(148px, 21vh, 205px)
      clamp(18px, 3.2vw, 34px)
      clamp(110px, 15vh, 145px);
  }

  .services-title{
    max-width:min(16ch, 100%);
    font-size:clamp(28px, 3.4vw, 50px);
  }

  .services-text{
    font-size:clamp(12px, 1.15vw, 16px);
    line-height:1.4;
  }

  .services-pagination{
    bottom:clamp(48px, 7vw, 74px);
  }

  .services-contact-btn,
  .services-contact-button,
  #servicesContactButton{
    width:min(208px, 36vw);
  }
}

@media (orientation:portrait){
  :root{
    --services-slice: clamp(90px, 12.3vw, 132px);
    --services-safe-left: clamp(28px, 7vw, 64px);
    --services-safe-top: clamp(28px, 6.6vw, 62px);
    --services-safe-right: clamp(28px, 6.8vw, 62px);
    --services-safe-bottom: clamp(28px, 6.8vw, 64px);
    --services-contact-width: min(210px, 50vw);
  }

  .services-video-wrap{
    opacity:0.28;
    filter:
      brightness(0.52)
      saturate(0.82)
      blur(1px);
  }

  .services-video-wrap[data-video-slot="1"]{
    left:4%;
    top:4%;
    width:min(45%, 300px);
    transform:rotate(-3deg);
  }

  .services-video-wrap[data-video-slot="2"]{
    left:50%;
    top:2.5%;
    width:min(48%, 330px);
    transform:translateX(-50%);
  }

  .services-video-wrap[data-video-slot="3"]{
    right:4%;
    top:6%;
    width:min(44%, 290px);
    transform:rotate(3deg);
  }

  .services-copy,
  .services-panel-copy{
    justify-content:flex-start;
    padding:
      clamp(138px, 19vh, 180px)
      clamp(16px, 4vw, 26px)
      clamp(106px, 15vh, 132px);
  }

  .services-page-copy{
    gap:12px;
  }

  .services-title{
    font-size:clamp(26px, 6vw, 46px);
    max-width:min(14ch, 100%);
  }

  .services-text{
    font-size:clamp(11.5px, 1.9vw, 15px);
    line-height:1.36;
    max-width:min(42ch, 100%);
  }

  .services-pagination{
    bottom:clamp(44px, 10vw, 66px);
    gap:10px;
  }

  .services-dot,
  .services-page-dot{
    width:10px;
    height:10px;
  }
}

@media (orientation:portrait) and (max-aspect-ratio:0.52){
  :root{
    --services-slice: clamp(92px, 13vw, 132px);
    --services-safe-left: clamp(24px, 7.2vw, 56px);
    --services-safe-top: clamp(24px, 6.8vw, 56px);
    --services-safe-right: clamp(24px, 7vw, 56px);
    --services-safe-bottom: clamp(24px, 7vw, 58px);
    --services-contact-width: min(188px, 54vw);
  }

  .services-video-wrap[data-video-slot="1"]{
    left:2%;
    top:3%;
    width:min(46%, 250px);
  }

  .services-video-wrap[data-video-slot="2"]{
    top:2%;
    width:min(49%, 270px);
  }

  .services-video-wrap[data-video-slot="3"]{
    right:2%;
    top:5%;
    width:min(45%, 245px);
  }

  .services-copy,
  .services-panel-copy{
    padding:
      clamp(126px, 18vh, 164px)
      clamp(14px, 4vw, 22px)
      clamp(100px, 15vh, 124px);
  }

  .services-title{
    font-size:clamp(24px, 6.3vw, 40px);
  }

  .services-text{
    font-size:clamp(11px, 2vw, 14px);
    line-height:1.34;
  }
}

@media (max-height:820px){
  .services-copy,
  .services-panel-copy{
    padding-top:clamp(140px, 21vh, 190px);
    padding-bottom:clamp(102px, 15vh, 132px);
  }

  .services-text{
    font-size:clamp(12px, 0.96vw, 16px);
    line-height:1.34;
  }
}

@media (max-height:720px){
  .services-swipe-hint{
    display:none;
  }

  .services-video-wrap{
    opacity:0.24;
  }

  .services-copy,
  .services-panel-copy{
    padding-top:clamp(124px, 19vh, 160px);
    padding-bottom:92px;
  }

  .services-title{
    font-size:clamp(24px, 3.1vw, 42px);
  }

  .services-text{
    font-size:clamp(11px, 0.9vw, 14px);
    line-height:1.3;
  }

  .services-pagination{
    bottom:48px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .services-track{
    transition:none;
  }

  .services-dot,
  .services-page-dot,
  .services-contact-btn,
  .services-contact-button,
  #servicesContactButton,
  .services-contact-btn::before,
  .services-contact-button::before,
  #servicesContactButton::before{
    transition:none;
  }
}