/* ============================================
   OGAR — showcase
   Palette: APEX minus the blue.
   The color budget belongs to the artworks.
   ============================================ */

:root{
  --black:#0a0a0a;
  --white:#f5f5f3;
  --gray:#6b6b6b;
  --border:rgba(245,245,243,0.14);
  --ff:'Archivo', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html, body{height:100%;}
@supports (height: 100dvh){
  html, body{height:100dvh;}
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--ff);
  font-weight:300;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== STAGE ===== */
.stage{
  position:fixed;
  inset:0;
  background:var(--black);
}
.stage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
}
.stage img.visible{opacity:1;}

/* Portrait screens: never crop the work — black absorbs the letterbox */
@media (orientation: portrait){
  .stage img{object-fit:contain;}
}

/* ===== NAVIGATION ZONES ===== */
.zone{
  position:fixed;
  top:0;
  bottom:0;
  width:50%;
  background:none;
  border:none;
  z-index:5;
}
.zone-prev{left:0;}
.zone-next{right:0;}
.zone{cursor:pointer;}
.zone:focus-visible{
  outline:1px solid var(--border);
  outline-offset:-8px;
}

/* ===== IDENTITY ===== */
.identity{
  position:fixed;
  left:max(5vw, env(safe-area-inset-left));
  bottom:calc(6vh + env(safe-area-inset-bottom));
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:min(84vw, 470px);
  pointer-events:none; /* the stage stays navigable around the text */
}
.identity a{pointer-events:auto;}

.identity .logo{
  display:block;
  width:clamp(110px, 12vw, 170px);
  height:auto;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,0.55));
}

/* Text block: carries the black halo, and it alone fades when idle */
.identity-text{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:opacity .8s ease;
}

/* The halo: a soft black cloud, no edges, no box.
   Base: pure radial gradient. Where supported, the artwork
   behind is also gently blurred and dimmed (frosted cloud). */
.identity-text::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-58px -76px;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0.42), rgba(0,0,0,0) 100%),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0.38), rgba(0,0,0,0) 72%);
  pointer-events:none;
}

.bio-role{
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.bio{
  font-size:0.85rem;
  letter-spacing:0.03em;
  line-height:1.6;
  color:rgba(245,245,243,0.85);
}

.links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.links a{
  color:var(--gray);
  text-decoration:none;
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  transition:color .2s ease;
}
.links a:hover,
.links a:focus-visible{color:var(--white);}

/* ===== COUNTER ===== */
.counter{
  position:fixed;
  right:max(5vw, env(safe-area-inset-right));
  bottom:calc(6vh + env(safe-area-inset-bottom));
  z-index:10;
  font-size:0.7rem;
  letter-spacing:0.22em;
  color:var(--gray);
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 12px rgba(0,0,0,0.65);
  transition:opacity .8s ease;
}

/* ===== THE INTERFACE ERODES =====
   After a few idle seconds, only the work remains. */
body.idle .identity-text,
body.idle .dots,
body.idle .fs,
body.idle .counter{opacity:0.22;}

/* ===== SELECTOR : one cube per artwork ===== */
.dots{
  position:fixed;
  top:calc(20px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  flex-wrap:nowrap; /* always one line — the cubes shrink instead */
  justify-content:center;
  max-width:94vw;
  transition:opacity .8s ease;
}
.dots button{
  width:min(26px, calc(88vw / var(--dot-count, 15)));
  aspect-ratio:1;
  height:auto;
  background:none;
  border:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
}
.dots button::before{
  content:"";
  width:min(10px, 55%);
  aspect-ratio:1;
  height:auto;
  background:var(--white);
  opacity:0.3;
  transition:opacity .25s ease;
}
.dots button:hover::before,
.dots button:focus-visible::before{opacity:0.5;}
.dots button.active::before{opacity:0.6;}
.dots button:focus-visible{outline:none;}

/* ===== FULLSCREEN ===== */
.fs{
  position:fixed;
  top:calc(20px + env(safe-area-inset-top));
  right:max(5vw, env(safe-area-inset-right));
  z-index:10;
  width:32px;
  height:32px;
  background:none;
  border:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:opacity .8s ease;
}
.fs span{
  width:12px;
  height:12px;
  border:1px solid var(--gray);
  transition:border-color .2s ease;
}
.fs:hover span,
.fs:focus-visible span{border-color:var(--white);}
.fs:focus-visible{outline:none;}

/* ===== MOBILE ===== */
@media (max-width: 700px){
  .identity{max-width:80vw;}
  .identity .logo{width:clamp(92px, 24vw, 130px);}
  .identity-text{gap:10px;}
  .identity-text::before{inset:-38px -50px;}
  .bio-role{font-size:0.7rem;}
  .bio{font-size:0.8rem;}
  .fs{display:none;} /* mobile browsers handle fullscreen poorly */
}

@media (prefers-reduced-motion: reduce){
  .stage img,
  .identity-text,
  .dots,
  .fs,
  .counter{transition:none;}
}