/* ==========================================================================
   IntoMines — Homepage Studio Transformation
   Raw collector photograph -> refined studio presentation.
   Homepage only. Existing Studio services remain a separate approved component.
   ========================================================================== */

.im-studio-transform{
  --im-studio-surface:#f8f4ef;
  position:relative;
  min-height:max(720px,92svh);
  display:flex;
  align-items:center;
  overflow:clip;
  background:var(--im-home-ivory,#F9F5F1);
  color:var(--im-archive-navy,#042038);
  border-top:1px solid rgba(4,32,56,.07);
  border-bottom:1px solid rgba(4,32,56,.07);
  isolation:isolate;
}

.im-studio-transform__layout{
  width:100%;
  display:grid;
  grid-template-columns:minmax(260px,25%) minmax(0,75%);
  gap:clamp(38px,4vw,70px);
  align-items:center;
  padding-top:clamp(72px,6vw,110px);
  padding-bottom:clamp(64px,5vw,92px);
}

.im-studio-transform__intro{
  position:relative;
  z-index:20;
  align-self:center;
  max-width:390px;
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity 800ms var(--im-ease-out),transform 800ms var(--im-ease-out);
}

.im-studio-transform.is-inview .im-studio-transform__intro{
  opacity:1;
  transform:none;
}

.im-studio-transform__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  color:var(--im-archive-navy);
  font:600 .71rem/1.25 var(--im-font-functional);
  letter-spacing:.2em;
  text-transform:uppercase;
}

.im-studio-transform__eyebrow::after{
  content:"";
  width:34px;
  height:1px;
  background:var(--im-antique-brass);
}

.im-studio-transform__intro h2{
  margin:0;
  max-width:8.8ch;
  color:var(--im-archive-navy);
  font:400 clamp(3rem,4vw,4.25rem)/.96 var(--im-font-editorial);
  letter-spacing:-.045em;
}

.im-studio-transform__body{
  max-width:32ch;
  margin:23px 0 0;
  color:rgba(4,32,56,.78);
  font:400 clamp(.96rem,.96vw,1.04rem)/1.58 var(--im-font-functional);
}

.im-studio-transform__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:50px;
  margin-top:28px;
  padding:0 2px 0 0;
  color:var(--im-archive-navy);
  font:600 .73rem/1 var(--im-font-functional);
  letter-spacing:.15em;
  text-decoration:none;
  text-transform:uppercase;
}

.im-studio-transform__cta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:1px;
  width:calc(100% - 52px);
  height:1px;
  background:var(--im-antique-brass);
  transform-origin:left center;
  transition:transform 420ms var(--im-ease-out);
}

.im-studio-transform__cta-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(165,138,97,.78);
  border-radius:50%;
  transition:transform 420ms var(--im-ease-out),background-color 420ms var(--im-ease-out);
}

.im-studio-transform__cta-mark svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.im-studio-transform__cta:hover::after,
.im-studio-transform__cta:focus-visible::after{transform:scaleX(1.08)}

.im-studio-transform__cta:hover .im-studio-transform__cta-mark,
.im-studio-transform__cta:focus-visible .im-studio-transform__cta-mark{
  transform:translate3d(5px,0,0);
  background:rgba(165,138,97,.06);
}

.im-studio-transform__experience{
  --studio-depth-x:0px;
  --studio-depth-y:0px;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(142px,12vw,174px);
  gap:clamp(18px,2vw,34px);
  align-items:end;
  min-width:0;
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity 900ms 100ms var(--im-ease-out),transform 900ms 100ms var(--im-ease-out);
}

.im-studio-transform.is-inview .im-studio-transform__experience{
  opacity:1;
  transform:none;
}

.im-studio-transform__compare-wrap{
  min-width:0;
  transform:translate3d(var(--studio-depth-x),var(--studio-depth-y),0);
  transition:transform 180ms linear;
}

.im-studio-compare{
  --im-studio-split:45%;
  position:relative;
  width:100%;
  height:clamp(540px,64vh,690px);
  min-height:0;
  overflow:hidden;
  background:var(--im-studio-surface);
  border:1px solid rgba(4,32,56,.10);
  box-shadow:0 26px 60px rgba(7,20,31,.10);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  cursor:ew-resize;
}

