/* ==========================================================================
   ISHLVLSTUDIOS — Homepage Mockup 02 — ORBIT
   The orbit IS the homepage. One viewport. White. Black. Video.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-1:#6b6b6b;
  --gray-2:#b3b3b3;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html,body{
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  background:var(--white);
  color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:fixed;
  inset:0;
  width:100%;
}
img{display:block;max-width:100%;}

/* ==========================================================================
   TOP BAR — identity + division navigation
   ========================================================================== */
.top-bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:calc(34px + env(safe-area-inset-top)) calc(40px + env(safe-area-inset-right)) 34px calc(40px + env(safe-area-inset-left));
  pointer-events:none;
}
.top-bar > *{pointer-events:auto;}

.mark{flex:0 0 auto; display:block;}
.mark:focus-visible{outline:2px solid var(--black); outline-offset:4px;}
.mark-logo{height:88px;width:auto;display:block;}

.division-nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:32px;
  row-gap:10px;
}
.division-nav a{
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
  text-decoration:none;
  opacity:.72;
  transition:opacity .35s var(--ease);
}
.division-nav a:hover,
.division-nav a:focus-visible{
  opacity:1;
}
.division-nav a:focus-visible{
  outline:2px solid var(--black);
  outline-offset:4px;
}

.corner-id{
  position:fixed;
  bottom:calc(22px + env(safe-area-inset-bottom));left:calc(32px + env(safe-area-inset-left));
  z-index:20;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-2);
  display:flex;gap:8px;
}
.corner-dot{color:var(--gray-2);}

.utility-nav{
  position:fixed;
  bottom:calc(22px + env(safe-area-inset-bottom));right:calc(32px + env(safe-area-inset-right));
  z-index:20;
  display:flex;
  gap:28px;
}
.utility-nav a{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-2);
  text-decoration:none;
  transition:color .35s var(--ease);
}
.utility-nav a:hover,
.utility-nav a:focus-visible{color:var(--black);}
.utility-nav a:focus-visible{
  outline:2px solid var(--black);
  outline-offset:4px;
}

/* ==========================================================================
   ORBIT VIEWPORT
   ========================================================================== */
.orbit-viewport{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.orbit-stage{
  position:relative;
  width:100%;
  height:min(64vh,640px);
  perspective:2200px;
  perspective-origin:50% 50%;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.orbit-stage.is-dragging{cursor:grabbing;}

.orbit-world{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-soft);
  will-change:transform;
}

.orbit-card{
  position:absolute;
  top:50%;left:50%;
  will-change:transform,opacity;
  transform-style:preserve-3d;
}
.orbit-card video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  pointer-events:none;
}
.orbit-card-inner{
  width:100%;height:100%;
  transform:translate(-50%,-50%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.22);
  transition:box-shadow .4s var(--ease);
}
.orbit-card.is-focus .orbit-card-inner{
  box-shadow:0 40px 90px -14px rgba(0,0,0,.32);
}

/* ==========================================================================
   FOCUS CAPTION
   ========================================================================== */
.focus-caption{
  margin-top:-32px; /* was 38px — moved up ~70px to sit closer to the active orbit item */
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:50px;
  pointer-events:none;
}
.fc-division{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-1);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
}
.fc-project{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:19px;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft) .05s,transform .5s var(--ease-soft) .05s;
}
.focus-caption.is-in .fc-division,
.focus-caption.is-in .fc-project{opacity:1;transform:translateY(0);}

.hint{
  margin:22px 0 0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-2);
  opacity:1;
  transition:opacity 1s var(--ease-soft);
}
.hint.is-hidden{opacity:0;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .orbit-stage{height:min(56vh,520px);}
  .mark-logo{height:64px;}
  .division-nav{gap:22px;}
  .division-nav a{font-size:12px;}
}

@media (max-width:680px){
  .top-bar{
    flex-direction:column;
    align-items:flex-start;
    padding:22px 20px;
    gap:16px;
  }
  .mark-logo{height:48px;}
  .division-nav{
    justify-content:flex-start;
    gap:16px 20px;
    width:100%;
  }
  .division-nav a{font-size:11px;letter-spacing:.08em;}
  .corner-id{bottom:16px;left:20px;font-size:9px;}
  .utility-nav{bottom:16px;right:20px;gap:16px;}
  .utility-nav a{font-size:9px;}
  .orbit-stage{height:min(46vh,420px);}
  .fc-project{font-size:16px;}
  .focus-caption{margin-top:-48px;}
}

@media (max-height:640px){
  .orbit-stage{height:56vh;}
  .focus-caption{margin-top:-54px;}
  .hint{margin-top:10px;}
}