*{box-sizing:border-box}
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --black:#050505;
  --white:#f5f5f5;
  --muted:rgba(255,255,255,.52);
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000 !important;color:var(--white);font-family:Inter,Arial,sans-serif}
button,a{font:inherit;color:inherit}
button{cursor:pointer}

.scene{position:relative;width:100vw;height:100svh;overflow:hidden;background:#000}
.scene::before{content:"";position:absolute;inset:0;background:#000;z-index:0;pointer-events:none}

.portrait{
  position:absolute;inset:0;
  background:url("assets/hero-bg.png") center/cover no-repeat;
  transform:translate3d(0,0,0);
  transition:transform 5.5s var(--ease);
  z-index:1;
  pointer-events:none;
}
.scene.open .portrait{transform:translate3d(22vw,0,0)}

.hero{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;
  padding-left:3.5vw;
  transition:opacity .35s ease,transform 1.3s var(--ease);
}
.scene.open .hero{opacity:0;transform:translateX(-30px);pointer-events:none}

.open{
  position:relative;z-index:21;pointer-events:auto;
  padding:17px 22px;border:1px solid rgba(255,255,255,.9);
  border-radius:18px;background:rgba(0,0,0,.28);
  backdrop-filter:blur(7px);
  text-transform:uppercase;font-size:14px;letter-spacing:.04em;
  transition:.35s var(--ease);
}
.open span{margin-left:18px;font-size:20px}
.open:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}

.back{
  position:absolute;top:5.5vh;left:6vw;z-index:10;
  border:0;background:none;font-size:43px;
  opacity:0;transform:translateX(-20px);pointer-events:none;
  transition:opacity .45s .9s var(--ease),transform .45s .9s var(--ease);
}
.scene.open .back{opacity:1;transform:none;pointer-events:auto}
.back:hover{transform:translateX(-5px)!important}

.portfolio{
  position:absolute;inset:0;z-index:5;background:transparent;
  opacity:0;pointer-events:none;
  transition:opacity .45s 1.35s ease;
}
.scene.open .portfolio{opacity:1;pointer-events:auto}

.portfolio-head{
  position:absolute;left:3.5vw;top:17vh;width:42vw;z-index:8;
  pointer-events:none;
}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:13px}
h1{margin:0;font-size:clamp(55px,5.5vw,86px);font-weight:500;letter-spacing:-.055em;line-height:.95}
.portfolio-head p{margin:19px 0 0;color:var(--muted);font-size:14px}

