:root { color-scheme: dark; }
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}
body { display: grid; place-items: center; }
video { max-width: 100vw; max-height: 100vh; display: block; }

/* Slices overlay */
#slices{
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: auto; /* allow slices to receive hover on desktop */
  z-index: 5; /* below cursor label (10), above video */
}
#slices.horizontal{
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
}
#slices .slice{
  position: relative;
  pointer-events: auto; /* we need hover for desktop */
}
#slices .slice:not(:last-child)::before{
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.8);
  opacity: 0.0;
  pointer-events: none;
  animation: slowPulse 3.2s ease-in-out infinite alternate;
}
#slices.horizontal .slice:not(:last-child)::before{
  top: auto; right: auto; left: 0; bottom: 0; width: 100%; height: 1px;
}
#slices .slice::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(to top, rgba(255,255,255,0.5), rgba(255,255,255,0));
  opacity: 0; /* hidden until shimmer */
  transform: translateZ(0);
  z-index: 1;
}
#slices .slice[data-index="4"]::after{ background: linear-gradient(to top, rgba(255,255,255,0.5), rgba(255,255,255,0)); }
#slices .slice.shimmer::after{
  animation: sliceShimmer 650ms ease-out both;
}
#slices .slice[data-index="4"].shimmer::after{ animation: sliceShimmer 650ms ease-out both; }
#slices.horizontal .slice::after{
  top: 0; bottom: 0; left: 0; width: 0%; height: auto;
  background: linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0));
}
#slices.horizontal .slice[data-index="4"]::after{ background: linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0)); }
#slices.horizontal .slice.shimmer::after{
  animation: sliceShimmerH 650ms ease-out both;
}
#slices.horizontal .slice[data-index="4"].shimmer::after{ animation: sliceShimmerH 650ms ease-out both; }
@keyframes sliceShimmer{
  0%   { height: 0%;   opacity: 0.0; }
  12%  { height: 30%;  opacity: 0.5; }
  45%  { height: 60%;  opacity: 0.35; }
  80%  { height: 80%;  opacity: 0.18; }
  100% { height: 85%;  opacity: 0.0; }
}
@keyframes sliceShimmerStrong{
  0%   { height: 0%;   opacity: 0.0; }
  12%  { height: 40%;  opacity: 0.7; }
  50%  { height: 75%;  opacity: 0.45; }
  90%  { height: 95%;  opacity: 0.2; }
  100% { height: 98%;  opacity: 0.0; }
}
@keyframes sliceShimmerH{
  0%   { width: 0%;   opacity: 0.0; }
  12%  { width: 30%;  opacity: 0.5; }
  45%  { width: 60%;  opacity: 0.35; }
  80%  { width: 80%;  opacity: 0.18; }
  100% { width: 85%;  opacity: 0.0; }
}
@keyframes sliceShimmerHStrong{
  0%   { width: 0%;   opacity: 0.0; }
  12%  { width: 40%;  opacity: 0.7; }
  50%  { width: 75%;  opacity: 0.45; }
  90%  { width: 95%;  opacity: 0.2; }
  100% { width: 98%;  opacity: 0.0; }
}
@keyframes slowPulse{
  0%   { opacity: 0.0; }
  100% { opacity: 0.2; }
}

/* Enable slice hit-testing on all devices (mobile taps included) */

/* Slice titles (bottom center of each slice) */
.slice-title{
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translate(-50%, 0); /* upright for vertical layout */
  transform-origin: center;
  color: #fff;
  font-family: 'Alte Haas Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  max-width: 90%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
  animation: titleBreath 3.2s ease-in-out infinite alternate;
  z-index: 3; /* keep title visible above links panel */
}
#slices.horizontal .slice .slice-title{
  left: 8px; top: 50%; bottom: auto;
  transform: translate(0, -50%) rotate(180deg); /* vertical text via writing-mode and flipped */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  max-height: 80%;
  max-width: none;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

