/* --- kill legacy horizontal styles that break pinning --- */
/* .scroll-container { display:block !important; overflow:visible !important; height:auto !important; } */
/* .section        { min-width:auto !important; min-height:auto !important; height:auto !important; overflow:visible !important; } */

/* page must scroll vertically */
html, body { 
    height: 100%; 
}
body { 
    overflow-y: auto; 
    overflow-x: hidden; 
    background-color: #FBFCFF;
}

/* ===== Horizontal strip ===== */
.hs-container{
  position: relative;
  /* height is set by JS so the page can scroll the full horizontal distance */
  overflow: visible;
}
.hs-track{
  position: sticky;         /* <- pins the track */
  top: 0;
  left: 0;
  height: 100vh;            /* one viewport tall while pinned */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.panel{
  flex: 0 0 100vw;          /* exactly one viewport wide each */
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

/* vertical sections between horizontal strips */
.v-section{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
}

/* Helpers */
img.fill {
  width: 100%;
  height: 90vh;
  object-fit: contain;
  border-radius: 14px !important;
  /* box-shadow:0 20px 60px rgba(0,0,0,.16); */
}

.scale-on-view {
  transform-origin: 50% 50%;
  transform: scale(0.98);          /* slightly smaller at edges */
  will-change: transform;          /* smoother on scroll */
  border-radius: 14px !important;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .hs-container { height: auto; }
  .panel       { height: auto; min-height: 80vh; }
}

/* HERO SECTION */
.panel.hero-band{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  background: #FBFCFF;               /* soft warm white like the ref */
  overflow: hidden;
}

.panel.hero-band h1{
  margin: clamp(24px, 6vh, 56px) 0 0 0;   /* top margin only */
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 0.8;
  color: #212121;                        /* deep black */
  font-size: clamp(3.5rem, 10vw, 16rem);
  text-align: center !important;
  z-index: 1;
  margin-top: 8rem;
}

/* body copy under the title */
.panel.hero-band p{
  max-width: 85ch;
  /* margin: clamp(8px, 1.5vh, 18px) auto 0; */
  text-align: center;
  color: #212121;
  font-weight: 300;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  z-index: 2;
}

/* images sit on top of the background, offset from corners */
.panel.hero-band img{
  position: absolute;
  display: block;
  aspect-ratio: 16 / 10;
  width: clamp(220px, 25vw, 320px);
  height: clamp(140px, 16vw, 200px);
  object-fit: cover;
  /* border-radius: 10px; */
  /* box-shadow:0 20px 60px rgba(0,0,0,.16); */
  z-index: 1;                         /* behind text, above background */
}

/* left/bottom image */
.panel.hero-band img:first-of-type {
  left: clamp(18px, 5vw, 64px);
  bottom: clamp(24px, 8vh, 120px);
}

/* right/top image */
.panel.hero-band img:last-of-type {
  right: clamp(18px, 5vw, 64px);
  top: clamp(60px, 10vh, 140px);
}

/* --- Stack list and image and ctas --- */
/* WORD LIST panel */
.stack-panel {
  display:grid;
  place-items:center start;
  padding: clamp(24px, 6vw, 80px);
}

.stack-words {
  margin: 0;
  line-height: 1.06;
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color:#212121; /* final color after reveal */
  font-size: clamp(2.2rem, 7.2vw, 8rem);
}

.stack-words .reveal {
  display:block;
  /* “paint” animation baseline (text is visible but gets a sweep) */
  color: transparent;
  background: linear-gradient(90deg, #212121 0 100%) no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.panel.code-panel{
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFCFF;
  overflow: hidden;
}

/* The relative anchor for the badges */
.code-frame{
  position: relative;
  display: inline-block;
  max-width: min(50vw, 1200px);   /* tune this to make bigger/smaller */
  width: 100%;
}

/* Centered image source code */
.code-shot{
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 14px;
  box-shadow:0 20px 60px rgba(0,0,0,.16);
  object-fit: cover;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.code-shot.in-view {
  transform: scale(1);
  opacity: 1;
}

/* Big badges */
.tag{
  position: absolute;
  z-index: 2;
  font-family: "Montserrat",  sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  color: #212121;
  background: #9BC13B;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  animation: tagPulse 2s ease-in-out infinite alternate;
}

/* Sit just OUTSIDE the image corners */
.tag-top-right{
  top: 0;
  right: 0;
  transform: translate( clamp(16px, 3vw, 36px), calc(-1 * clamp(16px, 3vw, 36px)) );
}
.tag-bottom-left{
  bottom: 0;
  left: 0;
  transform: translate( calc(-1 * clamp(16px, 3vw, 36px)), clamp(16px, 3vw, 36px) );
}

@keyframes tagPulse {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.12); }
}

/* Mobile: keep badges inside the image so they don’t overflow too far */
@media (max-width: 768px){
  .code-frame{ max-width: 92vw; }
  .tag-top-right{
    transform: translate( -8px, -8px ); /* tuck in slightly */
  }
  .tag-bottom-left{
    left: auto; /* reset left */
    right: 50px;
    /* transform: translate( 50px, 50px ); */
  }
}

/* --- Highlights section --- */
.v-section.game-highlights{
  background:#FBFCFF;
  min-height:100svh;                     /* fill the viewport */
  display:grid;
  place-items:center;                    /* centers the grid container itself */
  padding:clamp(28px,6vw,96px);
}

.v-section.game-highlights .highlight-content{
  display:grid;
  grid-template-columns: 1.1fr 1fr;      /* image | text */
  align-items:center;                    /* vertical centering */
  gap:clamp(28px,5vw,72px);
  width: min(1200px, 100%);              /* nice readable max width */
  margin-inline:auto;
}

/* image left */
.highlight-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 0;
  /* box-shadow:0 20px 60px rgba(0,0,0,.16); */
  transform:none;                        /* no scaling */
  opacity:1;                            /* always visible */
}

/* --- Highlights: consistent image size --- */
.v-section.game-highlights .highlight-image{
  /* same size for every highlight */
  width: 100%;
  max-width: 720px;                /* cap on large screens */
  aspect-ratio: 12 / 8;            /* pick the ratio based on responsive design */
  /* or use a fixed height instead:
     height: clamp(220px, 42vh, 420px); */

  overflow: hidden;                /* crop overflow */
  /* border-radius: 14px; */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.037);
}

