@font-face {
  font-family: "JoustFont";
  src: url("fonts/avokazt.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html,
body {
    
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
font-family: "JoustFont", Arial, Helvetica, sans-serif;
  
}

html,
body,
.logo,
.logo-svg,
.logo-svg text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}


/* JOUST frosted masked logo — colours/videos show through the letters */
.logo {
  position: fixed;
  top: 0vw;
  left: -0.6vw;
  width: 50vw;
  height: 14.2vw;
  display: block;
  pointer-events: auto;
  z-index: 1000;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* This creates the actual frosted JOUST letters */
.logo::before {
  content: "";
  position: absolute;
  inset: 0;

  /* The frosted glass effect */
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(1.8) contrast(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) contrast(1.08);

  /* Very subtle polish, not a grey outline */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));

  /* This masks the frosted effect into the word JOUST only */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 260' preserveAspectRatio='none'%3E%3Ctext x='-60' y='225' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 260' preserveAspectRatio='none'%3E%3Ctext x='-60' y='225' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
}

/* Optional: tiny highlight so it stays visible over pale work */
.logo::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.183);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 260' preserveAspectRatio='none'%3E%3Ctext x='-60' y='225' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 260' preserveAspectRatio='none'%3E%3Ctext x='-60' y='225' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
}

.info-button {
  position: fixed;
  top: 90px;
  right: 92px;
  appearance: none;
  border: 0;
  background: transparent;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 200px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  padding: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  pointer-events: auto;
  mix-blend-mode: normal;
  z-index: 1001;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Only moves when hovered */
.info-button:hover {
  transform: scale(1.12) rotate(12deg);
  opacity: 0.85;
}

/* When info panel is open */
.info-button.is-open {
  opacity: 0.55;
}

.info-button.is-open {
  transform: rotate(45deg);
}

.info-button.is-open {
  transform: rotate(45deg);
}



/* Sliding studio info panel */
.info-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 44vw;
  min-width: 380px;
  height: 100vh;
  background: #f4f1ea;
  color: #111;
  z-index: 900;
  padding: 86px 24px 24px;
  transform: translateX(calc(100% + 20px));
  transition: transform 0.35s ease;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.info-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.info-panel.is-open {
  transform: translateX(0);
}

.info-content {
  max-width: 620px;
}

.info-content p {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 30px;
}

.info-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Main scrolling work layout */
.work-scroll {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0;
  display: flex;
  gap: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.work-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.work-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.work-item {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

.work-item img,
.work-item video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

.work-item.smaller img {
  width: 70%;
  margin-left: auto;
  margin-right: 0;
}

.work-item.small img {
  width: 70%;
  margin-left: 0;
  margin-right: auto;
}




/* Subtle hover */
.work-item img,
.work-item video {
  transition: opacity 0.25s ease;
}

.work-item:hover img,
.work-item:hover video {
  opacity: 0.92;
}

/* FINAL MOBILE OVERRIDE — all work becomes full width */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .work-scroll {
    display: block !important;
    width: 100% !important;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 !important;
    margin: 0 !important;
  }

  .work-column {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .work-item {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  .work-item img,
  .work-item video {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    object-fit: contain !important;
  }

 

/* Hide mobile play icon flash while videos are loading */
video {
  opacity: 0;
  transition: opacity 0.2s ease;
}

video.is-playing {
  opacity: 1;
}

/* Make all images and videos more vivid/contrasty */
.work-item img,
.work-item video {
  filter: contrast(1.1) saturate(1.01) brightness(.98);
}

/* Cursor-following project title with frosted text background */
.cursor-title {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(14px, 14px);
  z-index: 3000;
  pointer-events: none;

  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  padding: 6px 8px;
  border-radius: 3px;

  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);

  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);

  opacity: 0;
  transition: opacity 0.15s ease;
}

.cursor-title.is-visible {
  opacity: 1;
}

/* Hide normal cursor on desktop */
body,
a,
button,
.work-item,
.work-item img,
.work-item video {
  cursor: none;
}

/* Custom star cursor */
.star-cursor {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 4000;
  pointer-events: none;

  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1;

  mix-blend-mode: difference;
}

.work-item.video-smaller {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.work-item.video-smaller video {
  width: 45%;
  height: auto;
}


.work-item.video-small {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.work-item.video-small video {
  width: 50%;
  height: auto;
}

img,
video {
  -webkit-user-drag: none;
  user-select: none;
}

/* TRUE FINAL MOBILE FIX — overrides every custom desktop size */
@media (max-width: 700px) {
  .work-scroll {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .work-column {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .work-item,
  .work-item.small,
  .work-item.smaller,
  .work-item.video-small,
  .work-item.video-smaller,
  .work-item.video-100,
  .work-item.video-90,
  .work-item.video-80,
  .work-item.video-75,
  .work-item.video-70,
  .work-item.video-60,
  .work-item.align-left,
  .work-item.align-center,
  .work-item.align-right,
  .work-item.feature-left,
  .work-item.feature-right {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    justify-content: initial !important;
    align-items: initial !important;
  }

  .work-item img,
  .work-item video,
  .work-item.small img,
  .work-item.small video,
  .work-item.smaller img,
  .work-item.smaller video,
  .work-item.video-small img,
  .work-item.video-small video,
  .work-item.video-smaller img,
  .work-item.video-smaller video,
  .work-item.video-100 img,
  .work-item.video-100 video,
  .work-item.video-90 img,
  .work-item.video-90 video,
  .work-item.video-80 img,
  .work-item.video-80 video,
  .work-item.video-75 img,
  .work-item.video-75 video,
  .work-item.video-70 img,
  .work-item.video-70 video,
  .work-item.video-60 img,
  .work-item.video-60 video,
  .work-item.align-left img,
  .work-item.align-left video,
  .work-item.align-center img,
  .work-item.align-center video,
  .work-item.align-right img,
  .work-item.align-right video,
  .work-item.feature-left img,
  .work-item.feature-left video,
  .work-item.feature-right img,
  .work-item.feature-right video {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    object-fit: contain !important;
  }
}
/* Info star — same frosted transparent style as JOUST logo */
.info-button {
  position: fixed;
  top: 90px;
  right: 92px;
  width: 90px;
  height: 90px;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1001;
  overflow: visible;
}

/* Hide the normal text star */
.star-fallback {
  opacity: 0;
}

/* Frosted star body */
.info-button::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(1.8) contrast(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) contrast(1.08);

  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 2 L60 38 L98 50 L60 62 L50 98 L40 62 L2 50 L40 38 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 2 L60 38 L98 50 L60 62 L50 98 L40 62 L2 50 L40 38 Z' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

/* Subtle darker layer, like your JOUST logo highlight/shadow */
.info-button::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.18);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 2 L60 38 L98 50 L60 62 L50 98 L40 62 L2 50 L40 38 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 2 L60 38 L98 50 L60 62 L50 98 L40 62 L2 50 L40 38 Z' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.info-button:hover {
  transform: scale(1.08) rotate(8deg);
}

.info-button.is-open {
  opacity: 0.55;
  transform: rotate(45deg);
}