.im-studio-compare__result,
.im-studio-compare__raw{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.im-studio-compare__result{
  background:#f8f4ef;
}

.im-studio-compare__raw{
  z-index:2;
  width:100%;
  border-right:0;
  background:#c7c1b9;
  clip-path:inset(0 calc(100% - var(--im-studio-split)) 0 0);
  will-change:clip-path;
}

.im-studio-compare__raw-image,
.im-studio-compare__result-image{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
}

.im-studio-compare__raw-image{
  object-fit:cover;
  object-position:50% 58%;
  transform:scale(1.025);
}

.im-studio-compare__result-image{
  object-fit:contain;
  object-position:center 52%;
  opacity:0;
  transform:scale(.965);
  transition:opacity 420ms ease;
}

.im-studio-compare__result-image.is-active{opacity:1}

.im-studio-compare__divider{
  position:absolute;
  z-index:8;
  top:0;
  bottom:0;
  left:var(--im-studio-split);
  width:1px;
  background:linear-gradient(to bottom,rgba(165,138,97,.36),rgba(4,32,56,.68) 26%,rgba(4,32,56,.68) 74%,rgba(165,138,97,.36));
  transform:translateX(-.5px);
  pointer-events:none;
  transition:background-color 260ms ease;
}

.im-studio-compare__handle{
  position:absolute;
  left:50%;
  top:52%;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(165,138,97,.72);
  border-radius:50%;
  background:rgba(249,245,241,.96);
  color:var(--im-archive-navy);
  box-shadow:0 8px 26px rgba(7,20,31,.12);
  transform:translate(-50%,-50%);
  transition:transform 280ms var(--im-ease-out),border-color 280ms ease,box-shadow 280ms ease;
}

.im-studio-compare:hover .im-studio-compare__handle,
.im-studio-compare:focus-within .im-studio-compare__handle{
  transform:translate(-50%,-50%) scale(1.06);
  border-color:var(--im-antique-brass);
  box-shadow:0 10px 30px rgba(7,20,31,.16);
}

.im-studio-compare__handle svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.im-studio-compare__range{
  position:absolute;
  z-index:9;
  width:1px;
  height:1px;
  left:var(--im-studio-split);
  top:52%;
  opacity:.001;
  pointer-events:none;
}

.im-studio-compare__range:focus-visible{
  outline:none;
}

.im-studio-compare__label{
  position:absolute;
  z-index:7;
  bottom:17px;
  padding:8px 10px 7px;
  background:rgba(249,245,241,.86);
  color:var(--im-archive-navy);
  backdrop-filter:blur(6px);
  font:600 .59rem/1 var(--im-font-functional);
  letter-spacing:.17em;
  pointer-events:none;
}

.im-studio-compare__label--raw{left:17px}
.im-studio-compare__label--result{right:17px}

.im-studio-transform__caption{
  margin:12px 0 0;
  color:rgba(4,32,56,.52);
  font:500 .67rem/1.35 var(--im-font-functional);
  letter-spacing:.10em;
}

.im-studio-treatments{
  align-self:end;
  padding-bottom:27px;
}

.im-studio-treatments__heading{
  display:grid;
  gap:13px;
  margin-bottom:13px;
}

.im-studio-treatments__heading>span{
  color:var(--im-archive-navy);
  font:600 .59rem/1.2 var(--im-font-functional);
  letter-spacing:.17em;
}

.im-studio-treatments__modes{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
}

.im-studio-treatments__mode{
  position:relative;
  padding:0 0 5px;
  border:0;
  background:transparent;
  color:rgba(4,32,56,.48);
  cursor:pointer;
  font:600 .56rem/1 var(--im-font-functional);
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:color 240ms ease;
}

.im-studio-treatments__mode::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--im-antique-brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 280ms var(--im-ease-out);
}

.im-studio-treatments__mode.is-active,
.im-studio-treatments__mode:hover,
.im-studio-treatments__mode:focus-visible{color:var(--im-archive-navy)}

.im-studio-treatments__mode.is-active::after{transform:scaleX(1)}

.im-studio-treatments__frames{
  display:grid;
  gap:13px;
}

.im-studio-treatment-card{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-bottom:1px solid rgba(4,32,56,.10);
  background:transparent;
  color:var(--im-archive-navy);
  cursor:pointer;
  text-align:left;
  transform:translate3d(0,0,0);
  transition:transform 380ms var(--im-ease-out),border-color 280ms ease,box-shadow 380ms var(--im-ease-out);
}

.im-studio-treatment-card__image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
}

.im-studio-treatment-card span{
  display:block;
  padding:8px 0 7px;
  font:600 .56rem/1 var(--im-font-functional);
  letter-spacing:.13em;
}