/* make the image fill the frame uniformly */
.v-section.game-highlights .highlight-image img{
  width: 100%;
  height: 100%;
  object-fit: fill;               /* fill + crop to the frame */
  object-position: center;
  display: block;
}

/* layout stays the same */
.v-section.game-highlights .highlight-content{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: min(1200px, 100%);
  margin-inline: auto;
}

/* optional: on small screens, make the frame a bit taller */
@media (max-width: 900px){
  .v-section.game-highlights .highlight-image{
    max-width: none;
    aspect-ratio: 16 / 10;         /* a touch taller  */
    /* or: height: clamp(220px, 50vh, 420px); */
  }
}

/* text right */
.highlight-text{ 
    text-align:left; 
}

.highlight-label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:#9BC13B;
  color:#212121;
  font-family:"Montserrat",  sans-serif;
  font-weight:600;
  font-size:clamp(.95rem,1.2vw,1.1rem);
  line-height:1;
  padding: 1rem 1rem;
  border-radius:999px;
  margin:0 0 .75rem 0;
}

.highlight-heading{
  font-family:"Montserrat",  sans-serif;
  font-weight:900;
  font-size:clamp(2rem,3vw,5rem);
  line-height:1;
  color:#212121;
  margin:.4rem 0 .6rem 0;
}

.highlight-description{
  font-size:clamp(1rem,1.6vw,1.05rem);
  line-height:1.7;
  color:#212121;
  font-weight:300;
  max-width:46ch;
  margin:0;
}

/* ==== Highlights image blinds effect ==== */
/* 1) register the animatable custom prop */
@property --segment-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;          /* start closed */
}

/* 2) base blinds effect (apply to the <img>) */
.blinds {
  --initial-segment-size: 20px;       /* stripe height (tweak) */
  --segment-size: 0px;                /* start hidden */
  transition: --segment-size 1s cubic-bezier(0.16, 1, 0.3, 1);

  /* mask: rows of opaque then transparent */
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 var(--segment-size),
    transparent var(--segment-size) var(--initial-segment-size)
  );
          mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 var(--segment-size),
    transparent var(--segment-size) var(--initial-segment-size)
  );
  -webkit-mask-size: 100% var(--initial-segment-size);
          mask-size: 100% var(--initial-segment-size);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

/* when revealed, fill each stripe → fully visible */
.blinds.is-revealed {
  --segment-size: var(--initial-segment-size);
}

/* optional: horizontal blinds variant */
.blinds-x {
  -webkit-mask-image: repeating-linear-gradient(
    to right,
    #000 0 var(--segment-size),
    transparent var(--segment-size) var(--initial-segment-size)
  );
          mask-image: repeating-linear-gradient(
    to right,
    #000 0 var(--segment-size),
    transparent var(--segment-size) var(--initial-segment-size)
  );
}

/* motion safety */
/* @media (prefers-reduced-motion: reduce) {
  .blinds,
  .blinds.is-revealed { 
    transition: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
} */