.project-window{
  position:absolute;
  left:3.5vw;
  top:40vh;
  width:40vw;
  height:45vh;
  overflow:hidden;
  z-index:7;
  /*
    The right edge is deliberately kept before the portrait.
    Cards can never cross into the silhouette zone.
  */
}
.projects{
  width:100%;height:100%;
  position:relative;
  transition:transform .95s var(--ease);
}
.project{
  position:absolute;left:0;top:0;
  width:100%;height:100%;
  opacity:0;
  transform:translateY(90px) scale(.985);
  transition:
    opacity .75s var(--ease),
    transform .95s var(--ease);
  pointer-events:none;
}
.project.active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.project-image{
  width:100%;
  height:calc(100% - 75px);
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.project-info{
  height:75px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.project-info h2{margin:0 0 7px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.project-info p{margin:0;font-size:12px;color:var(--muted)}
.view{
  display:inline-flex;align-items:center;gap:14px;
  padding:10px 16px;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;text-decoration:none;font-size:10px;letter-spacing:.07em;
  transition:.3s var(--ease);
}
.view:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.view span{font-size:17px}

.fake-preview{position:relative;width:100%;height:100%;overflow:hidden;filter:grayscale(1)}
.cafe{background:linear-gradient(145deg,#242424,#858585)}
.fake-nav{position:absolute;left:7%;top:8%;font-size:8px;letter-spacing:.18em}
.fake-title{position:absolute;left:12%;top:36%;font-family:Georgia,serif;font-size:32px}
.fake-sub{position:absolute;left:12%;top:49%;font-size:8px}
.fake-cup{position:absolute;right:18%;bottom:5%;font-size:130px;opacity:.45}
.beauty{background:linear-gradient(110deg,#090909 0%,#111 53%,#555 100%)}
.beauty-copy{position:absolute;left:11%;top:28%;font-family:Georgia,serif;font-size:29px;line-height:1.05}
.beauty-person{position:absolute;right:8%;bottom:-15%;width:38%;height:92%;border-radius:48% 48% 0 0;background:linear-gradient(120deg,#777,#ddd 48%,#222);opacity:.72}
.minimal{background:#d8d8d8;color:#111}
.minimal-word{position:absolute;left:10%;top:10%;font-size:12px;letter-spacing:.2em}
.minimal-line{position:absolute;left:10%;right:10%;top:27%;height:1px;background:#222}
.minimal-copy{position:absolute;left:10%;bottom:14%;font-size:34px;letter-spacing:-.05em}
.dark{background:#080808}
.dark-title{position:absolute;left:10%;top:20%;font-size:40px;line-height:.95}
.dark-circle{position:absolute;right:10%;top:10%;width:45%;aspect-ratio:1;border:1px solid #888;border-radius:50%}

.counter{
  position:absolute;left:3.5vw;bottom:6vh;z-index:8;
  color:rgba(255,255,255,.45);font-size:11px;letter-spacing:.12em;
}
.counter #current{color:#fff}
.wheel-hint{
  position:absolute;right:5vw;bottom:6vh;z-index:8;
  color:rgba(255,255,255,.3);font-size:9px;letter-spacing:.2em;
}

/* Make the transition sequential: the project cannot appear while the portrait is moving. */
.scene.open .portfolio-head,
.scene.open .project-window,
.scene.open .counter,
.scene.open .wheel-hint{transition-delay:1.35s}

/* Mobile */
@media(max-width:700px){
  .portrait{display:none;background-size:auto 100%;background-position:50% center}
  .scene.open .portrait{transform:translate3d(31vw,0,0)}
  .hero{padding-left:7vw}
  .open{font-size:10px;padding:14px 15px;border-radius:14px}
  .open span{margin-left:10px}
  .back{left:7vw;top:3vh;font-size:34px}
  .portfolio-head{left:7vw;top:13vh;width:62vw}
  h1{font-size:47px}
  .portfolio-head p{font-size:11px}
  .project-window{left:7vw;top:35vh;width:62vw;height:45vh}
  .project-info{height:82px;align-items:flex-start;padding-top:12px}
  .project-info h2{font-size:15px}
  .project-info p{font-size:10px}
  .view{font-size:8px;padding:8px 11px}
  .wheel-hint{display:none}
  .counter{left:7vw;bottom:4vh}
}


/* =========================================================
   PROJECT DETAIL
   This layer is independent from the portfolio slider.
   ========================================================= */

.project-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  background:#000;
  color:#fff;
  overflow:hidden;
}

.project-overlay.open{
  display:block;
  animation:detailIn .65s cubic-bezier(.22,1,.36,1) both;
}

@keyframes detailIn{
  from{opacity:0}
  to{opacity:1}
}

.project-close{
  position:absolute;
  top:42px;
  left:48px;
  z-index:120;
  width:58px;
  height:58px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:58px;
  font-weight:200;
  line-height:.8;
  padding:0;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}

.project-close:hover{
  transform:rotate(90deg) scale(1.04);
}

.detail-layout{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 32%;
  gap:4vw;
  padding:7vh 7vw 7vh 13vw;
}

.design-view{
  min-width:0;
  height:86vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}

.design-image-wrap{
  width:min(100%,820px);
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  overscroll-behavior:contain;
  background:#000;
  border-radius:0;
  scroll-behavior:smooth;
}

.design-image-wrap::-webkit-scrollbar{
  display:none;
}

.design-image-wrap img{
  width:100%;
  height:auto;
  display:block;
}

.detail-side{
  position:relative;
  height:86vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 2vw 0 3vw;
  isolation:isolate;
}

.detail-side::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-7vh -3vw;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.detail-label{
  margin-bottom:18px;
  color:rgba(255,255,255,.42);
  font-size:10px;
  letter-spacing:.2em;
}

.detail-side h2{
  margin:0 0 26px;
  font-size:clamp(42px,4.5vw,76px);
  line-height:.94;
  font-weight:400;
  letter-spacing:-.055em;
}

.detail-description{
  max-width:340px;
  margin:0 0 34px;
  color:rgba(255,255,255,.52);
  font-size:13px;
  line-height:1.7;
}

.visit-site{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:28px;
  padding:18px 27px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.04em;
  transition:background .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
}

.visit-site:hover{
  background:#fff;
  color:#000;
  transform:translateY(-2px);
}

.visit-site span{
  font-size:19px;
}

.device-switch{
  display:flex;
  gap:18px;
  margin-top:48px;
}

.device-button{
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.34);
  font-size:8px;
  letter-spacing:.12em;
  cursor:pointer;
  transition:color .3s ease,transform .3s ease;
}

.device-button:hover,
.device-button.active{
  color:#fff;
}

.device-button:hover{
  transform:translateY(-2px);
}

.device-icon{
  position:relative;
  display:block;
  border:1px solid currentColor;
}

.desktop-icon{
  width:42px;
  height:28px;
  border-radius:2px;
}

.desktop-icon::after{
  content:"";
  position:absolute;
  width:9px;
  height:1px;
  background:currentColor;
  left:50%;
  bottom:-5px;
  transform:translateX(-50%);
}

.mobile-icon{
  width:18px;
  height:31px;
  border-radius:3px;
}

.mobile-icon::before{
  content:"";
  position:absolute;
  width:5px;
  height:1px;
  background:currentColor;
  top:3px;
  left:50%;
  transform:translateX(-50%);
}

.mobile-icon::after{
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  border:1px solid currentColor;
  border-radius:50%;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
}

.scroll-hint{
  margin-top:auto;
  padding-bottom:3px;
  color:rgba(255,255,255,.36);
  font-size:9px;
  line-height:1.55;
  letter-spacing:.15em;
}

.scroll-hint span{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:20px;
}

@media(max-width:900px){
  .detail-layout{
    grid-template-columns:minmax(0,1fr) 34%;
    padding-left:9vw;
    padding-right:5vw;
    gap:3vw;
  }

  .detail-side h2{
    font-size:clamp(34px,5vw,58px);
  }
}

@media(max-width:700px){

  .project-close{
    top:20px;
    left:22px;
    font-size:45px;
  }

  .detail-layout{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:72px 6vw 25px;
    overflow:hidden;
  }

  .design-view{
    width:100%;
    height:58vh;
    order:1;
  }

  .design-image-wrap{
    width:100%;
    max-width:430px;
    margin:auto;
  }

  .detail-side{
    position:relative;
    height:auto;
    flex:1;
    justify-content:flex-start;
    padding:0 14px 0;
    overflow:hidden;
  }

  .detail-side::before{
    inset:-14px -6vw;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }

  .detail-label{
    margin-bottom:8px;
  }

  .detail-side h2{
    margin-bottom:14px;
    font-size:27px;
    line-height:1;
    white-space:nowrap;
    letter-spacing:-.055em;
  }

  .detail-description{
    display:none;
  }

  .visit-site{
    padding:12px 18px;
    font-size:10px;
  }

  .device-switch{
    margin-top:24px;
    gap:28px;
  }

  .scroll-hint{
    position:absolute;
    right:6vw;
    bottom:125px;
    margin:0;
    text-align:right;
    line-height:1.55;
  }
}


/* Project-card CTA must always be clickable. */
.project-info{
  position:relative;
  z-index:20;
}
.project-info .view{
  position:relative;
  z-index:21;
  pointer-events:auto;
  cursor:pointer;
}


/* Back navigation: UI disappears instantly, portrait returns smoothly. */
.scene.closing .portfolio{
  opacity:0 !important;
  transition:none !important;
  pointer-events:none !important;
}

.scene.closing .back{
  opacity:0 !important;
  transition:none !important;
  pointer-events:none !important;
}

.scene.closing .hero{
  opacity:0 !important;
  transition:none !important;
}