.im-studio-transform.is-inview .im-studio-treatment-card:first-child{
  animation:imStudioTreatmentFloatA 15s ease-in-out infinite alternate;
}

.im-studio-transform.is-inview .im-studio-treatment-card:last-child{
  animation:imStudioTreatmentFloatB 17s ease-in-out infinite alternate;
}

.im-studio-treatment-card:hover,
.im-studio-treatment-card:focus-visible,
.im-studio-treatment-card.is-active{
  transform:translate3d(0,-4px,0);
  border-color:var(--im-antique-brass);
  box-shadow:0 14px 30px rgba(7,20,31,.10);
}

@keyframes imStudioTreatmentFloatA{
  from{translate:0 -1px}
  to{translate:0 2px}
}

@keyframes imStudioTreatmentFloatB{
  from{translate:0 2px}
  to{translate:0 -1px}
}

@media(max-width:1100px){
  .im-studio-transform{
    min-height:0;
  }

  .im-studio-transform__layout{
    grid-template-columns:1fr;
    gap:42px;
    padding-top:clamp(76px,8vw,96px);
  }

  .im-studio-transform__intro{
    max-width:660px;
  }

  .im-studio-transform__intro h2{
    max-width:10ch;
  }

  .im-studio-transform__experience{
    grid-template-columns:minmax(0,1fr) clamp(145px,17vw,180px);
  }

  .im-studio-compare{
    height:clamp(500px,62vw,650px);
  }
}

@media(max-width:820px){
  .im-studio-transform__layout{
    padding-top:68px;
    padding-bottom:54px;
    gap:34px;
  }

  .im-studio-transform__intro{
    max-width:560px;
  }

  .im-studio-transform__intro h2{
    font-size:clamp(2.9rem,8vw,4.1rem);
  }

  .im-studio-transform__experience{
    display:block;
  }

  .im-studio-compare{
    width:100%;
    height:clamp(500px,68svh,650px);
  }

  .im-studio-treatments{
    padding:22px 0 0;
  }

  .im-studio-treatments__heading{
    grid-template-columns:1fr auto;
    align-items:end;
    gap:18px;
    margin-bottom:12px;
  }

  .im-studio-treatments__frames{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .im-studio-treatment-card__image{
    aspect-ratio:4/5;
  }

  .im-studio-transform__compare-wrap{
    transform:none!important;
  }
}

@media(max-width:560px){
  .im-studio-transform__layout{
    padding-top:58px;
    padding-bottom:46px;
    gap:28px;
  }

  .im-studio-transform__eyebrow{
    margin-bottom:17px;
    font-size:.66rem;
  }

  .im-studio-transform__intro h2{
    max-width:9.4ch;
    font-size:clamp(2.7rem,12.2vw,3.55rem);
  }

  .im-studio-transform__body{
    max-width:34ch;
    margin-top:18px;
    font-size:.95rem;
    line-height:1.52;
  }

  .im-studio-transform__cta{
    margin-top:20px;
  }

  .im-studio-compare{
    width:100%;
    height:clamp(490px,64svh,610px);
  }

  .im-studio-compare__raw-image{
    object-position:50% 58%;
    transform:scale(1.02);
  }

  .im-studio-compare__result-image{
    transform:scale(.985);
  }

  .im-studio-compare__handle{
    width:44px;
    height:44px;
  }

  .im-studio-compare__label{
    bottom:12px;
    padding:7px 8px 6px;
    font-size:.53rem;
    letter-spacing:.13em;
  }

  .im-studio-compare__label--raw{left:11px}
  .im-studio-compare__label--result{right:11px}

  .im-studio-transform__caption{
    margin-top:10px;
    font-size:.61rem;
  }

  .im-studio-treatments{
    padding-top:19px;
  }

  .im-studio-treatments__heading{
    display:block;
    margin-bottom:11px;
  }

  .im-studio-treatments__heading>span{
    display:block;
    margin-bottom:11px;
  }

  .im-studio-treatments__modes{
    gap:14px;
  }

  .im-studio-treatment-card span{
    padding-top:7px;
  }
}

@media(hover:none){
  .im-studio-treatment-card:hover{
    transform:none;
    box-shadow:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .im-studio-transform__intro,
  .im-studio-transform__experience{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .im-studio-treatment-card{
    animation:none!important;
    transition:none!important;
  }

  .im-studio-compare__result-image,
  .im-studio-compare__handle,
  .im-studio-transform__cta::after,
  .im-studio-transform__cta-mark{
    transition:none!important;
  }

  .im-studio-transform__compare-wrap{
    transform:none!important;
  }
}