.last-fill {
    border-radius: 14px;
}


/* ===== NEXT PROJECT ===== */
.panel.next-project{
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(560px, 1.2fr); /* left copy | right image */
  align-items: center;                         /* vertical center both columns */
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(24px, 6vw, 90px);
  background: #FBFCFF;
}

/* left column (heading + link) */
.panel.next-project .copy{
  align-self: center;                          /* keep as a unit */
}

.panel.next-project h1{
  margin: 0 0 .35em 0;
  font-family: "Montserrat",  sans-serif;
  font-weight: 900;
  line-height: .85;
  letter-spacing: .01em;
  color: #212121;
  font-size: clamp(3.5rem, 10vw, 10rem);       /* big but bounded */
}

.panel.next-project .next-link{
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: #212121;
  font-weight: 400;
}

.panel.next-project .next-link a{
  color: #FF6426;                               /* orange pop */
  text-decoration: none;
  font-weight: 800;
}
.panel.next-project .next-link a:hover{
  text-decoration: underline;
}

/* right column (big image) */
.panel.next-project .next-image{
  justify-self: end;                           /* hug the right */
  align-self: center;
  width: 100%;
  max-width: min(44vw, 1100px);                /* large on desktop */
  max-height: 78vh;                            /* keep it tall but inside viewport */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,.22));
}

/* Custom cursor on hover for next-image */
.next-image:hover {
  cursor: url("/images/eye-pointer-icon.png") 16 16, none;
}

/* The floating cursor element */
.view-project {
  position: fixed;
  width: 48px;
  height: 48px;
  background-color: #FF6426;
  border-radius: 50%;
  background-image: url('/images/eye-pointer-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 9999;
  display: none; /* hidden until hover */
}


/* === Mobile: stack everything + normal vertical scroll === */
@media (max-width: 768px) {

  /* 1) Kill the pinned horizontal strip */
  .hs-track{
    position: static;
    display: block;
    height: auto;
    transform: none !important;   /* ignore any JS/set transforms */
    will-change: auto;
  }
  .hs-container{
    height: auto;                 /* allow page to size naturally */
    overflow: visible;
  }

  /* 2) Panels become normal vertical sections */
  .panel{
    flex: 1 1 auto;               /* no fixed viewport width */
    height: auto;                  /* content defines height */
    min-height: 0;                 /* avoid forced tall sections */
    padding: clamp(16px, 4vw, 28px);
    box-sizing: border-box;
    display: grid;
    place-items: initial;
  }

  /* 3) Fullscreen/contain images adapt to content width */
  img.fill{
    width: 100%;
    height: auto;                  /* no 90vh on mobile */
    object-fit: contain;
  }

  /* 4) Hero: make the “corner” images normal blocks */
  .panel.hero-band{
    display: grid;
    gap: clamp(12px, 3vw, 20px);
    text-align: left !important;
  }
  .panel.hero-band h1{
    margin-top: 5rem !important;
    text-align: center !important;
    font-size: clamp(2.2rem, 12vw, 4.2rem);
  }
  .panel.hero-band p{
    margin: 0;
    text-align: justify !important;
  }
  .panel.hero-band img{
    position: static;              /* <-- key: no absolute on mobile */
    width: 100%;
    max-width: 680px;              /* tame huge images */
    height: auto;
    margin: 0;                     /* reset offsets */
  }
  .panel.hero-band .hide-on-mobile{
    display: none;                 /* keep your second image hidden */
  }

  .panel.hero-band .stochasticity-heading {
    font-size: clamp(2rem, 10vw, 4rem);
    margin: 0;
    text-align: left;
  }

  /* 5) Highlights already good; just ensure single-column */
  .v-section.game-highlights{
    padding: clamp(20px, 6vw, 36px);
  }
  .v-section.game-highlights .highlight-content{
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 4vw, 24px);
  }
  .v-section.game-highlights .highlight-image{
    max-width: none;
    aspect-ratio: 16 / 10;
  }
  .highlight-description{ max-width: none; }

  /* Always text first */
  .v-section.game-highlights .highlight-text {
    order: 1;
  }
  .v-section.game-highlights .highlight-image {
    order: 2;
  }

  /* 6) Code panel/tag tweaks so nothing overflows */
  .code-frame{ 
    max-width: 100%; 
}
  .tag-top-right{ 
    transform: translate(-8px, -8px); 
  }
  .tag-bottom-left{ 
    transform: translate(8px, 8px); 
  }

  /* 7) Next project: stack copy over image */
  .panel.next-project{
    grid-template-columns: 1fr;
    gap: clamp(16px, 5vw, 28px);
    text-align: left;
  }
  .panel.next-project .next-image{
    justify-self: center;
    max-width: 100%;
    max-height: none;
    height: auto;
    margin-top: 100px;
    margin-bottom: 50px;
  }
}