/* Mobile: make titles much smaller */
@media (pointer: coarse) {
  #slices .slice .slice-title { font-size: 8px; }
}
.slice-title.locked{
  animation: none;
  opacity: .5;
}

/* In-slice bio for slice 1 */
.slice-bio{
  position: absolute;
  inset: 6% 8% auto 8%;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
  pointer-events: none;
}
.slice-bio.open{
  opacity: .5; visibility: visible; pointer-events: auto;
}
.slice-bio .bio-content{ font-family: 'Alte Haas Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

@keyframes titleBreath{
  0%   { opacity: 0; }
  100% { opacity: .5; }
}

/* In-slice links (for slices 2-5) */
.slice-links{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 2; /* above shimmer */
}
.slice-links.open{ opacity: .85; visibility: visible; pointer-events: auto; }
.slice-links .links{
  display: grid; gap: 6px;
  width: min(70%, 220px);
  justify-items: center; /* center items horizontally */
  align-items: center;   /* center items vertically within grid rows */
  text-align: center;
}
.slice-links a{
  display: block; padding: 0; text-align: center;
  color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .5;
  border: 0; border-radius: 0;
  font-size: 10px;
  max-width: 100%;
  font-family: 'Alte Haas Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.slice-links a:hover{ opacity: .8; background: transparent; }

/* Mobile: match slice 1 bio text size to title size */
@media (pointer: coarse) {
  .slice-bio { font-size: 8px; }
}

/* Hide old burger and panel if present */
#menu-btn, #bio-panel { display: none !important; }

/* Layout toggle button (top-right) */
#layout-toggle{
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 10002;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  opacity: .6;
}
#layout-toggle:hover{ opacity: .9; }
/* Hide toggle for now (kept in DOM for later) */
#layout-toggle{ display: none; }

/* Cursor-follow text container */
#cursor-label {
  position: fixed;
  left: 0; top: 0;
  transform: translate(-50%, -50%); /* centered on the point */
  z-index: 10;
  will-change: transform;
  pointer-events: none; /* container ignores clicks; span handles them */
  user-select: none;
  opacity: .5; /* 50% transparency */
  color: #fff;
}
/* Clickable text */
#cursor-label .txt {
  pointer-events: auto;   /* clickable on touch */
  background: none;
  border: none;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;        /* indicates it’s clickable */
  white-space: nowrap;
}

/* Mobile: show text at the bottom center, no following */
@media (pointer: coarse) {
  /* Hide bottom cursor-follow text entirely on mobile */
  #cursor-label { display: none !important; }
}
video {
  max-width: 50vw;
  max-height: 50vh;
  display: block;
}
/* Mobile/touch: ensure the label is visible at the bottom */
@media (pointer: coarse) {
  /* keep hidden in this block too */
  #cursor-label { display: none !important; }
}
/* On desktop, let pointer events pass through the cursor text so slices can hover */
@media (pointer: fine) {
  #cursor-label .txt { pointer-events: none; cursor: default; }
}
/* Burger (same 50% opacity as the cursor text) */
#menu-btn{
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  z-index: 10001;
  width: 28px; height: 24px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  opacity: .5;          /* match your text opacity */
  color: #fff;
}
#menu-btn span{
  display: block; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
}

/* Bio panel (overlay) */
/* Bio text panel (top-left, no background) */
#bio-panel{
  position: fixed;
  top: calc(40px + env(safe-area-inset-top)); /* below burger */
  left: calc(10px + env(safe-area-inset-left));
  max-width: 320px;
  z-index: 10000;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  opacity: .5;
  pointer-events: none; /* not clickable when hidden */
}
#bio-panel.open{
  opacity: .5; visibility: visible;
  pointer-events: auto;
}
#bio-panel .bio-content{
  font-family: 'Alte Haas Grotesk', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
#bio-panel p{ margin: 0 0 8px; }
#bio-panel p:last-child{ margin: 0; }


/* Mobile: slightly bigger body text for readability */
@media (pointer: coarse){
  #bio-panel .bio-content{
    font-size: 14px; line-height: 1.5;
  }
}