@media (max-width: 768px) {
  /* Reduce vertical padding only on mobile */
  .v-section.game-highlights {
    min-height: auto; /* don't force full screen height */
    padding-block: clamp(20px, 8vw, 32px);
  }

  /* Stack content towards the top instead of centered */
  .v-section.game-highlights .highlight-content {
    align-items: center;
    gap: clamp(12px, 4vw, 20px);
  }

  /* Slightly reduce space between consecutive highlights */
  .v-section.game-highlights + .v-section.game-highlights {
    margin-top: clamp(16px, 6vw, 24px);
    margin-bottom: clamp(16px, 6vw, 24px);
  }

  /* Keep image proportion but shrink max height */
  .v-section.game-highlights .highlight-image {
    aspect-ratio: 16 / 9;
    max-height: clamp(180px, 40vh, 320px);
  }

  /* no extra space after last highlight */
  /* .last-highlight {
    margin-bottom: 4rem; 
  } */

  .fill {
    margin-top: 2rem;
  }

  .first-fill {
    margin-bottom: 2rem;
    display: none;
  }

  .last-fill {
    display: none;
  }

  .show-on-mobile {
    transform:  rotate(-2deg) scale(0.9);
    transition: ease-in-out 0.3s;
    max-width: 100px;
    max-height: 300px;
    width: 80vw;                  /* fills most of screen width */
    max-width: 320px;             /* caps on large phones */
    height: auto;                 /* preserves aspect ratio */
    object-fit: cover;            /* crops to fill if needed */
    /* border-radius: 10px; */
    
    /* Initial animation state */
    transform: rotate(-2deg) scale(0.92);
    transition: transform 0.5s ease-in-out;
    }

    /* Animation state when in view */
    .show-on-mobile.in-view {
    transform: rotate(0deg) scale(1);
    }
  }

/* Desktop-only subtle horizontal motion for the two hero images */
@media (min-width: 769px) {
  .panel.hero-band img {
    opacity: 1;                     /* always visible */
    will-change: transform;
  }

  /* Left/bottom image: drift a little toward center and back */
  .panel.hero-band img:first-of-type {
    /* start slightly outward, then nudge inward */
    transform: translateX(-6%);
    animation: nudge-left 4.5s ease-in-out infinite alternate;
  }

  /* Right/top image: mirror the drift */
  .panel.hero-band img:last-of-type {
    transform: translateX(6%);
    animation: nudge-right 4.5s ease-in-out infinite alternate;
  }

  @keyframes nudge-left {
    from { transform: translateX(-8%); }  /* a bit further out */
    to   { transform: translateX(-2%); }  /* a bit closer to center */
  }
  @keyframes nudge-right {
    from { transform: translateX(8%); }
    to   { transform: translateX(2%); }
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .panel.hero-band img { 
    animation: none !important; }
}
  

/* tighten ONLY the code-shot section on mobile */
@media (max-width: 768px) {
  .panel.code-panel{
    height: auto !important;   /* kill the 100vh */
    min-height: 0;
    padding-block: clamp(8px, 3vw, 16px); /* smaller top/bottom padding */
    align-items: flex-start;    /* stop vertical centering */
    justify-content: center;
  }

  .code-frame{
    margin: 8rem auto;            /* remove default figure margins */
  }

  /* optional: remove the reveal scale so it sits flush */
  .code-shot{
    /* transform: none; */
    opacity: 1;
    width: 100%;
    max-height: 60vh;
    margin-inline: auto;
  }
}


/* Tether Traverse — mobile-only highlight layout fix */
@media (max-width: 768px){
  .page-tether .v-section.game-highlights{
    display: block;                  /* stop grid centering that made the gap */
    min-height: auto;
    padding: clamp(16px, 6vw, 32px) 1rem;
  }

  .page-tether .v-section.game-highlights .highlight-content{
    display: flex;                   /* stack naturally */
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 4vw, 18px);
  }

  /* Always text first, then image */
  .page-tether .v-section.game-highlights .highlight-text{ order: 1; margin: 0; }
  .page-tether .v-section.game-highlights .highlight-image{ order: 2; margin: 0; }

  /* Avoid phantom height – let image size itself */
  .page-tether .v-section.game-highlights .highlight-image{ aspect-ratio: auto; }
  .page-tether .v-section.game-highlights .highlight-image img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Optional: tighten just the last highlight’s bottom padding */
  .page-tether .v-section.game-highlights:last-of-type{ padding-bottom: clamp(12px, 5vw, 24px); }
}